Enhancement/issue 75

src/views/Leaderboard/Leaderboard.css

@@ -80,22 +80,12 @@ td.step div:first-of-type {
   color: whitesmoke;
 }
 
-/*mainMenuBtn*/
-
-button.menuButton {
+.leaderboardMenuButton {
   position: fixed;
   bottom: 2%;
   left: 4%;
 }
 
-@media (max-width: 960px) {
-  button.menuButton {
-    bottom: 0;
-    left: 0;
-    width: min-content;
-  }
-}
-
 button.resetButton {
   position: fixed;
   bottom: 2%;
@@ -108,4 +98,4 @@ button.resetButton {
     right: 0;
     width: min-content;
   }
-}
+}

src/views/Leaderboard/Leaderboard.js

@@ -5,7 +5,7 @@ import '../../components/Button/Button.css';
 
 export function renderLeaderboard() {
   renderPodium();
-  renderMenuBtn();
+  createMenuButton();
   renderResetBtn();
   getScoreFromLocalStorage();
 }
@@ -56,29 +56,26 @@ function getScoreFromLocalStorage() {
   const highScores = JSON.parse(localStorage.getItem('quizScores')) || [];
   highScores.sort((a, b) => b.score - a.score);
   function showScore() {
-    nick1.innerText = `pts: ${Object.values(highScores[0])}`;
-    nick2.innerText = `pts: ${Object.values(highScores[1])}`;
-    nick3.innerText = `pts: ${Object.values(highScores[2])}`;
-    nick4.innerText = Object.values(highScores[3]);
-    nick5.innerText = Object.values(highScores[4]);
-    nick6.innerText = Object.values(highScores[5]);
-    nick7.innerText = Object.values(highScores[6]);
-    nick8.innerText = Object.values(highScores[7]);
-    nick9.innerText = Object.values(highScores[8]);
+    // nick1.innerText = `pts: ${Object.values(highScores[0])}`;
+    // nick2.innerText = `pts: ${Object.values(highScores[1])}`;
+    // nick3.innerText = `pts: ${Object.values(highScores[2])}`;
+    // nick4.innerText = Object.values(highScores[3]);
+    // nick5.innerText = Object.values(highScores[4]);
+    // nick6.innerText = Object.values(highScores[5]);
+    // nick7.innerText = Object.values(highScores[6]);
+    // nick8.innerText = Object.values(highScores[7]);
+    // nick9.innerText = Object.values(highScores[8]);
   }
   return showScore();
 }
 
