From 3688ad5ef987f0ae2a8d0e5718d385820aced5e6 Mon Sep 17 00:00:00 2001 From: NataliaCichonska Date: Mon, 27 Dec 2021 00:17:02 +0100 Subject: [PATCH 1/2] added menu buttons, fixed styles in scorePage --- src/views/Leaderboard/Leaderboard.css | 14 +------ src/views/Leaderboard/Leaderboard.js | 33 +++++++-------- src/views/QuizView/quizView.css | 5 +++ src/views/QuizView/quizView.js | 12 +++++- src/views/ScorePage/ScorePage.css | 4 +- src/views/ScorePage/ScorePage.js | 11 ++--- .../confirmChoiceModal/confirmChoiceModal.js | 1 - src/views/quiz-settings/quiz-settings.css | 42 +++++++++++++------ src/views/quiz-settings/quiz-settings.js | 16 ++++++- 9 files changed, 82 insertions(+), 56 deletions(-) diff --git a/src/views/Leaderboard/Leaderboard.css b/src/views/Leaderboard/Leaderboard.css index 2b86906..3dbdec7 100644 --- a/src/views/Leaderboard/Leaderboard.css +++ b/src/views/Leaderboard/Leaderboard.css @@ -80,18 +80,8 @@ td.step div:first-of-type { color: whitesmoke; } -/*mainMenuBtn*/ - -button.menuButton { +.leaderboardMenuButton { position: fixed; - bottom: 2%; + bottom: 0%; left: 4%; } - -@media (max-width: 960px) { - button.menuButton { - bottom: 0; - left: 0; - width: min-content; - } -} diff --git a/src/views/Leaderboard/Leaderboard.js b/src/views/Leaderboard/Leaderboard.js index b31a7f4..acdee16 100644 --- a/src/views/Leaderboard/Leaderboard.js +++ b/src/views/Leaderboard/Leaderboard.js @@ -6,7 +6,7 @@ import '../../components/Button/Button.css'; export function renderLeaderboard() { renderPodium(); getScoreFromLocalStorage(); - renderMenuBtn(); + createMenuButton(); } function renderPodium() { @@ -53,27 +53,24 @@ 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 = ''; } diff --git a/src/views/QuizView/quizView.css b/src/views/QuizView/quizView.css index 466ec50..3c7305b 100644 --- a/src/views/QuizView/quizView.css +++ b/src/views/QuizView/quizView.css @@ -118,3 +118,8 @@ width: 80%; font-size: 3vmin; } +#quizView .quizViewMenuButton { + position: fixed; + top: 2%; + left: 2%; +} diff --git a/src/views/QuizView/quizView.js b/src/views/QuizView/quizView.js index 29146dd..bc13519 100644 --- a/src/views/QuizView/quizView.js +++ b/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; diff --git a/src/views/ScorePage/ScorePage.css b/src/views/ScorePage/ScorePage.css index e058102..2d17e73 100644 --- a/src/views/ScorePage/ScorePage.css +++ b/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%; diff --git a/src/views/ScorePage/ScorePage.js b/src/views/ScorePage/ScorePage.js index b7e94dd..995e2ae 100644 --- a/src/views/ScorePage/ScorePage.js +++ b/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() { diff --git a/src/views/confirmChoiceModal/confirmChoiceModal.js b/src/views/confirmChoiceModal/confirmChoiceModal.js index b924964..9999c9e 100644 --- a/src/views/confirmChoiceModal/confirmChoiceModal.js +++ b/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()); diff --git a/src/views/quiz-settings/quiz-settings.css b/src/views/quiz-settings/quiz-settings.css index c77422a..95d764a 100644 --- a/src/views/quiz-settings/quiz-settings.css +++ b/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 { diff --git a/src/views/quiz-settings/quiz-settings.js b/src/views/quiz-settings/quiz-settings.js index 0c8ec75..45a2b67 100644 --- a/src/views/quiz-settings/quiz-settings.js +++ b/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'); @@ -113,10 +122,13 @@ class QuizSettings { } 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); } } From c6dcdd3f8d9d39f301adfd42dff9ce93f9e7dd81 Mon Sep 17 00:00:00 2001 From: NataliaCichonska Date: Tue, 28 Dec 2021 18:37:37 +0100 Subject: [PATCH 2/2] responsible menu button --- src/views/QuizView/quizView.css | 7 +++++++ src/views/quiz-settings/quiz-settings.js | 8 -------- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/views/QuizView/quizView.css b/src/views/QuizView/quizView.css index 3c7305b..28eef59 100644 --- a/src/views/QuizView/quizView.css +++ b/src/views/QuizView/quizView.css @@ -123,3 +123,10 @@ top: 2%; left: 2%; } + +@media only screen and (min-device-width: 280px) and (max-device-width: 660px) { + .quizViewMenuButton { + width: min-content; + padding-top: 12px; + } +} diff --git a/src/views/quiz-settings/quiz-settings.js b/src/views/quiz-settings/quiz-settings.js index 45a2b67..c1a449d 100644 --- a/src/views/quiz-settings/quiz-settings.js +++ b/src/views/quiz-settings/quiz-settings.js @@ -107,14 +107,6 @@ 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'; } });