adding style and initial js logic

eleazarf · Jul 5, 2023 · ddf6e18 · ddf6e18
1 parent f79e5ca
commit ddf6e18
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 35 deletions.
diff --git a/assets/css/reset.css b/assets/css/reset.css
@@ -4,38 +4,18 @@
     box-sizing: border-box;
 }
 
-html {
-    height: 100%;
-}
-
 body {
     min-height: 100%;
     line-height: 1;
     font-family: sans-serif;
+    width: 60%;
+    margin: 0 auto;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    font-size: 100%;
-}
-
-input,
-select,
-option,
-optgroup,
-textarea,
-button,
-pre,
-code {
-    font-size: 100%;
-    font-family: inherit;
+a {
+    text-decoration: none;
 }
 
-ol,
-ul {
-    list-style: none;
+.centered {
+    text-align: center;
 }
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -0,0 +1,45 @@
+header {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    margin: 25px 0;
+}
+
+h1 {
+    margin-bottom: 10px;
+}
+
+.scores a,
+.timer {
+    font-size: 15px;
+}
+
+.scores a {
+    color: blue;
+    cursor: pointer;
+}
+
+.scores a:hover {
+    color: blueviolet;
+}
+
+button {
+    font-family: sans-serif;
+    border: none;
+    width: auto;
+    overflow: visible;
+    padding: 10px;
+    margin: 10px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: blue;
+}
+
+.controls {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 10px 0;
+}
diff --git a/assets/js/script.js b/assets/js/script.js
@@ -0,0 +1,8 @@
+// Initial variables
+var timerID;
+var timer = document.getElementById("timer");
+var startBt = document.getElementById("start-btn");
+
+var nextBt = document.getElementById("next-btn");
+
+startBt.addEventListener("click", initQuiz);
diff --git a/index.html b/index.html
@@ -11,10 +11,10 @@
 
 <body>
     <header>
-        <div>
-            <a>View high scores</a>
+        <div class="scores">
+            <a id="highscores-link">View high scores</a>
         </div>
-        <div>
+        <div id="timer" class="timer">
             Time: 75
         </div>
     </header>
@@ -23,13 +23,12 @@
 <section>
     <h1>Welcome to JavaScript Quiz Challenge</h1>
     <p>
-        You have 75 seconds to try to get the highest score by answering five
-        series of JavaScript questions. Incorrect answers will penalize your
-        time by ten seconds. Your total score will be your time after you
-        answer the last question. Click start when you are ready.
+        You have 75 seconds to try to get the highest score by answering five series of JavaScript questions. Incorrect
+        answers will penalize your time by ten seconds. Your total score will be your time after you answer the last
+        question. Click Start Quiz when you are ready.
     </p>
-    <div>
-        <button>Start Quiz</button>
+    <div class="controls">
+        <button id="start-btn" class="start-btn">Start Quiz</button>
     </div>
 </section>