Nickname, show results

Prostecki · Oct 14, 2024 · 1001e1a · 1001e1a
1 parent bb3b64b
commit 1001e1a
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 66 deletions.
diff --git a/index.html b/index.html
@@ -15,7 +15,10 @@
           Test your knowledge and have fun! Choose a category to begin your
           adventure.
         </p>
-        <button class="start-button">Start Quiz</button>
+        <div class="start-wrapper">
+          <button class="start-button">Start Quiz</button>
+          <button class="start-button stats-table-button">Show Results</button>
+        </div>
       </div>
     </section>
     <div class="app-container"></div>

diff --git a/script.js b/script.js
@@ -102,57 +102,54 @@ async function startQuiz() {
   selectWrapper.appendChild(categorySelect);
   selectContainer.append(selectHeadline, selectWrapper, selectButton);
   appContainer.appendChild(selectContainer);
-
-  // appContainer.appendChild(categorySelect);
-  // appContainer.appendChild(selectButton);
 }
 
 // Clear content in appContainer
 function clearPage() {
   appContainer.innerHTML = "";
 }
 
-// Function for displaying questions by category
-async function displayQuestionsByCategory(categoryId, categoryName) {
-  clearPage();
-  const questions = await fetchQuestions(categoryId);
-  startQuizCategory(questions, categoryName);
-}
+// // Function for displaying questions by category
+// async function displayQuestionsByCategory(categoryId, categoryName) {
+//   clearPage();
+//   const questions = await fetchQuestions(categoryId);
+//   startQuizCategory(questions, categoryName);
+// }
 
 // Begin a quiz
