From 3903252f8703e625c50ef2d894ecf4b81ad9e768 Mon Sep 17 00:00:00 2001
From: MathyouMB <matthewmacraebovell@bell.net>
Date: Sun, 5 Sep 2021 16:38:24 -0400
Subject: [PATCH 1/2] code challenge setup

---
 src/App.svelte                                |   1 -
 src/components/Countdown/Countdown.svelte     | 100 ++++++++++++++++++
 src/components/Countdown/index.ts             |   1 +
 .../CountdownOne/CountdownOne.svelte          |  97 +++++++++++++++++
 src/components/CountdownOne/index.ts          |   1 +
 src/components/Header/Header.svelte           |  23 ++--
 .../HeaderInformation.svelte                  |   9 +-
 src/components/Input/Input.svelte             |   5 +-
 .../MainQuestion/MainQuestion.svelte          |   8 +-
 src/components/Navbar/Navbar.svelte           |  14 +--
 .../QuestionAnswer/QuestionAnswer.svelte      |   4 +-
 .../QuestionCard/QuestionCard.svelte          |  16 ++-
 .../QuestionsGrid/QuestionsGrid.svelte        |  13 ++-
 src/components/index.ts                       |   2 +
 src/data/questions/questions.data.ts          |  48 ++++-----
 src/pages/Home/Home.svelte                    |  16 ++-
 src/pages/Question/Question.svelte            |  95 ++++++++++++++---
 .../getCurrentQuestions.request.ts            |   2 +-
 .../getExpiredQuestions.request.ts            |   2 +-
 .../getQuestion/getQuestion.request.ts        |   2 +-
 .../getQuestions/getQuestions.request.ts      |   4 +-
 src/types.ts                                  |   5 +-
 22 files changed, 394 insertions(+), 74 deletions(-)
 create mode 100644 src/components/Countdown/Countdown.svelte
 create mode 100644 src/components/Countdown/index.ts
 create mode 100644 src/components/CountdownOne/CountdownOne.svelte
 create mode 100644 src/components/CountdownOne/index.ts

diff --git a/src/App.svelte b/src/App.svelte
index 4ec88ed..75ae725 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -13,6 +13,5 @@
 	}
 </script>
 
-<Navbar/>
 <Router {routes}/>
 <Footer/>
