From ddf6e1819c1d75a58178ea3f79f5fa08f892545b Mon Sep 17 00:00:00 2001 From: "eleazar.fuentes" Date: Tue, 4 Jul 2023 22:27:13 -0600 Subject: [PATCH] adding style and initial js logic --- assets/css/reset.css | 32 ++++++------------------------- assets/css/style.css | 45 ++++++++++++++++++++++++++++++++++++++++++++ assets/js/script.js | 8 ++++++++ index.html | 17 ++++++++--------- 4 files changed, 67 insertions(+), 35 deletions(-) diff --git a/assets/css/reset.css b/assets/css/reset.css index 2fb4e98..8f087f2 100644 --- 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; } \ No newline at end of file diff --git a/assets/css/style.css b/assets/css/style.css index e69de29..47839f7 100644 --- 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; +} \ No newline at end of file diff --git a/assets/js/script.js b/assets/js/script.js index e69de29..5891725 100644 --- 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 index 550a1fb..8e33aef 100644 --- a/index.html +++ b/index.html @@ -11,10 +11,10 @@
-
- View high scores +
+ View high scores
-
+
Time: 75
@@ -23,13 +23,12 @@

Welcome to JavaScript Quiz Challenge

- 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.

-
- +
+