New changes

end.js

@@ -1,20 +1,32 @@
 const finalScore = document.querySelector('.score'),
     scoreRemains = document.querySelector('.score__remains'),
-    button = document.querySelector('.end-btn')
+    button = document.querySelector('.end-btn'),
+    navBox = document.querySelector('.toggle__box')
 
 
 const mostRecentScore = localStorage.getItem('mostRecentScore'),
     MAX_QUESTIONS = localStorage.getItem('MAX_QUESTIONS'),
     questionCounter = localStorage.getItem('questionCounter'),
-    finalScoreText = localStorage.getItem('finalScore')
+    finalScoreText = localStorage.getItem('finalScore'),
+    selectedThemeEnd = localStorage.getItem('selected-theme'),
+    selectedIconEnd = localStorage.getItem('selected-icon')
 
 
-const theFinalText = finalScoreText 
+
+const theFinalText = finalScoreText
 scoreRemains.innerText = `Got ${theFinalText} out of ${MAX_QUESTIONS} questions`
 finalScore.innerText = mostRecentScore
 
+if (selectedIconEnd) {
+
+    navBox.classList.toggle(selectedIconEnd)
+}
+if (selectedThemeEnd) {
+    document.body.classList.add(selectedThemeEnd)
+}
 
 function handleClick() {
     return window.location.assign('index.html')
 }
-button.addEventListener('click', handleClick)
+button.addEventListener('click', handleClick)
+

html quiz/html-quiz.css

@@ -53,6 +53,61 @@
     --z-tooltip: 10;
     --z-fixed: 100;
 }