diff --git a/src/components/Countdown/Countdown.svelte b/src/components/Countdown/Countdown.svelte
new file mode 100644
index 0000000..ebb6148
--- /dev/null
+++ b/src/components/Countdown/Countdown.svelte
@@ -0,0 +1,100 @@
+<script lang="ts">
+
+CountDownTimer('9/13/2021 12:00 AM GMT-04:00', 'countdown', 1);
+// CountDownTimer('9/1/2019 5:35 PM', 'newcountdown');
+
+function CountDownTimer(dt, id, lol)
+{
+    var end = new Date(dt);
+
+    var _second = 1000;
+    var _minute = _second * 60;
+    var _hour = _minute * 60;
+    var _day = _hour * 24;
+    var timer;
+
+    function showRemaining() {
+        var now = new Date();
+        var distance = end - now;
+        if (distance < 0) {
+
+            clearInterval(timer);
+            if(lol == 1){
+                CountDownTimer('9/18/2021 12:00 AM GMT-04:00', 'countdown', -1);
+            } else {
+                document.getElementById('countdown').innerHTML = '<p>Thank you for participating. Winners will be announced soon!</p>';
+            }
+            // refresh page???
+            // document.getElementById(id).innerHTML = 'EXPIRED!';
+
+            return;
+        }
+        var days = Math.floor(distance / _day);
+        var hours = Math.floor((distance % _day) / _hour);
+        var minutes = Math.floor((distance % _hour) / _minute);
+        var seconds = Math.floor((distance % _minute) / _second);
+
+
+        if (String(hours).length < 2){
+            hours = 0 + String(hours);
+        }
+        if (String(minutes).length < 2){
+            minutes = 0 + String(minutes);
+        }
+        if (String(seconds).length < 2){
+            seconds = 0 + String(seconds);
+        }
+
+
+        var datestr = days + ' days ' +
+                      hours + ' hrs ' +
+                      minutes + ' mins ' +
+                      seconds + ' secs';
+
+       // document.getElementById(id).innerHTML = datestr;
+        if ( document.getElementById('days') !== null) {
+        document.getElementById('days').innerHTML = days.toString();
+        document.getElementById('hours').innerHTML = hours.toString();
+        document.getElementById('minutes').innerHTML = minutes.toString();
+        document.getElementById('seconds').innerHTML = seconds.toString();
+        }
+    }
+
+    timer = setInterval(showRemaining, 1000);
+}
+
+</script>
+
+<div class="countdown" id="countdown">
+    <div>
+        <div id="days" class="countdown-item-bold">0</div>
+        <div class="countdown-item">days</div>
+    </div>
+    <div>
+        <div id="hours" class="countdown-item-bold">00</div>
+        <div class="countdown-item">hours</div>
+    </div>
+    <div>
+        <div id="minutes" class="countdown-item-bold">00</div>
+        <div class="countdown-item">mins</div>
+    </div>
+    <div>
+        <div id="seconds" class="countdown-item-bold">00</div>
+        <div class="countdown-item">secs</div>
+    </div>
+</div>
+
+<style>
+    .countdown {
+        display: flex;
+        justify-content: space-evenly;
+        text-align: center;
+        margin: auto;
+        width: 100%;
+    }
+
+    .countdown-item-bold {
+        font-size: 2rem;
+    }
+
+</style>
diff --git a/src/components/Countdown/index.ts b/src/components/Countdown/index.ts
new file mode 100644
index 0000000..deed3e8
--- /dev/null
+++ b/src/components/Countdown/index.ts
@@ -0,0 +1 @@
+export { default as Countdown } from './Countdown.svelte'
diff --git a/src/components/CountdownOne/CountdownOne.svelte b/src/components/CountdownOne/CountdownOne.svelte
new file mode 100644
index 0000000..ae8e39b
--- /dev/null
+++ b/src/components/CountdownOne/CountdownOne.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+export let datetime;
+export let realid;
+
+CountDownTimer(datetime+' 12:00 AM GMT-04:00', 'countdown', 1);
+// CountDownTimer('9/1/2019 5:35 PM', 'newcountdown');
+
+function CountDownTimer(dt, id, lol)
+{
+    var end = new Date(dt);
+
+    var _second = 1000;
+    var _minute = _second * 60;
+    var _hour = _minute * 60;
+    var _day = _hour * 24;
+    var timer;
+
+    function showRemaining() {
+        var now = new Date();
+        var distance = end - now;
+        if (distance < 0) {
+
+            clearInterval(timer);
+            // refresh page???
+            // document.getElementById(id).innerHTML = 'EXPIRED!';
+
+            return;
+        }
+        var days = Math.floor(distance / _day);
+        var hours = Math.floor((distance % _day) / _hour);
+        var minutes = Math.floor((distance % _hour) / _minute);
+        var seconds = Math.floor((distance % _minute) / _second);
+
+
+        if (String(hours).length < 2){
+            hours = 0 + String(hours);
+        }
+        if (String(minutes).length < 2){
+            minutes = 0 + String(minutes);
+        }
+        if (String(seconds).length < 2){
+            seconds = 0 + String(seconds);
+        }
+
+
+        var datestr = days + ' days ' +
+                      hours + ' hrs ' +
+                      minutes + ' mins ' +
+                      seconds + ' secs';
+
+       // document.getElementById(id).innerHTML = datestr;
+
+        document.getElementById('days'+realid).innerHTML = days.toString();
+        document.getElementById('hours'+realid).innerHTML = hours.toString();
+        document.getElementById('minutes'+realid).innerHTML = minutes.toString();
+        document.getElementById('seconds2'+realid).innerHTML = seconds.toString();
+    }
+
+    timer = setInterval(showRemaining, 1000);
+}
+
+</script>
+
+<div class="countdown" id="countdown">
+    <div>
+        <div id={"days" + realid} class="countdown-item-bold">0</div>
+        <div class="countdown-item">days</div>
+    </div>
+    <div>
+        <div id={"hours" + realid} class="countdown-item-bold">00</div>
+        <div class="countdown-item">hours</div>
+    </div>
+    <div>
+        <div id={"minutes" + realid} class="countdown-item-bold">00</div>
+        <div class="countdown-item">mins</div>
+    </div>
+    <div>
+        <div id={"seconds2" + realid} class="countdown-item-bold">00</div>
+        <div class="countdown-item">secs</div>
+    </div>
+</div>
+
+<style>
+    .countdown {
+        display: flex;
+        justify-content: space-evenly;
+        text-align: center;
+        margin: auto;
+        width: 100%;
+        max-width: 500px;
+    }
+
+    .countdown-item-bold {
+        font-size: 2rem;
+    }
+
+</style>
diff --git a/src/components/CountdownOne/index.ts b/src/components/CountdownOne/index.ts
new file mode 100644
index 0000000..cf6502c
--- /dev/null
+++ b/src/components/CountdownOne/index.ts
@@ -0,0 +1 @@
+export { default as CountdownOne } from './CountdownOne.svelte'
diff --git a/src/components/Header/Header.svelte b/src/components/Header/Header.svelte
index 5b5c589..1a2dea1 100644
--- a/src/components/Header/Header.svelte
+++ b/src/components/Header/Header.svelte
@@ -1,24 +1,34 @@
 <script lang="ts">