-// klawisz funkcyjny powrót do Menu
-const handleNavigationButtonClick = (e) => onNavigationChange(e);
-
-function renderMenuBtn() {
-  const menuButton = document.getElementById('mainMenu');
-  menuButton.append(Button('MENU', 'menuButton', false, 'click', handleNavigationButtonClick));
+function createMenuButton() {
+  const menuButton = Button('MENU', 'leaderboardMenuButton', null, 'click', navigateToMenu);
+  document.querySelector('#app').append(menuButton);
 }
 
-function onNavigationChange(e) {
-  window.location.hash = e.target.className;
+function navigateToMenu() {
+  window.location.hash = '';
 }
 
 function resetLocalStorage() {

src/views/QuizView/quizView.css

@@ -118,3 +118,15 @@
   width: 80%;
   font-size: 3vmin;
 }
+#quizView .quizViewMenuButton {
+  position: fixed;
+  top: 2%;
+  left: 2%;
+}
+
+@media only screen and (min-device-width: 280px) and (max-device-width: 660px) {
+  .quizViewMenuButton {
+    width: min-content;
+    padding-top: 12px;
+  }
+}

src/views/QuizView/quizView.js

@@ -1,6 +1,6 @@
 import { QuizSettings } from '../quiz-settings/quiz-settings';
 import { createTimer, startTimer, stopTimer } from '../../components/timer/quiz-timer';
-import { getRandomQuizQuestions } from '../../model/randomizer.js';
+import { getRandomQuizQuestions } from '../../model/randomizer';
 import { renderChoiceModal } from '../confirmChoiceModal/confirmChoiceModal';
 import Button from '../../components/Button/Button';
 import Answer from '../../components/Answer/Answer';
@@ -64,6 +64,15 @@ function createLifeline() {
   return lifelineContainer;
 }
 
+function createMenuButton() {
+  const menuButton = Button('MENU', 'quizViewMenuButton', null, 'click', navigateToMenu);
+  return menuButton;
+}
+
+function navigateToMenu() {
+  window.location.hash = '';
+}
+
 function createLayout() {
   const container = document.createElement('div');
   container.setAttribute('id', 'quizView');
@@ -89,6 +98,7 @@ function createLayout() {
     createRightArrow(),
     createLeftArrow(),
     answers,
+    createMenuButton(),
   );
 
   return container;

src/views/ScorePage/ScorePage.css

@@ -32,7 +32,7 @@ input {
   text-align: center;
 }
 
-.menuButton {
+.scorePageMenuButton {
   position: fixed;
   bottom: 2%;
   left: 4%;
@@ -47,7 +47,7 @@ input {
   height: 70px;
 }
 @media only screen and (min-device-width: 280px) and (max-device-width: 480px) {
-  .menuButton {
+  .scorePageMenuButton {
     position: relative;
     align-self: center;
     bottom: 0%;

src/views/ScorePage/ScorePage.js

@@ -4,7 +4,6 @@ import '../../components/Button/Button.css';
 
 import { QuizSettings } from '../quiz-settings/quiz-settings';
 import { userAnswers } from '../QuizView/quizView';
-import Answer from '../../components/Answer/Answer';
 
 export function renderScorePage() {
   const recentUserScore = getCurrentScore(userAnswers);
@@ -28,7 +27,7 @@ function renderScore(score) {
   const finalScore = document.createElement('h2');
   finalScore.setAttribute('id', 'finalScore');
   congratsText.innerText = 'CONGRATS!';
-  scoreText.innerText = 'YOUR SCORE IS: ' + score;
+  scoreText.innerText = `YOUR SCORE IS: ${score}`;
   container.append(congratsText, scoreText, finalScore);
   return container;
 }
@@ -59,11 +58,10 @@ function getCurrentScore(Answers) {
 
 function nicknameValidation() {
   const input = document.getElementById('nickname');
-  if (input.value != '' && input.value != 'NICKNAME') {
+  if (input.value !== '' && input.value !== 'NICKNAME') {
     return true;
-  } else {
-    return false;
   }
+  return false;
 }
 
 function saveQuizScore() {
@@ -81,12 +79,11 @@ function saveQuizScore() {
     };
     quizScores.push(score);
     localStorage.setItem('quizScores', JSON.stringify(quizScores));
-    nickname.value = null;
   }
 }
 
 function renderMenuButton() {
-  return Button('MENU', 'menuButton', false, 'click', goToMainPage);
+  return Button('MENU', 'scorePageMenuButton', false, 'click', goToMainPage);
 }
 
 function renderPlayAgainButton() {

src/views/confirmChoiceModal/confirmChoiceModal.js

@@ -4,7 +4,6 @@ import './confirmChoiceModal.css';
 import { userAnswers } from '../QuizView/quizView';
 
 export function renderChoiceModal() {
-  console.log(userAnswers);
   const choiceModal = document.createElement('div');
   choiceModal.setAttribute('id', 'choiceModal');
   choiceModal.append(renderQuestion(), renderInfo());

src/views/quiz-settings/quiz-settings.css

@@ -51,7 +51,6 @@ input[type='radio'] {
   -webkit-appearance: none;
   width: 100%;
   max-width: 450px;
-  min-height: 50px;
 }
 
 input[type='radio']:checked {
@@ -66,7 +65,6 @@ input[type='radio']:hover {
 
 input[type='submit']:active {
   background-color: #3e505b;
-  color: white;
 }
 
 form p {
@@ -87,16 +85,28 @@ form p {
   background-color: #3e505b;
 }
 
-#submit {
+#submitButton {
+  margin-bottom: 20px;
+  height: min-content !important;
+  padding: 15px 32px;
+  width: 200px;
+  position: fixed;
+  bottom: 2%;
+  right: 4%;
   font-size: 16px;
-  width: 40%;
-  margin-top: 100px;
-  color: white;
+  font-weight: bold;
 }
 
-#submit:hover {
-  width: 40%;
-  margin-top: 100px;
+.settingsMenuButton {
+  position: fixed;
+  bottom: 2%;
+  left: 4%;
+}
+
+.settingsMenuButton:hover {
+  background-color: #3e505b;
+}
+#submitButton:hover {
   background-color: #3e505b;
 }
 
@@ -116,11 +126,17 @@ p {
     gap: 10px;
   }
 
-  #submit {
-    position: fixed;
-    bottom: 4%;
+  #submitButton {
+    top: 470px;
+    width: 80%;
+    left: 10%;
+  }
+
+  .settingsMenuButton {
+    top: 540px;
     width: 80%;
-    background-color: #455757;
+    left: 10%;
+    height: min-content;
   }
 
   label {

src/views/quiz-settings/quiz-settings.js

@@ -1,5 +1,6 @@
 import './quiz-settings.css';
 import '../../style.css';
+import Button from '../../components/Button/Button';
 
 class QuizSettings {
   quizAbout;
@@ -74,10 +75,18 @@ class QuizSettings {
   static createButtonStartQuiz() {
     const buttonStartQuiz = document.createElement('input');
     buttonStartQuiz.type = 'submit';
-    buttonStartQuiz.setAttribute('id', 'submit');
+    buttonStartQuiz.setAttribute('id', 'submitButton');
     buttonStartQuiz.value = 'START QUIZ';
     return buttonStartQuiz;
   }
+  static navigateToMenu() {
+    window.location.hash = '';
+  }
+
+  static createMenuButton() {
+    const menuButton = Button('MENU', 'settingsMenuButton', null, 'click', this.navigateToMenu);
+    return menuButton;
+  }
 
   static createForm() {
     const form = document.createElement('form');
@@ -98,25 +107,20 @@ class QuizSettings {
       } else if (this.questionsType === undefined) {
         alert('Choose type of questions');
       } else {
-        alert(
-          'Quiz about: ' +
-            this.quizAbout +
-            '\nQuestions number: ' +
-            this.questionsNum +
-            '\nQuestions type: ' +
-            this.questionsType,
-        );
         window.location.hash = 'quiz';
       }
     });
     return form;
   }
 
   static showSettings() {
+    this.quizAbout = undefined;
+    this.questionsNum = undefined;
+    this.questionsType = undefined;
     const settings = document.createElement('div');
     settings.appendChild(this.createForm());
     settings.setAttribute('id', 'quiz-settings');
-
+    settings.append(this.createMenuButton());
     document.querySelector('#app').append(settings);
   }
 }