+/*=============== VARIABLE DARK THEME ===============*/
+body.dark {
+    --title-color: #020520d0;
+    --text-color: #aaaaaa;
+    --body-color: #000;
+    --container-color: hsl(0, 0%, 12%);
+    --box-shadow: 0 1px 11px hsla(0, 0%, 60%);
+    --white-color: hsl(0, 0%, 15%);
+    --first-color: #f4f4f4;
+    --first-color-light: #6ce278;
+
+}
+
+
+.dark
+.html__options-list span {
+    color: var(--title-color);
+
+}
+.dark .html__progress {
+    background: var(--title-color);
+
+}
+.dark .html__progress-full {
+    background-color: var(--first-color-alt);
+    border: 2px solid var(--title-color);
+}
+.dark .html__options-list {
+    background-color: var(--text-color);
+    color: #000;
+}
+.dark .html__options-list .html__choice-prefix {
+    background: #ffffffe5;
+    padding: .2rem .7rem;
+    color: #000;
+    border-radius: 7px;
+    font-weight: var(--font-weight-bold);
+    margin-left: -1rem;
+    font-size: var(--h2-font-size);
+}
+
+.dark .correct {
+    background-color: var(--first-color-light);
+}
+
+.dark .incorrect {
+    background-color: red;
+}
+
+
+
+.dark-theme .option__list:hover span {
+    color: var(--white-color);
+    background-color: var(--first-color);
+}
 
 /*=============== Reusable Css Classes ===============*/
 .container {
@@ -188,6 +243,10 @@ h4 {
         background: white;
         border-radius: 50%;
     }
+    .toggle-icon {
+        justify-content: flex-start;
+    }
+
 @media screen and (max-width: 950px) {
   .nav i {
         cursor: pointer;
@@ -279,30 +338,7 @@ h4 {
     flex-direction: column;
     row-gap: 1rem;
 }
-/*
-.loader {
-    border: 1.6rem solid var(--first-color-light);
-    border-top: 1.6rem solid #020520;
-    border-radius: 50%;
-    width: 12rem;
-    height: 12rem;
-    animation: spin 1.55s linear infinite;
-    margin-top: 10rem;
-    align-items: center;
-    justify-content: center;
-}
 
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg);
-    }
-
-}
-*/
 .the__game-container {
     margin-top: -6rem;
 }

html-quiz.html

@@ -27,9 +27,6 @@ <h1>FE-quiz</h1>
                 </div>
             </nav>
         </header>
-        <div class="loader">
-
-        </div>
         <section class="section container grid">
             <div class="the__game-container section  grid hidden">
                 <div class="progress-and-options">

html-quiz.js

@@ -8,7 +8,8 @@ const questions = document.getElementById('html-question'),
     progressBarFull = document.querySelector('.html__progress-full'),
     loader = document.querySelector('.loader'),
     game = document.querySelector('.the__game-container'),
-    skip = document.querySelector('.skip')
+    skip = document.querySelector('.skip'),
+    toggleBox = document.querySelector('.toggle__box')
 
 function scrollHeader() {
     const header = document.getElementById('header')
@@ -37,7 +38,7 @@ fetch('questions.json')
 
         htmlQuestions = loadedQuestions
         MAX_QUESTIONS = htmlQuestions.length
-       
+
         startGame()
     })
 
@@ -133,4 +134,16 @@ skip.addEventListener('click', handleClickSkip)
 
 function handleClickSkip() {
     return window.location.assign('end.html')
+}
+const darkTheme = 'dark-theme'
+const iconTheme = 'toggle-icon'
+
+const selectedThemeHtml = localStorage.getItem('selected-theme'),
+    selectedIconHtml = localStorage.getItem('selected-icon')
+
+if (selectedIconHtml) {
+    toggleBox.classList.toggle(selectedIconHtml)
+}
+if (selectedThemeHtml) {
+    document.body.classList.add(selectedThemeHtml)
 }

index.html

@@ -43,22 +43,7 @@ <h1 class="home__title">Welcome to the <span>Frontend Quiz</span></h1>
                         <span><i class="ri-html5-line"></i></span>
                         <p class="option__text html">Start Quiz</p>
                     </div>
-                    <!--
-                                <div class="option__list">
-                                    <span><i class="ri-css3-line"></i></span>
-                                    <p class="option__text css">CSS</p>
-                                </div>
-                                
-                                <div class="option__list">
-                                    <span><i class="ri-code-s-slash-line"></i></span>
-                                    <p class="option__text javascript">JavaScript</p>
-                                </div>
-                                
-                                <div class="option__list">
-                                    <span><i class="ri-reactjs-line"></i></span>
-                                    <p class="option__text react">React</p>
-                                </div>
-                            -->
+
                 </div>
             </div>
             </div>

index.js

@@ -39,7 +39,7 @@ const getCurrentIcon = () => toggle.classList.contains(iconTheme) ? 'toggle-icon
 if (selectedTheme) {
     // If the validation is fulfilled, we ask what the issue was to know if we activated or deactivated the dark
     document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme)
-    toggle.classList[selectedIcon === 'ri-moon-line' ? 'add' : 'remove'](iconTheme)
+    toggle.classList[selectedIcon === 'toggle-icon' ? 'add' : 'remove'](iconTheme)
 }
 
 // Activate / deactivate the theme manually with the button

styles.css

@@ -53,6 +53,38 @@
     --z-tooltip: 10;
     --z-fixed: 100;
 }
+/*=============== VARIABLE DARK THEME ===============*/
+body.dark-theme {
+    --title-color: #020520d0;
+    --text-color: #aaaaaa;
+    --body-color: #000;
+    --container-color: hsl(0, 0%, 12%);
+    --box-shadow: 0 1px 11px hsla(0, 0%, 60%);
+    --white-color: hsl(0, 0%, 15%);
+    --first-color: #f4f4f4;
+}
+.dark-theme .option__list {
+    background-color: var(--text-color);
+    color: #000;
+
+}
+.dark-theme .home__description {
+    color: #766f6f;
+}
+.dark-theme 
+.option__list span {
+    color: var(--title-color);
+
+
+}
+.dark-theme .option__list:hover {
+    background-color: var(--text-color);
+    color: #000;
+
+}
+
+
+
 
 /*=============== Reusable Css Classes ===============*/
 .container {
@@ -234,7 +266,7 @@ h4 {
         border-radius: 1rem;
         cursor: pointer;
         transition: .3s;
-
+        
     }
 
     .option__list:hover {