New changes

innocentmisheck · Jan 25, 2024 · f1c4a50 · f1c4a50
1 parent ae07612
commit f1c4a50
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 15 deletions.
diff --git a/end.html b/end.html
@@ -14,7 +14,7 @@
         <header class="header">
             <nav class="nav container">
                 <div class="nav__logo">
-                    <h1>End</h1>
+                    <h1>FE-quiz</h1>
                 </div>
                 <div class="toggle__icons container">
                     <i class="ri-sun-line"></i>
@@ -31,7 +31,7 @@ <h1>End</h1>
               <h1 class="end__heading-text">Quiz Completed <span>You scored...</span></h1>  
             </div>
             <div class="score__output">
-                <h3 class="score__heading">Frontend</h3>
+                <h3 class="score__heading">Score</h3>
                 <h1 class="score">7</h1>
                 <p class="score__remains">out of 10</p>
             </div>

diff --git a/end.js b/end.js
@@ -9,9 +9,9 @@ const mostRecentScore = localStorage.getItem('mostRecentScore'),
     finalScoreText = localStorage.getItem('finalScore')
 
 
-const theFinalText = parseInt(finalScoreText) + 1
+const theFinalText = finalScoreText 
 scoreRemains.innerText = `Got ${theFinalText} out of ${MAX_QUESTIONS} questions`
-finalScore.innerText = parseInt(mostRecentScore) + 10
+finalScore.innerText = mostRecentScore
 
 
 function handleClick() {

diff --git a/html quiz/html-quiz.css b/html quiz/html-quiz.css
@@ -279,7 +279,7 @@ h4 {
     flex-direction: column;
     row-gap: 1rem;
 }
-
+/*
 .loader {
     border: 1.6rem solid var(--first-color-light);
     border-top: 1.6rem solid #020520;
@@ -302,7 +302,7 @@ h4 {
     }
 
 }
-
+*/
 .the__game-container {
     margin-top: -6rem;
 }
@@ -316,18 +316,19 @@ h4 {
 .button {
     display: flex;
     align-items: center;
-    justify-content: flex-end;
+    justify-content: space-between;
+    margin-top: -1rem;
 }
 
-.btn {
+.btn, .skip {
     padding: .5rem 1rem;
     background: #9d25d0;
     outline: none;
     border: none;
     color: var(--title-color);
     border-radius: .5rem;
-    position: fixed;
-    bottom: 1.5rem;
+    font-size: var(--small-font-size);
+
 }
 
 .correct {
@@ -353,6 +354,11 @@ h4 {
 
 
 @media screen and (max-width: 320px) {
+    .button {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
     .html__title {
         font-size: var(--h3-font-size);
         font-weight: var(--font-weight-bold);
@@ -508,14 +514,28 @@ h4 {
         color: var(--option-color);
         font-weight: var(--font-weight-medium);
     }
+
 
+}
+@media screen and (min-width: 700px) {
+    body {
+        height: 70vh;
+    }
+    .html__title {
+        font-size: var(--bigger-font-size);
+    }
+
+
+    .html__choice-text {
+        font-size: var(--normal-font-size);
+    }
 
 }
 
 
 @media screen and (min-width: 1024px) {
     body {
-        height: 70vh;
+        height: 100vh;
     }
     .html__title {
         font-size: var(--h1-font-size);

diff --git a/html-quiz.html b/html-quiz.html
@@ -75,6 +75,8 @@ <h1 class="html__title" id="html-question">A portrait that comically exaggerates
                 <button class="btn">
                     Back to menu
                 </button>
+                <button class="skip">Skip to Score </button>
+
             </div>
         </section>
     </main>

diff --git a/html-quiz.js b/html-quiz.js
@@ -2,12 +2,13 @@ const questions = document.getElementById('html-question'),
     choices = Array.from(document.querySelectorAll('.html__choice-text')),
     choicePrefix = document.querySelector('.html__choice-prefix'),
     optionList = document.querySelector('.html__options-list'),
-    buttonBackToMenu = document.querySelector('.button'),
+    buttonBackToMenu = document.querySelector('.btn'),
     questionHtmlCounter = document.querySelector('.html__question-counter'),
     scoreCounter = document.querySelector('.html__score'),
     progressBarFull = document.querySelector('.html__progress-full'),
     loader = document.querySelector('.loader'),
-    game = document.querySelector('.the__game-container')
+    game = document.querySelector('.the__game-container'),
+    skip = document.querySelector('.skip')
 
 function scrollHeader() {
     const header = document.getElementById('header')
@@ -28,7 +29,6 @@ let finalScore = 0
 let htmlQuestions = [];
 fetch('questions.json')
     .then(res => {
-        console.log(res)
         return res.json()
     })
     .then(loadedQuestions => {
@@ -37,7 +37,6 @@ fetch('questions.json')
 
         htmlQuestions = loadedQuestions
         MAX_QUESTIONS = htmlQuestions.length
-        console.log(MAX_QUESTIONS)
 
         startGame()
     })
@@ -130,3 +129,8 @@ function handleClickButton() {
     return window.location.assign('index.html')
 }
 
+skip.addEventListener('click', handleClickSkip)
+
+function handleClickSkip() {
+    return window.location.assign('end.html')
+}
diff --git a/styles.css b/styles.css
@@ -415,6 +415,16 @@ h4 {
         font-weight: var(--font-weight-medium);
         font-size: var(--h2-font-size);
     }
+
+    .btn {
+        padding: .5rem 1rem;
+        background: #9d25d0;
+        outline: none;
+        border: none;
+        color: var(--title-color);
+        border-radius: .5rem;
+
+    }
 }
 
 @media screen and (min-width: 778px) {
@@ -442,6 +452,34 @@ h4 {
         width: 300px;
         justify-content: center;
     }
+
+
+
+    .score__output {
+        background-color: #0205206e;
+        height: 250px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        row-gap: 2rem;
+        border-radius: 1rem;
+    }
+
+    .score__heading {
+        font-weight: var(--font-weight-bold);
+        font-size: var(--h1-font-size);
+    }
+
+    .score {
+        font-size: 6rem;
+    }
+
+    .end-btn {
+        padding: 1rem;
+        font-size: var(--h3-font-size);
+        font-weight: var(--font-weight-medium);
+    }
 }
 
 @media screen and (min-width: 1024px) {
@@ -469,4 +507,43 @@ h4 {
         width: 60%;
 
     }
+
+    .end__heading {
+        margin-top: 2rem;
+    }
+
+    .end__heading-text {
+        font-size: var(--biggest-font-size);
+        font-weight: var(--font-weight-medium);
+    }
+
+    .end__heading-text span {
+        font-weight: var(--font-weight-bold);
+    }
+
+    .score__output {
+        background-color: #0205206e;
+        height: 250px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        row-gap: 2rem;
+        border-radius: 1rem;
+    }
+
+    .score__heading {
+        font-weight: var(--font-weight-bold);
+        font-size: var(--h1-font-size);
+    }
+
+    .score {
+        font-size: 6rem;
+    }
+
+    .end-btn {
+        padding: 1rem;
+        font-size: var(--h3-font-size);
+        font-weight: var(--font-weight-medium);
+    }
 }