-function startQuizCategory(questions, categoryTitle) {
-  clearPage();
-
-  const createElement = (tag, className, text = "") => {
-    const element = document.createElement(tag);
-    if (className) element.classList.add(...className.split(" "));
-    if (text) element.textContent = text;
-    return element;
-  };
-
-  const greetingsBox = createElement("div", "greetings-box slide-up");
-  const greetingsHeadline = createElement(
-    "h2",
-    "greetings-headline",
-    `Welcome to ${categoryTitle} questions!`
-  );
-  const greetingsParagraph = createElement(
-    "p",
-    "greetings-paragraph",
-    "Let's get started!"
-  );
-
-  greetingsBox.append(greetingsHeadline, greetingsParagraph);
-  appContainer.appendChild(greetingsBox);
-
-  setTimeout(() => {
-    greetingsBox.classList.add("hidden");
-    setTimeout(() => {
-      displayQuestions(questions);
-      greetingsBox.remove();
-    }, 500);
-  }, 1500);
-}
+// function startQuizCategory(questions, categoryTitle) {
+//   clearPage();
+
+//   const createElement = (tag, className, text = "") => {
+//     const element = document.createElement(tag);
+//     if (className) element.classList.add(...className.split(" "));
+//     if (text) element.textContent = text;
+//     return element;
+//   };
+
+//   const greetingsBox = createElement("div", "greetings-box slide-up");
+//   const greetingsHeadline = createElement(
+//     "h2",
+//     "greetings-headline",
+//     `Welcome to ${categoryTitle} questions!`
+//   );
+//   const greetingsParagraph = createElement(
+//     "p",
+//     "greetings-paragraph",
+//     "Let's get started!"
+//   );
+
+//   greetingsBox.append(greetingsHeadline, greetingsParagraph);
+//   appContainer.appendChild(greetingsBox);
+
+//   setTimeout(() => {
+//     greetingsBox.classList.add("hidden");
+//     setTimeout(() => {
+//       displayQuestions(questions);
+//       greetingsBox.remove();
+//     }, 500);
+//   }, 1500);
+// }
 
 // To display questions
 function displayQuestions(questions) {
@@ -400,23 +397,42 @@ function showQuizCompletion() {
   //Declare a variable const with saved localstorage key Score
   const finalScore = localStorage.getItem("Score");
 
+  const inputQuizName = createElement("input", "input-quiz-name");
+  inputQuizName.placeholder = "Enter your name...";
+
   const stopQuizContainer = createElement("div", "stop-quiz-container", "");
   const stopQuizHeadline = createElement(
     "h3",
     "",
     `Congratulations, quiz complete! You earned ${finalScore} points!`
   );
-  const inputQuizName = createElement("input", "input-quiz-name");
-  inputQuizName.placeholder = "Enter your name...";
+
+  const saveResultsButton = createElement(
+    "button",
+    "save-results-button",
+    "Save results"
+  );
   const startAgainButton = createElement("button", "", "Start again!");
   const leaveButton = createElement("button", "leave-button", "Go home!");
 
   const completionButtonBox = createElement("div", "stop-quiz-box-button");
 
-  completionButtonBox.append(inputQuizName, startAgainButton, leaveButton);
+  completionButtonBox.append(
+    inputQuizName,
+    saveResultsButton,
+    startAgainButton,
+    leaveButton
+  );
   stopQuizContainer.append(stopQuizHeadline, completionButtonBox);
   appContainer.appendChild(stopQuizContainer);
 
+  saveResultsButton.addEventListener("click", () => {
+    const nickname = inputQuizName.value;
+    localStorage.setItem("nickname", nickname);
+    console.log("You nickname saved successfully!", nickname);
+    inputQuizName.value = "";
+  });
+
   startAgainButton.addEventListener("click", () => {
     //Delete scores in current session
     localStorage.removeItem("Score");

diff --git a/style.css b/style.css
@@ -22,20 +22,6 @@ body {
   width: 100%;
 }
 
-/* body::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-image: url("assets/quiz-app-background.jpg");
-  background-size: cover;
-  background-position: center;
-  filter: blur(5px);
-  z-index: -1; /* Размещаем под содержимым 
-} */
-
 .app-container {
   width: 90%;
   /* border: 0.5px solid white; */
@@ -45,6 +31,13 @@ body {
   display: none;
 }
 
+.start-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
 .select-category-container {
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
   background-color: #282c34;
@@ -203,15 +196,22 @@ body {
   }
   & h2 {
     font-size: 1.2rem;
-    margin: 0 0 25px;
+    position: relative;
+    margin: 40px 0px 20px;
   }
   & h3 {
     font-size: 1.2rem;
     margin: 0 0 25px;
   }
-  .timer {
-    margin: 25px 0 0;
-  }
+}
+
+.question-number::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 0.5px;
+  background: white;
+  top: -1rem;
 }
 
 .computer-science,
@@ -303,7 +303,7 @@ body {
 }
 
 .timer-box {
-  border: 1px solid grey;
+  border: 0.1px solid grey;
   border-radius: 10px;
   height: 1.5rem;
   position: relative;
@@ -375,9 +375,11 @@ body {
 .next-question-button {
   background-color: #007bff;
   color: white;
+  height: max-content;
   border: none;
   border-radius: 8px;
-  padding: 10px 20px;
+  min-width: 75px;
+  padding: 5px;
   font-size: 1rem;
   cursor: pointer;
   transition: background-color 0.3s ease, transform 0.2s ease;
@@ -394,6 +396,7 @@ body {
   display: flex;
   flex-direction: row-reverse;
   justify-content: space-between;
+  align-items: center;
 }
 
 .finish-headline {
@@ -490,6 +493,7 @@ li {
   border-radius: 0.3125rem;
   box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
   transition: background-color 0.3s ease;
+  border-radius: 15px;
 }
 
 .option:hover {
@@ -500,12 +504,14 @@ li {
   /* background-color: #c8e6c9;  */
   border-color: #4caf50;
   color: #4caf50;
+  border-radius: 15px;
 }
 
 .option.not-correct-answer {
   /* background-color: #c3999d; */
   border-color: #f44336;
   color: red;
+  border-radius: 15px;
 }
 
 .option.clicked {