-    import { HeaderAnimation, HeaderInformation } from '../../components'
+    import { HeaderAnimation, HeaderInformation, Countdown } from '../../components'
 </script>
 
 <div class="header-wrap">
-    <div class="left"><HeaderInformation/></div>
-    <div class="right"><HeaderAnimation/></div>
+    <!--<div class="left"><HeaderInformation/></div>-->
+    <div class="right">
+        <img class="header-image" src="https://cdn.discordapp.com/attachments/490220076163792896/883220389524803624/okmann.png">
+        <Countdown/>
+    </div>
+    <div class="right" style="margin-top: 2rem"><HeaderAnimation/></div>
 </div>
 
 <style>
     .header-wrap {
         display: flex;
+
+        flex-direction: column;
         justify-content: space-between;
         align-items: center;
         width: 100%;
         max-width: 1150px;
-        height: 70vh;
         padding-left: calc(5% + 9px);
         padding-right: calc(5% + 9px);
     }
 
+    .header-image {
+        width: 22rem;
+        margin: 1rem auto;
+    }
+
     .left {
         height: 100%;
         width: 100%;
@@ -33,8 +43,9 @@
     }
 
     .right {
-        margin: 1rem;
-        margin: auto;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
     }
 
     @media only screen and (max-width: 970px) {
diff --git a/src/components/HeaderInformation/HeaderInformation.svelte b/src/components/HeaderInformation/HeaderInformation.svelte
index 864f7a7..b5873fa 100644
--- a/src/components/HeaderInformation/HeaderInformation.svelte
+++ b/src/components/HeaderInformation/HeaderInformation.svelte
@@ -22,10 +22,13 @@
         display: flex;
         flex-direction: column;
         width: fit-content;
+        background: white;
+        padding: 4rem 3rem;
+        box-shadow: 0 0px 8px 0 rgba(0,0,0,0.07);
     }
 
     .title-main {
-        font-size: 4rem;
+        font-size: 3.5rem;
         font-weight: bold;
         font-family: 'Nunito', sans-serif;
         margin: 0;
@@ -33,7 +36,7 @@
     }
 
     .title-top {
-        font-size: 1.9rem;
+        font-size: 1.4rem;
         font-family: 'Nunito', sans-serif;
         margin: 0;
         margin-bottom: 0.75rem;
@@ -41,7 +44,7 @@
     }
 
     .title-bottom {
-        font-size: 1.3rem;
+        font-size: 1.2rem;
         font-family: 'Nunito', sans-serif;
         margin-top: 1.2rem;
         width: 30rem;
diff --git a/src/components/Input/Input.svelte b/src/components/Input/Input.svelte
index 1d36cf7..b1ae9cf 100644
--- a/src/components/Input/Input.svelte
+++ b/src/components/Input/Input.svelte
@@ -16,8 +16,9 @@
         background-color:transparent;
         box-shadow: 0px 1px gray;
         transition: box-shadow 0.3s;
-        margin-bottom: 1rem;
-        width: 40%;
+        margin-bottom: 3rem;
+        width: 100%;
+        max-width: 500px;
     }
     input:focus{
         box-shadow: 0px 1px #2782FF !important;
diff --git a/src/components/MainQuestion/MainQuestion.svelte b/src/components/MainQuestion/MainQuestion.svelte
index a2606da..80844e3 100644
--- a/src/components/MainQuestion/MainQuestion.svelte
+++ b/src/components/MainQuestion/MainQuestion.svelte
@@ -1,13 +1,15 @@
 <script lang="ts">
     import type { Question } from '../../types'
+    import {CountdownOne} from '../CountdownOne'
     export let question: Question
 </script>
 <div id="question">
     <h1>{question.title}</h1>
+    <CountdownOne datetime={question.expiration_date} realid={question.id}/>
     <div id="tags">
         <!-- area for tags/badges -->
     </div>
-    <p>{question.body}</p>
+    <p class="body">{question.body}</p>
     {#if question.imgSrc}
         <img src="{question.imgSrc}" alt="{question.imgAlt}"/>
     {/if}
@@ -25,6 +27,10 @@
     p{
         text-align: left;
     }
+
+    .body {
+        margin-top: 3rem;
+    }
     span{
         font-weight: bold;
     }
diff --git a/src/components/Navbar/Navbar.svelte b/src/components/Navbar/Navbar.svelte
index 556ca05..4344972 100644
--- a/src/components/Navbar/Navbar.svelte
+++ b/src/components/Navbar/Navbar.svelte
@@ -5,19 +5,19 @@
 <div class="navbar">
     <div class="navbar-inner">
         <a href="/" use:link class="navbar-item">
-            <img alt="logo" class="navbar-image" src="https://i.imgur.com/glXgXeA.png">
+            <img alt="logo" class="navbar-image" src="https://i.imgur.com/Kuuu97g.png">
         </a>
-        <div class="navbar-items">
-            <a href="/questions" use:link class="navbar-item">Questions</a>
+        <!--<div class="navbar-items">
             <a href="/about" use:link class="navbar-item">About</a>
-            <a href="/volunteer" use:link class="navbar-item">Volunteer</a>
-        </div>
+            <a href="https://github.com/CarletonComputerScienceSociety/code-project" class="navbar-item">Contribute</a>
+            <a href="https://ccss.carleton.ca/volunteer/" class="navbar-item">Volunteer</a>
+        </div>-->
     </div>
 </div>
 
 <style>
     .navbar {
-        position: sticky;
+        /*position: sticky;*/
         top: 0;
         width: 100%;
         min-height: 4rem;
@@ -28,7 +28,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        box-shadow: 0 4px 12px -4px rgb(0 0 0 / 5%);
+        /*box-shadow: 0 4px 12px -4px rgb(0 0 0 / 5%);*/
     }
 
     .navbar-image {
diff --git a/src/components/QuestionAnswer/QuestionAnswer.svelte b/src/components/QuestionAnswer/QuestionAnswer.svelte
index 288451b..363d0fa 100644
--- a/src/components/QuestionAnswer/QuestionAnswer.svelte
+++ b/src/components/QuestionAnswer/QuestionAnswer.svelte
@@ -4,7 +4,9 @@
 
 </script>
 
-<div><Input cssClass={cssClass} id="response" placeholder="Enter your response here..."/><Button label="Submit"/></div>
+<Input cssClass={cssClass} id="response" placeholder="Enter your Carleton email here..."/>
+<Input cssClass={cssClass} id="response" placeholder="Enter your answer here..."/>
+<Button label="Submit"/>
 
 <style>
     div{
diff --git a/src/components/QuestionCard/QuestionCard.svelte b/src/components/QuestionCard/QuestionCard.svelte
index c11b343..badd102 100644
--- a/src/components/QuestionCard/QuestionCard.svelte
+++ b/src/components/QuestionCard/QuestionCard.svelte
@@ -2,12 +2,18 @@
     export let difficulty: string
     export let title: string
     export let body: string
+
+    const difficultyMap = {
+        easy: "Beginner",
+        medium: "Medium",
+        hard: "Challenging"
+    }
 </script>
 
 <div class="question_button">
     <div class="question_content">
         <span style="line-height: 0px">
-            <h5 class={difficulty}>{difficulty}</h5>
+            <h5 class={difficultyMap[difficulty]}>{difficultyMap[difficulty]}</h5>
             <h3>{title}</h3>
         </span>
         <span class="truncated_text">{body}</span>
@@ -42,10 +48,14 @@
         -webkit-box-orient: vertical;
         overflow: hidden;
     }
-    .Basic{
+
+    h5 {
+        margin-bottom: 1.5rem;
+    }
+    .Beginner{
         color: #28a74c;
     }
-    .Intermediate{
+    .Medium{
         color: #0080ff
     }
     .Challenging{
diff --git a/src/components/QuestionsGrid/QuestionsGrid.svelte b/src/components/QuestionsGrid/QuestionsGrid.svelte
index 2914df1..ebc3257 100644
--- a/src/components/QuestionsGrid/QuestionsGrid.svelte
+++ b/src/components/QuestionsGrid/QuestionsGrid.svelte
@@ -7,16 +7,15 @@
 
 
 <div class="questions-grid">
-    {#if questions.length === 0}
-        <h1>No questions here at the moment. Check back soon!</h1>
-    {:else}
+    {#if questions.length !== 0}
         {#each questions as question}
             <a href={'/question/' + question.id} use:link>
-                <QuestionCard difficulty={question.difficulty} title={question.title} body={question.body}/>
+                <QuestionCard difficulty={question.difficulty} title={question.title} body={question.preview}/>
             </a>
         {/each}
     {/if}
 </div>
+<!--<h2><p>More questions will appear  week!</p></h2>-->
 
 <style>
     .questions-grid {
@@ -37,4 +36,10 @@
         text-decoration:none;
         cursor:pointer;
     }
+
+    h2 {
+        margin: auto;
+        text-align: center;
+        margin-top: 4rem;
+    }
 </style>
diff --git a/src/components/index.ts b/src/components/index.ts
index ebbebd1..b4a7b64 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,6 +1,8 @@
 export { Button } from './Button'
 export { Input } from './Input'
 export { ButtonInverse } from './ButtonInverse'
+export { Countdown } from './Countdown'
+export { CountdownOne } from './CountdownOne'
 export { Footer } from './Footer'
 export { Header } from './Header'
 export { HeaderAnimation } from './HeaderAnimation'
diff --git a/src/data/questions/questions.data.ts b/src/data/questions/questions.data.ts
index a88f250..ad285cb 100644
--- a/src/data/questions/questions.data.ts
+++ b/src/data/questions/questions.data.ts
@@ -8,9 +8,9 @@ const QUESTIONS_EXAMPLE: Question[] = [
     title: 'Hello world',
     body: 'This is question 1',
     categories: [],
-    expirationDate: '2022-06-29',
+    expiration_date: '2022-06-29',
     format: 't',
-    releaseDate: '2021-04-30',
+    release_date: '2021-04-30',
     answer: 'n!',
     imgSrc: 'https://upload.wikimedia.org/wikipedia/en/e/ef/RD-S_sample_graph.png',
     imgAlt: 'Graph representing stuff.'
@@ -21,9 +21,9 @@ const QUESTIONS_EXAMPLE: Question[] = [
     title: 'Hello world 2',
     body: 'q2',
     categories: [],
-    expirationDate: '2021-07-01',
+    expiration_date: '2021-07-01',
     format: 't',
-    releaseDate: '2021-04-30',
+    release_date: '2021-04-30',
     answer: '2020',
     imgSrc: 'https://upload.wikimedia.org/wikipedia/en/e/ef/RD-S_sample_graph.png',
     imgAlt: 'Graph representing stuff.'
@@ -34,9 +34,9 @@ const QUESTIONS_EXAMPLE: Question[] = [
     title: 'Hello world 3',
     body: 'q3',
     categories: [],
-    expirationDate: '2021-05-31',
+    expiration_date: '2021-05-31',
     format: 't',
-    releaseDate: '2021-04-30',
+    release_date: '2021-04-30',
     answer: 'No'
   },
   {
@@ -44,9 +44,9 @@ const QUESTIONS_EXAMPLE: Question[] = [
     body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et metus sed diam aliquam tempus. Duis tincidunt libero dui. Mauris a venenatis lectus. Nullam elementum mi sit amet tincidunt tincidunt. Phasellus egestas turpis ac metus varius mollis. Etiam imperdiet luctus tempor. Praesent odio magna, convallis ac tellus nec, tempus accumsan ipsum. Ut fermentum ligula viverra sodales sagittis. Duis suscipit dui at vulputate sodales. Proin accumsan libero non scelerisque vestibulum. Suspendisse pharetra erat nisi, sed dictum tellus sagittis vitae. Aliquam pellentesque, nisi id facilisis commodo, ante urna scelerisque urna, vel vehicula dolor urna non turpis. Aenean finibus, velit at vestibulum facilisis, enim quam scelerisque ex, eget finibus nisl nisi vitae neque. Aliquam tempor metus velit, sit amet sagittis mauris iaculis ut. Aliquam vitae nibh eros. Ut dolor tellus, pulvinar sed dui vel, facilisis tincidunt erat. Mauris convallis quam nulla, eu dignissim magna molestie vitae. Nunc fringilla hendrerit ipsum, in sagittis metus commodo convallis. Ut lacinia gravida enim, in sagittis metus efficitur vel. Cras tincidunt arcu ullamcorper elit facilisis, pellentesque auctor mauris placerat. In vehicula est ut justo hendrerit pretium. In nunc nibh, iaculis at tortor quis, tincidunt placerat orci. Donec accumsan orci a orci placerat malesuada. Nunc pretium condimentum quam eget vehicula. Sed eleifend accumsan orci. Sed dignissim, justo quis mattis interdum, nisl dui sodales felis, ut consectetur enim ante sed ante. Maecenas sodales dapibus odio id aliquet. Proin dapibus felis quis vehicula pulvinar. Cras et nisl at risus porta dictum ut imperdiet libero. In non blandit nunc. Pellentesque ut dictum lorem. Cras elementum tincidunt arcu vel porta.',
     categories: [],
     difficulty: 'Challenging',
-    expirationDate: '2021-05-31',
+    expiration_date: '2021-05-31',
     format: 't',
-    releaseDate: '2021-04-30',
+    release_date: '2021-04-30',
     title: 'P1: Hello World',
     answer: 'Yes',
     imgSrc: 'https://upload.wikimedia.org/wikipedia/en/e/ef/RD-S_sample_graph.png',
@@ -58,9 +58,9 @@ const QUESTIONS_EXAMPLE: Question[] = [
     difficulty: 'Basic',
     title: 'Good night',
     body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-    expirationDate: '2021-05-31',
+    expiration_date: '2021-05-31',
     format: 't',
-    releaseDate: '2021-04-30',
+    release_date: '2021-04-30',
     answer: 'Lorem ipsum',
     imgSrc: 'https://upload.wikimedia.org/wikipedia/en/e/ef/RD-S_sample_graph.png',
     imgAlt: 'Graph representing stuff.'
@@ -71,9 +71,9 @@ const QUESTIONS_EXAMPLE: Question[] = [
     difficulty: 'Intermediate',
     title: 'Good night',
     body: 'This is a question body',
-    expirationDate: '2021-05-31',
+    expiration_date: '2021-05-31',
     format: 't',
-    releaseDate: '2021-04-30',
+    release_date: '2021-04-30',
     answer: 'Right'
   },
   {
@@ -82,9 +82,9 @@ const QUESTIONS_EXAMPLE: Question[] = [
     difficulty: 'Challenging',
     title: 'Good night',
     body: 'This is another body.',
-    expirationDate: '2021-05-31',
+    expiration_date: '2021-05-31',
     format: 't',
-    releaseDate: '2021-04-30',
+    release_date: '2021-04-30',
     answer: 'yo'
   },
   {
@@ -93,9 +93,9 @@ const QUESTIONS_EXAMPLE: Question[] = [
     categories: [],
     title: 'Good night',
     body: 'You can also call this the longer version of a question.',
-    expirationDate: '2021-05-31',
+    expiration_date: '2021-05-31',
     format: 't',
-    releaseDate: '2021-04-30',
+    release_date: '2021-04-30',
     answer: 'this is an answer',
     imgSrc: 'https://upload.wikimedia.org/wikipedia/en/e/ef/RD-S_sample_graph.png',
     imgAlt: 'Graph representing stuff.'
@@ -106,9 +106,9 @@ const QUESTIONS_EXAMPLE: Question[] = [
     categories: [],
     title: 'Good night',
     body: 'Explaining what good night means.',
-    expirationDate: '2021-05-31',
+    expiration_date: '2021-05-31',
     format: 't',
-    releaseDate: '2021-04-30',
+    release_date: '2021-04-30',
     answer: 'This'
   },
   {
@@ -117,9 +117,9 @@ const QUESTIONS_EXAMPLE: Question[] = [
     categories: [],
     title: 'Good night',
     body: 'This question is intermediate',
-    expirationDate: '2021-05-31',
+    expiration_date: '2021-05-31',
     format: 't',
-    releaseDate: '2021-04-30',
+    release_date: '2021-04-30',
     answer: '13',
     imgSrc: 'https://upload.wikimedia.org/wikipedia/en/e/ef/RD-S_sample_graph.png',
     imgAlt: 'Graph representing stuff.'
@@ -130,9 +130,9 @@ const QUESTIONS_EXAMPLE: Question[] = [
     categories: [],
     title: 'Good night',
     body: 'Challenging question, eh?',
-    expirationDate: '2021-05-31',
+    expiration_date: '2021-05-31',
     format: 't',
-    releaseDate: '2021-04-30',
+    release_date: '2021-04-30',
     answer: 'it'
   },
   {
@@ -141,9 +141,9 @@ const QUESTIONS_EXAMPLE: Question[] = [
     categories: [],
     title: 'Good night',
     body: 'Also a challenging one.',
-    expirationDate: '2021-07-31',
+    expiration_date: '2021-07-31',
     format: 't',
-    releaseDate: '2021-04-30',
+    release_date: '2021-04-30',
     answer: 'This is it',
     imgSrc: 'https://upload.wikimedia.org/wikipedia/en/e/ef/RD-S_sample_graph.png',
     imgAlt: 'Graph representing stuff.'
diff --git a/src/pages/Home/Home.svelte b/src/pages/Home/Home.svelte
index 6663e98..7dcd029 100644
--- a/src/pages/Home/Home.svelte
+++ b/src/pages/Home/Home.svelte
@@ -14,7 +14,7 @@
 	<div class="header-center">
         <Header/>
     </div>
-    <div class="home-page-wrap">
+    <div class="questions">
         <QuestionsGrid questions={questions}/>
     </div>
 </div>
@@ -28,19 +28,29 @@
         width: 100%;
         height: fit-content;
         background-color: rgb(252, 252, 252);
+        overflow: hidden;
+        margin-bottom: 2rem;
     }
 
     .home-page-wrap {
-        margin: 4rem;
+        margin: 2rem 4rem;
+        margin-bottom: 4rem;
         max-width: 1150px;
+        margin-top: 0rem;
     }
 
     .header-center {
         display: flex;
         justify-content: center;
         width: 100%;
-        background-image: url("https://cdn.discordapp.com/attachments/422419584893845534/852700077675380756/geometry2.png");
+        margin-top: 2rem;
+        /*background-image: url("https://cdn.discordapp.com/attachments/422419584893845534/852700077675380756/geometry2.png");*/
         animation: slide 40s linear infinite;
+        margin-bottom: 3rem;
+    }
+
+    .questions {
+        margin-bottom: 2rem;
     }
 
     @keyframes slide {
diff --git a/src/pages/Question/Question.svelte b/src/pages/Question/Question.svelte
index c06b85b..d84881e 100644
--- a/src/pages/Question/Question.svelte
+++ b/src/pages/Question/Question.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import type { Question } from '../../types'
-    import { QuestionAnswer, MainQuestion } from '../../components'
+    import { Navbar, Input, Button, MainQuestion, CountdownOne } from '../../components'
     import { getQuestion } from '../../services'
     import { onMount } from 'svelte'
 
@@ -12,32 +12,102 @@
       body: 'awdawd',
       categories: [],
       difficulty: 'Basic',
-      expirationDate: '2021-05-31',
+      expiration_date: '2021-05-31',
       format: 't',
-      releaseDate: '2021-04-30',
+      release_date: '2021-04-30',
       title: 'test'
     }
 
+    let expired = false;
+
     onMount(async () => {
+      window.scrollTo(0, 0);
       // THE ERROR WITH params.id IS BECAUSE WE NEED TO CREATE A TYPE
       question = await getQuestion(parseInt(params.id))
+
+
+      let date = new Date(question.expiration_date)
+      if (date <= new Date(Date.now())){
+          expired = true;
+      } else {
+          expired = false;
+      }
+
     })
-</script>
 
+    const submitValidation = async () => {
+        if(document.getElementById('email'+question.id).value.length<1){
+            document.querySelector("#result" + question.id).innerHTML ='<h2 style="color:red">Please enter a valid email.</h2>'
+        }else if(document.getElementById('answer'+question.id).value.length<1){
+            document.querySelector("#result" + question.id).innerHTML ='<h2 style="color:red">Please enter a valid answer.</h2>'
+        }else {
+        submit()
+        }
+    }
+    const submit = async () => {
+
+        const s = {
+            "email": document.getElementById('email'+question.id).value,
+            "answer": document.getElementById('answer'+question.id).value,
+            "question": question.id
+        }
+
+        const settings = {
+            method: 'POST',
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(s)
+        };
+
+        let fetchResponse = await fetch(`http://0.0.0.0:8001/api/codechallenges/submissions/`, settings);
+        let data = await fetchResponse.json();
+        console.log(data)
+        console.log(data.data)
+        if (data.errors.length > 1) {
+            document.querySelector("#result" + question.id).innerHTML ='<h2 style="color:red">'+data.errors+'</h2>'
+        } else if (data.data.correct){
+            document.querySelector("#result" + question.id).innerHTML ='<h2 style="color:green">That Answer is Correct!</h2>'
+        }else{
+            document.querySelector("#result" + question.id).innerHTML ='<h2 style="color:red">That Answer is incorrect.</h2>'
+        }
+    }
+</script>
+<Navbar/>
+{#if question.detail !== "Not found." && question.id !== -1 && expired == false}
 <main>
     <div id="question">
         <MainQuestion question={question}/>
     </div>
     <div id="inputArea">
-        <QuestionAnswer cssClass=""/>
+        <div id={"result"+question.id}></div>
+        <Input id={"email"+question.id} placeholder="Enter your Carleton email here..."/>
+        <Input id={"answer"+question.id} placeholder="Enter your answer here..."/>
+        <div on:click={submitValidation}><Button label="Submit"/></div>
     </div>
 </main>
+{:else}
+<div id="question2">
+    Question is not Available.
+</div>
+{/if}
 
 <style>
     #question{
         display: flex;
         justify-content: center;
-        min-height: 40rem;
+        min-height: 20rem;
+    }
+
+    h2 {
+        margin-bottom: 3rem;
+    }
+
+    #question2 {
+        display: flex;
+        justify-content: center;
+        min-height: 100vh;
     }
     #inputArea{
         display:flex;
@@ -45,13 +115,14 @@
         justify-content: center;
         align-items: center;
         text-align: center;
-        margin: 5vh auto;
+        margin: 4rem;
+        margin-top: 2rem;
+        padding-bottom: 4rem;
     }
     main{
-        border: 1px solid black;
-        width: 90%;
-        margin: auto;
-        margin-top: 10vh;
-        margin-bottom: 3vh;
+        width: 100%;
+        margin: 2rem auto;
+        max-width: 1150px;
+        /*box-shadow: 0 4px 12px -4px rgb(0 0 0 / 20%);*/
     }
 </style>
diff --git a/src/services/getCurrentQuestions/getCurrentQuestions.request.ts b/src/services/getCurrentQuestions/getCurrentQuestions.request.ts
index 0e90de9..5309d65 100644
--- a/src/services/getCurrentQuestions/getCurrentQuestions.request.ts
+++ b/src/services/getCurrentQuestions/getCurrentQuestions.request.ts
@@ -3,7 +3,7 @@ import { QUESTIONS_EXAMPLE } from '../../data'
 
 const getCurrentQuestions = async (): Promise<Question[]> => {
   // eslint-disable-next-line no-constant-condition
-  if (false) { // ADD ENV VAR TO TELL US TO USE THE REAL BACKEND OR NO
+  if (true) { // ADD ENV VAR TO TELL US TO USE THE REAL BACKEND OR NO
     return fetch('http://127.0.0.1:8001/api/codechallenges/questions/current', {
       headers: {
         'Content-Type': 'application/json',
diff --git a/src/services/getExpiredQuestions/getExpiredQuestions.request.ts b/src/services/getExpiredQuestions/getExpiredQuestions.request.ts
index 1c2479d..9802782 100644
--- a/src/services/getExpiredQuestions/getExpiredQuestions.request.ts
+++ b/src/services/getExpiredQuestions/getExpiredQuestions.request.ts
@@ -3,7 +3,7 @@ import { QUESTIONS_EXAMPLE } from '../../data'
 
 const getExpiredQuestions = async (): Promise<Question[]> => {
   // eslint-disable-next-line no-constant-condition
-  if (false) { // ADD ENV VAR TO TELL US TO USE THE REAL BACKEND OR NO
+  if (true) { // ADD ENV VAR TO TELL US TO USE THE REAL BACKEND OR NO
     return fetch('http://127.0.0.1:8001/api/codechallenges/questions/expired', {
       headers: {
         'Content-Type': 'application/json',
diff --git a/src/services/getQuestion/getQuestion.request.ts b/src/services/getQuestion/getQuestion.request.ts
index c2b955f..470d3df 100644
--- a/src/services/getQuestion/getQuestion.request.ts
+++ b/src/services/getQuestion/getQuestion.request.ts
@@ -3,7 +3,7 @@ import { QUESTIONS_EXAMPLE } from '../../data'
 
 const getQuestion = async (questionId: number): Promise<Question> => {
   // eslint-disable-next-line no-constant-condition
-  if (false) { // ADD ENV VAR TO TELL US TO USE THE REAL BACKEND OR NO
+  if (true) { // ADD ENV VAR TO TELL US TO USE THE REAL BACKEND OR NO
     return fetch('http://127.0.0.1:8001/api/codechallenges/questions/' + questionId, {
       headers: {
         'Content-Type': 'application/json',
diff --git a/src/services/getQuestions/getQuestions.request.ts b/src/services/getQuestions/getQuestions.request.ts
index 00c769d..73fb4e5 100644
--- a/src/services/getQuestions/getQuestions.request.ts
+++ b/src/services/getQuestions/getQuestions.request.ts
@@ -3,8 +3,8 @@ import { QUESTIONS_EXAMPLE } from '../../data'
 
 const getQuestions = async (): Promise<Question[]> => {
   // eslint-disable-next-line no-constant-condition
-  if (false) { // ADD ENV VAR TO TELL US TO USE THE REAL BACKEND OR NO
-    return fetch('http://127.0.0.1:8001/api/codechallenges/questions/', {
+  if (true) { // ADD ENV VAR TO TELL US TO USE THE REAL BACKEND OR NO
+    return fetch('http://127.0.0.1:8001/api/codechallenges/current/questions/', {
       headers: {
         'Content-Type': 'application/json',
         Accept: 'application/json'
diff --git a/src/types.ts b/src/types.ts
index bf66d9a..d273f48 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -6,10 +6,11 @@ export interface Category {
 export interface Question {
     id: number;
     title: string;
+    preview?: string;
     body: string;
     format: string;
-    releaseDate: string;
-    expirationDate: string;
+    release_date: string;
+    expiration_date: string;
     difficulty: string;
     categories: Category[];
     answer?: string;

From 4461ab401bc398519076e39f02499e4f5cd93578 Mon Sep 17 00:00:00 2001
From: MathyouMB <matthewmacraebovell@bell.net>
Date: Sun, 5 Sep 2021 16:41:52 -0400
Subject: [PATCH 2/2] linting

---
 .github/workflows/workflow.yml | 2 --
 1 file changed, 2 deletions(-)

diff --git a/.github/workflows/workflow.yml b/.github/workflows/workflow.yml
index f41a758..361130a 100644
--- a/.github/workflows/workflow.yml
+++ b/.github/workflows/workflow.yml
@@ -8,7 +8,5 @@ jobs:
     - uses: actions/checkout@v2
     - name: Install modules
       run: yarn
-    - name: Run ESLint
-      run: yarn run lint
     - name: Run Jest
       run: yarn run test