From cfa2fb73281b0d0d37b7d68dfbd9b7f3d7d8a349 Mon Sep 17 00:00:00 2001 From: Urszuja Date: Mon, 27 Dec 2021 13:09:01 +0100 Subject: [PATCH 01/12] start issue-73 --- src/api/getQuizQuestions.js | 4 ++-- src/components/Answer/Answer.js | 2 +- src/components/Dropdown/Dropdown.css | 0 src/components/Dropdown/Dropdown.js | 0 4 files changed, 3 insertions(+), 3 deletions(-) create mode 100644 src/components/Dropdown/Dropdown.css create mode 100644 src/components/Dropdown/Dropdown.js diff --git a/src/api/getQuizQuestions.js b/src/api/getQuizQuestions.js index afd4dc4..c8d6b4d 100644 --- a/src/api/getQuizQuestions.js +++ b/src/api/getQuizQuestions.js @@ -7,7 +7,7 @@ const questionsApis = { CATS: { url: 'https://api.thecatapi.com/v1/breeds', api_key: '2d4cf1ee-1883-474f-80ab-f931262fd79b' }, }; -export const getQuizQuestions = async (animal, numberOfQuestions) => { +export const getQuizQuestions = async (animal) => { const questions = []; const data = await retrieveQuizQuestions(animal); @@ -28,7 +28,7 @@ async function retrieveQuizQuestions(animal) { return data; } catch (error) { - console.error('Error:', error); + return console.error('Error:', error); } } diff --git a/src/components/Answer/Answer.js b/src/components/Answer/Answer.js index 4bcf535..aed2bf9 100644 --- a/src/components/Answer/Answer.js +++ b/src/components/Answer/Answer.js @@ -16,7 +16,7 @@ export default class Answer { if (this.checkIfCorrect()) { score = 1; if (this.changed) { - score = score / 2; + score /= score / 2; } } return score; diff --git a/src/components/Dropdown/Dropdown.css b/src/components/Dropdown/Dropdown.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Dropdown/Dropdown.js b/src/components/Dropdown/Dropdown.js new file mode 100644 index 0000000..e69de29 From 6bfeb6095fe07822c1c0b5317cc719772903e951 Mon Sep 17 00:00:00 2001 From: Urszuja Date: Sun, 2 Jan 2022 14:53:54 +0100 Subject: [PATCH 02/12] basic dropdown created --- src/components/Dropdown/Dropdown.js | 0 .../ScoreFilter.css} | 0 src/components/ScoreFilter/ScoreFilter.js | 39 +++++++++++++++++++ src/views/Leaderboard/Leaderboard.js | 7 ++++ 4 files changed, 46 insertions(+) delete mode 100644 src/components/Dropdown/Dropdown.js rename src/components/{Dropdown/Dropdown.css => ScoreFilter/ScoreFilter.css} (100%) create mode 100644 src/components/ScoreFilter/ScoreFilter.js diff --git a/src/components/Dropdown/Dropdown.js b/src/components/Dropdown/Dropdown.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/Dropdown/Dropdown.css b/src/components/ScoreFilter/ScoreFilter.css similarity index 100% rename from src/components/Dropdown/Dropdown.css rename to src/components/ScoreFilter/ScoreFilter.css diff --git a/src/components/ScoreFilter/ScoreFilter.js b/src/components/ScoreFilter/ScoreFilter.js new file mode 100644 index 0000000..7f13d5e --- /dev/null +++ b/src/components/ScoreFilter/ScoreFilter.js @@ -0,0 +1,39 @@ +import './ScoreFilter.css'; + +export default function ScoreFilter() { + const scoreFilter = document.createElement('div'); + scoreFilter.classList.add('score-filter'); + + const label = document.createElement('label'); + label.innerHTML = 'Filter results by:'; + label.setAttribute('for', 'settings'); + + scoreFilter.appendChild(label); + + const dropdown = document.createElement('select'); + dropdown.setAttribute('name', 'settings'); + dropdown.setAttribute('id', 'settings'); + + const typeSetting = document.createElement('option'); + typeSetting.setAttribute('value', 'type-setting'); + typeSetting.innerHTML = 'Type'; + + const aboutSetting = document.createElement('option'); + aboutSetting.setAttribute('value', 'about-setting'); + aboutSetting.innerHTML = 'About'; + + dropdown.append(typeSetting, aboutSetting); + scoreFilter.appendChild(dropdown); + /* + + + +*/ + + return scoreFilter; +} diff --git a/src/views/Leaderboard/Leaderboard.js b/src/views/Leaderboard/Leaderboard.js index b31a7f4..25fb75b 100644 --- a/src/views/Leaderboard/Leaderboard.js +++ b/src/views/Leaderboard/Leaderboard.js @@ -3,6 +3,8 @@ import './Leaderboard.css'; import Button from '../../components/Button/Button'; import '../../components/Button/Button.css'; +import ScoreFilter from '../../components/ScoreFilter/ScoreFilter'; + export function renderLeaderboard() { renderPodium(); getScoreFromLocalStorage(); @@ -14,6 +16,8 @@ function renderPodium() {

LEADERBOARD

+
+
@@ -47,6 +51,9 @@ function renderPodium() { `; + const filter = document.querySelector('.filter'); + const score_filter = ScoreFilter(); + filter.append(score_filter); } function getScoreFromLocalStorage() { From 127691045e53a5c35920cd7c156500a08b0347b9 Mon Sep 17 00:00:00 2001 From: Urszuja Date: Sun, 2 Jan 2022 15:32:18 +0100 Subject: [PATCH 03/12] add range --- src/components/ScoreFilter/ScoreFilter.css | 15 ++++++ src/components/ScoreFilter/ScoreFilter.js | 59 ++++++++++++++++------ 2 files changed, 58 insertions(+), 16 deletions(-) diff --git a/src/components/ScoreFilter/ScoreFilter.css b/src/components/ScoreFilter/ScoreFilter.css index e69de29..41a0d86 100644 --- a/src/components/ScoreFilter/ScoreFilter.css +++ b/src/components/ScoreFilter/ScoreFilter.css @@ -0,0 +1,15 @@ +.score-filter { + display: flex; + align-items: center; + align-content: center; + margin-top: 5vh; +} + +.score-range { + display: flex; +} + +input { + height: 5vh; + width: 5vw; +} diff --git a/src/components/ScoreFilter/ScoreFilter.js b/src/components/ScoreFilter/ScoreFilter.js index 7f13d5e..d4f8344 100644 --- a/src/components/ScoreFilter/ScoreFilter.js +++ b/src/components/ScoreFilter/ScoreFilter.js @@ -4,15 +4,51 @@ export default function ScoreFilter() { const scoreFilter = document.createElement('div'); scoreFilter.classList.add('score-filter'); + const dropdown = Dropdown(); + scoreFilter.appendChild(dropdown); + + const questionRange = RangeSelect(); + scoreFilter.appendChild(questionRange); + + return scoreFilter; +} + +function RangeSelect() { + const range = document.createElement('div'); + range.classList.add('score-range'); + + const label = document.createElement('label'); + label.innerHTML = 'Question number range'; + + const labelMin = document.createElement('p'); + labelMin.innerHTML = 'Min'; + + const inputMin = document.createElement('input'); + inputMin.type = 'number'; + + const labelMax = document.createElement('p'); + labelMax.innerHTML = 'Max'; + const inputMax = document.createElement('input'); + inputMax.type = 'number'; + + range.append(label, labelMin, inputMin, labelMax, inputMax); + + return range; +} + +function Dropdown() { + const dropdown = document.createElement('div'); + dropdown.classList.add('dropdown'); + const label = document.createElement('label'); label.innerHTML = 'Filter results by:'; label.setAttribute('for', 'settings'); - scoreFilter.appendChild(label); + dropdown.appendChild(label); - const dropdown = document.createElement('select'); - dropdown.setAttribute('name', 'settings'); - dropdown.setAttribute('id', 'settings'); + const select = document.createElement('select'); + select.setAttribute('name', 'settings'); + select.setAttribute('id', 'settings'); const typeSetting = document.createElement('option'); typeSetting.setAttribute('value', 'type-setting'); @@ -22,18 +58,9 @@ export default function ScoreFilter() { aboutSetting.setAttribute('value', 'about-setting'); aboutSetting.innerHTML = 'About'; - dropdown.append(typeSetting, aboutSetting); - scoreFilter.appendChild(dropdown); - /* - + select.append(typeSetting, aboutSetting); - -*/ + dropdown.append(select); - return scoreFilter; + return dropdown; } From f26772de4807ccc74a7c3c35d5336017f96741e6 Mon Sep 17 00:00:00 2001 From: Urszuja Date: Sun, 2 Jan 2022 15:55:21 +0100 Subject: [PATCH 04/12] add whole markup --- src/components/ScoreFilter/ScoreFilter.js | 29 +++++++++++++---------- 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/src/components/ScoreFilter/ScoreFilter.js b/src/components/ScoreFilter/ScoreFilter.js index d4f8344..b696ee8 100644 --- a/src/components/ScoreFilter/ScoreFilter.js +++ b/src/components/ScoreFilter/ScoreFilter.js @@ -4,8 +4,9 @@ export default function ScoreFilter() { const scoreFilter = document.createElement('div'); scoreFilter.classList.add('score-filter'); - const dropdown = Dropdown(); - scoreFilter.appendChild(dropdown); + const dropdownAbout = Dropdown('about-dropdown', 'animal species', 'cat', 'dog'); + const dropdownType = Dropdown('type-dropdown', 'quiz type', 'multiple choice', 'open'); + scoreFilter.append(dropdownAbout, dropdownType); const questionRange = RangeSelect(); scoreFilter.appendChild(questionRange); @@ -36,12 +37,12 @@ function RangeSelect() { return range; } -function Dropdown() { +function Dropdown(className, dropdownLabel, option1, option2) { const dropdown = document.createElement('div'); - dropdown.classList.add('dropdown'); + dropdown.classList.add(className); const label = document.createElement('label'); - label.innerHTML = 'Filter results by:'; + label.innerHTML = `Sort by ${dropdownLabel}`; label.setAttribute('for', 'settings'); dropdown.appendChild(label); @@ -50,15 +51,19 @@ function Dropdown() { select.setAttribute('name', 'settings'); select.setAttribute('id', 'settings'); - const typeSetting = document.createElement('option'); - typeSetting.setAttribute('value', 'type-setting'); - typeSetting.innerHTML = 'Type'; + const defaultSetting = document.createElement('option'); + defaultSetting.setAttribute('value', 'all'); + defaultSetting.innerHTML = 'all'; - const aboutSetting = document.createElement('option'); - aboutSetting.setAttribute('value', 'about-setting'); - aboutSetting.innerHTML = 'About'; + const option1Setting = document.createElement('option'); + option1Setting.setAttribute('value', `${option2}`); + option1Setting.innerHTML = option1; - select.append(typeSetting, aboutSetting); + const option2Setting = document.createElement('option'); + option2Setting.setAttribute('value', `${option2}`); + option2Setting.innerHTML = option2; + + select.append(defaultSetting, option1Setting, option2Setting); dropdown.append(select); From 0d29798c8cb45794c27b2bb36f8913fd3c249bd2 Mon Sep 17 00:00:00 2001 From: Urszuja Date: Sun, 2 Jan 2022 17:53:41 +0100 Subject: [PATCH 05/12] add range in inputs --- src/components/ScoreFilter/ScoreFilter.js | 45 ++++++++++++++++++----- src/views/Leaderboard/Leaderboard.js | 6 +++ 2 files changed, 42 insertions(+), 9 deletions(-) diff --git a/src/components/ScoreFilter/ScoreFilter.js b/src/components/ScoreFilter/ScoreFilter.js index b696ee8..a1bf010 100644 --- a/src/components/ScoreFilter/ScoreFilter.js +++ b/src/components/ScoreFilter/ScoreFilter.js @@ -1,16 +1,31 @@ import './ScoreFilter.css'; +const settings = { + ABOUT: 'default', + TYPE: 'default', + MIN: 1, + MAX: 20, +}; + export default function ScoreFilter() { const scoreFilter = document.createElement('div'); scoreFilter.classList.add('score-filter'); - const dropdownAbout = Dropdown('about-dropdown', 'animal species', 'cat', 'dog'); + const dropdownAbout = Dropdown('about-dropdown', 'animal', 'cat', 'dog'); const dropdownType = Dropdown('type-dropdown', 'quiz type', 'multiple choice', 'open'); scoreFilter.append(dropdownAbout, dropdownType); const questionRange = RangeSelect(); scoreFilter.appendChild(questionRange); + const button = ClearButton(); + + if (settings.ABOUT !== 'default' || settings.TYPE !== 'default' || settings.MIN !== 1 || settings.MAX !== 20) { + scoreFilter.append(button); + } else if (settings.ABOUT === 'default' && settings.TYPE === 'default' && settings.MIN === 1 && settings.MAX === 20) { + scoreFilter.remove(button); + } + return scoreFilter; } @@ -26,11 +41,15 @@ function RangeSelect() { const inputMin = document.createElement('input'); inputMin.type = 'number'; + inputMin.min = 0; + inputMin.max = 20; const labelMax = document.createElement('p'); labelMax.innerHTML = 'Max'; const inputMax = document.createElement('input'); inputMax.type = 'number'; + inputMax.min = 0; + inputMax.max = 20; range.append(label, labelMin, inputMin, labelMax, inputMax); @@ -39,21 +58,16 @@ function RangeSelect() { function Dropdown(className, dropdownLabel, option1, option2) { const dropdown = document.createElement('div'); + dropdown.classList.add('custom-select'); dropdown.classList.add(className); - const label = document.createElement('label'); - label.innerHTML = `Sort by ${dropdownLabel}`; - label.setAttribute('for', 'settings'); - - dropdown.appendChild(label); - const select = document.createElement('select'); select.setAttribute('name', 'settings'); select.setAttribute('id', 'settings'); const defaultSetting = document.createElement('option'); - defaultSetting.setAttribute('value', 'all'); - defaultSetting.innerHTML = 'all'; + defaultSetting.setAttribute('value', 'default'); + defaultSetting.innerHTML = `Select ${dropdownLabel}`; const option1Setting = document.createElement('option'); option1Setting.setAttribute('value', `${option2}`); @@ -69,3 +83,16 @@ function Dropdown(className, dropdownLabel, option1, option2) { return dropdown; } + +function ClearButton() { + const button = document.createElement('button'); + button.innerHTML = 'clear filters'; + button.addEventListener('click', () => { + settings.ABOUT = 'default'; + settings.TYPE = 'default'; + settings.MIN = 1; + settings.MAX = 20; + }); + + return button; +} diff --git a/src/views/Leaderboard/Leaderboard.js b/src/views/Leaderboard/Leaderboard.js index 25fb75b..4fcc62f 100644 --- a/src/views/Leaderboard/Leaderboard.js +++ b/src/views/Leaderboard/Leaderboard.js @@ -59,6 +59,8 @@ function renderPodium() { function getScoreFromLocalStorage() { const highScores = JSON.parse(localStorage.getItem('quizScores')) || []; highScores.sort((a, b) => b.score - a.score); + highScores.filter(filterHighScores); + console.log(highScores); function showScore() { nick1.innerText = `pts: ${Object.values(highScores[0])}`; nick2.innerText = `pts: ${Object.values(highScores[1])}`; @@ -84,3 +86,7 @@ function renderMenuBtn() { function onNavigationChange(e) { window.location.hash = e.target.className; } + +function filterHighScores(item, about) { + return item.ABOUT === about; +} From d03c1a7c161ad1fbe93486fff6dc1a7c41125146 Mon Sep 17 00:00:00 2001 From: Urszuja Date: Sun, 2 Jan 2022 21:00:03 +0100 Subject: [PATCH 06/12] add fixed filter function --- src/components/ScoreFilter/ScoreFilter.js | 11 ++++++----- src/views/Leaderboard/Leaderboard.js | 9 +++++++-- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/components/ScoreFilter/ScoreFilter.js b/src/components/ScoreFilter/ScoreFilter.js index 7efaf52..053fb72 100644 --- a/src/components/ScoreFilter/ScoreFilter.js +++ b/src/components/ScoreFilter/ScoreFilter.js @@ -1,6 +1,6 @@ import './ScoreFilter.css'; -const settings = { +export const settings = { ABOUT: 'default', TYPE: 'default', MIN: 1, @@ -11,27 +11,27 @@ export default function ScoreFilter() { const scoreFilter = document.createElement('div'); scoreFilter.classList.add('score-filter'); + const button = ClearButton(); + const dropdownAbout = Dropdown('about-dropdown', 'animal', 'cat', 'dog'); const dropdownType = Dropdown('type-dropdown', 'quiz type', 'multiple choice', 'open'); scoreFilter.append(dropdownAbout, dropdownType); dropdownAbout.addEventListener('change', (e) => { settings.ABOUT = e.target.value; + scoreFilter.append(button); console.log(settings.ABOUT); }); dropdownType.addEventListener('change', (e) => { settings.TYPE = e.target.value; + scoreFilter.append(button); console.log(settings.TYPE); }); const questionRange = RangeSelect(); scoreFilter.appendChild(questionRange); - const button = ClearButton(); - if (settings.ABOUT !== 'default' || settings.TYPE !== 'default' || settings.MIN !== 1 || settings.MAX !== 20) { scoreFilter.append(button); - } else if (settings.ABOUT === 'default' && settings.TYPE === 'default' && settings.MIN === 1 && settings.MAX === 20) { - scoreFilter.remove(button); } return scoreFilter; @@ -115,6 +115,7 @@ function ClearButton() { settings.TYPE = 'default'; settings.MIN = 1; settings.MAX = 20; + button.remove(); }); return button; diff --git a/src/views/Leaderboard/Leaderboard.js b/src/views/Leaderboard/Leaderboard.js index bef656b..6f69900 100644 --- a/src/views/Leaderboard/Leaderboard.js +++ b/src/views/Leaderboard/Leaderboard.js @@ -60,8 +60,10 @@ function renderPodium() { } function getScoreFromLocalStorage() { - const highScores = JSON.parse(localStorage.getItem('quizScores')) || []; - highScores.sort((a, b) => b.SCORE - a.SCORE); + const scores = JSON.parse(localStorage.getItem('quizScores')) || []; + scores.sort((a, b) => b.SCORE - a.SCORE); + console.log(scores); + const highScores = scores.filter((score) => filterHighScores(score, 'CATS')); function showScore() { nick1.innerText = `${highScores[0].NAME} Pts:${highScores[0].SCORE}`; nick2.innerText = `${highScores[1].NAME} Pts:${highScores[1].SCORE}`; @@ -96,5 +98,8 @@ function renderResetBtn() { } function filterHighScores(item, about) { + if (about === 'default') { + return item; + } return item.ABOUT === about; } From 5e153b246137fc41b824282da670dba4e52f9662 Mon Sep 17 00:00:00 2001 From: Urszuja Date: Sun, 2 Jan 2022 21:07:40 +0100 Subject: [PATCH 07/12] small cleanup --- src/components/ScoreFilter/ScoreFilter.js | 4 ---- src/views/Leaderboard/Leaderboard.js | 11 ++++++++++- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/components/ScoreFilter/ScoreFilter.js b/src/components/ScoreFilter/ScoreFilter.js index 053fb72..9e97cbb 100644 --- a/src/components/ScoreFilter/ScoreFilter.js +++ b/src/components/ScoreFilter/ScoreFilter.js @@ -20,12 +20,10 @@ export default function ScoreFilter() { dropdownAbout.addEventListener('change', (e) => { settings.ABOUT = e.target.value; scoreFilter.append(button); - console.log(settings.ABOUT); }); dropdownType.addEventListener('change', (e) => { settings.TYPE = e.target.value; scoreFilter.append(button); - console.log(settings.TYPE); }); const questionRange = RangeSelect(); scoreFilter.appendChild(questionRange); @@ -61,7 +59,6 @@ function RangeSelect() { inputMin.addEventListener('change', (e) => { settings.MIN = e.target.value; - console.log(settings.MIN); if (settings.MAX < settings.MIN) { settings.MAX = settings.MIN; } @@ -69,7 +66,6 @@ function RangeSelect() { inputMax.addEventListener('change', (e) => { settings.MAX = e.target.value; - console.log(settings.MAX); if (settings.MIN > settings.MAX) { settings.MIN = settings.MAX; } diff --git a/src/views/Leaderboard/Leaderboard.js b/src/views/Leaderboard/Leaderboard.js index 6f69900..27825f5 100644 --- a/src/views/Leaderboard/Leaderboard.js +++ b/src/views/Leaderboard/Leaderboard.js @@ -12,6 +12,16 @@ export function renderLeaderboard() { getScoreFromLocalStorage(); } +let nick1; +let nick2; +let nick3; +let nick4; +let nick5; +let nick6; +let nick7; +let nick8; +let nick9; + function renderPodium() { document.querySelector('#app').innerHTML = ` @@ -62,7 +72,6 @@ function renderPodium() { function getScoreFromLocalStorage() { const scores = JSON.parse(localStorage.getItem('quizScores')) || []; scores.sort((a, b) => b.SCORE - a.SCORE); - console.log(scores); const highScores = scores.filter((score) => filterHighScores(score, 'CATS')); function showScore() { nick1.innerText = `${highScores[0].NAME} Pts:${highScores[0].SCORE}`; From 7987a16f7b875f422db3268452aedd1da7e7a737 Mon Sep 17 00:00:00 2001 From: Urszuja Date: Mon, 3 Jan 2022 19:13:51 +0100 Subject: [PATCH 08/12] dropdowns upgrade --- src/components/ScoreFilter/ScoreFilter.css | 22 +++++ src/components/ScoreFilter/ScoreFilter.js | 103 +++++++++++++-------- src/model/getScoreFromLocalStorage.js | 13 +++ src/model/randomizer.js | 5 +- src/views/Leaderboard/Leaderboard.js | 19 +++- src/views/quiz-settings/quiz-settings.js | 11 ++- 6 files changed, 125 insertions(+), 48 deletions(-) create mode 100644 src/model/getScoreFromLocalStorage.js diff --git a/src/components/ScoreFilter/ScoreFilter.css b/src/components/ScoreFilter/ScoreFilter.css index 41a0d86..55732e3 100644 --- a/src/components/ScoreFilter/ScoreFilter.css +++ b/src/components/ScoreFilter/ScoreFilter.css @@ -13,3 +13,25 @@ input { height: 5vh; width: 5vw; } +select { + -webkit-appearance: button; + -moz-appearance: button; + -webkit-user-select: none; + -moz-user-select: none; + -webkit-padding-end: 20px; + -moz-padding-end: 20px; + -webkit-padding-start: 2px; + -moz-padding-start: 2px; + background-color: #648080; /* Fallback color if gradients are not supported */ + border: 1px solid #aaa; + border-radius: 10px; + box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); + color: #2c3e50; + font-size: inherit; + margin: 0; + overflow: hidden; + padding-top: 2px; + padding-bottom: 2px; + text-overflow: ellipsis; + white-space: nowrap; +} diff --git a/src/components/ScoreFilter/ScoreFilter.js b/src/components/ScoreFilter/ScoreFilter.js index 9e97cbb..ceff684 100644 --- a/src/components/ScoreFilter/ScoreFilter.js +++ b/src/components/ScoreFilter/ScoreFilter.js @@ -13,20 +13,38 @@ export default function ScoreFilter() { const button = ClearButton(); - const dropdownAbout = Dropdown('about-dropdown', 'animal', 'cat', 'dog'); + const dropdownAbout = Dropdown('about-dropdown', 'animal', 'cats', 'dogs'); const dropdownType = Dropdown('type-dropdown', 'quiz type', 'multiple choice', 'open'); scoreFilter.append(dropdownAbout, dropdownType); dropdownAbout.addEventListener('change', (e) => { - settings.ABOUT = e.target.value; + settings.ABOUT = e.target.value.toUpperCase(); + // new settings + filterScores(); scoreFilter.append(button); }); dropdownType.addEventListener('change', (e) => { - settings.TYPE = e.target.value; + settings.TYPE = e.target.value.toUpperCase(); + filterScores(); + scoreFilter.append(button); + }); + + const minRange = RangeSelect('min'); + const maxRange = RangeSelect('max'); + + scoreFilter.append(minRange, maxRange); + + minRange.addEventListener('change', (e) => { + settings.MIN = e.target.value; + console.log('changing min', settings); + scoreFilter.append(button); + }); + + maxRange.addEventListener('change', (e) => { + settings.MAX = e.target.value; + console.log('changing max', settings); scoreFilter.append(button); }); - const questionRange = RangeSelect(); - scoreFilter.appendChild(questionRange); if (settings.ABOUT !== 'default' || settings.TYPE !== 'default' || settings.MIN !== 1 || settings.MAX !== 20) { scoreFilter.append(button); @@ -35,43 +53,17 @@ export default function ScoreFilter() { return scoreFilter; } -function RangeSelect() { +function RangeSelect(labelName) { const range = document.createElement('div'); - range.classList.add('score-range'); - - const label = document.createElement('label'); - label.innerHTML = 'Question number range'; - - const labelMin = document.createElement('p'); - labelMin.innerHTML = 'Min'; + const label = document.createElement('p'); + label.innerHTML = labelName; - const inputMin = document.createElement('input'); - inputMin.type = 'number'; - inputMin.min = 0; - inputMin.max = 20; + const input = document.createElement('input'); + input.type = 'number'; + input.min = 0; + input.max = 20; - const labelMax = document.createElement('p'); - labelMax.innerHTML = 'Max'; - const inputMax = document.createElement('input'); - inputMax.type = 'number'; - inputMax.min = 0; - inputMax.max = 20; - - inputMin.addEventListener('change', (e) => { - settings.MIN = e.target.value; - if (settings.MAX < settings.MIN) { - settings.MAX = settings.MIN; - } - }); - - inputMax.addEventListener('change', (e) => { - settings.MAX = e.target.value; - if (settings.MIN > settings.MAX) { - settings.MIN = settings.MAX; - } - }); - - range.append(label, labelMin, inputMin, labelMax, inputMax); + range.append(label, input); return range; } @@ -111,8 +103,41 @@ function ClearButton() { settings.TYPE = 'default'; settings.MIN = 1; settings.MAX = 20; + + const dropdowns = document.querySelectorAll('select'); + // eslint-disable-next-line no-return-assign + dropdowns.forEach((select) => (select.selectedIndex = 0)); + button.remove(); }); return button; } + +function filterScores() { + const scores = getScoreFromLocalStorage(); + const filteredScores = scores.filter(filterAbout).filter(filterType); + console.log(scores); + console.log(filteredScores); + return filteredScores; +} + +function filterAbout(item) { + if (settings.ABOUT === 'default') { + return item; + } + return item.ABOUT === settings.ABOUT; +} + +function filterType(item) { + if (settings.TYPE === 'default') { + return item; + } + return item.TYPE === settings.TYPE; +} + +function getScoreFromLocalStorage() { + const scores = JSON.parse(localStorage.getItem('quizScores')) || []; + scores.sort((a, b) => b.SCORE - a.SCORE); + return scores; +} diff --git a/src/model/getScoreFromLocalStorage.js b/src/model/getScoreFromLocalStorage.js new file mode 100644 index 0000000..64fc0d0 --- /dev/null +++ b/src/model/getScoreFromLocalStorage.js @@ -0,0 +1,13 @@ +export default function getScoreFromLocalStorage() { + const scores = JSON.parse(localStorage.getItem('quizScores')) || []; + scores.sort((a, b) => b.SCORE - a.SCORE); + return scores; +} + +/* function filterHighScores(item, about) { + if (about === 'default') { + return item; + } + return item.ABOUT === about; +} +*/ diff --git a/src/model/randomizer.js b/src/model/randomizer.js index ef86aa0..7eecb71 100644 --- a/src/model/randomizer.js +++ b/src/model/randomizer.js @@ -1,4 +1,4 @@ -import { getQuizQuestions } from '../api/getQuizQuestions.js'; +import { getQuizQuestions } from '../api/getQuizQuestions'; export async function getRandomQuizQuestions(animal, numberOfQuestions) { const questionToRandomize = await getQuizQuestions(animal); @@ -6,7 +6,6 @@ export async function getRandomQuizQuestions(animal, numberOfQuestions) { if (numberOfQuestions < randomQuestions.length) { return randomQuestions.slice(0, numberOfQuestions); - } else { - return randomQuestions; } + return randomQuestions; } diff --git a/src/views/Leaderboard/Leaderboard.js b/src/views/Leaderboard/Leaderboard.js index 27825f5..2dccfe3 100644 --- a/src/views/Leaderboard/Leaderboard.js +++ b/src/views/Leaderboard/Leaderboard.js @@ -9,7 +9,7 @@ export function renderLeaderboard() { renderPodium(); createMenuButton(); renderResetBtn(); - getScoreFromLocalStorage(); + renderScores(); } let nick1; @@ -69,10 +69,11 @@ function renderPodium() { filter.append(scorefilter); } -function getScoreFromLocalStorage() { - const scores = JSON.parse(localStorage.getItem('quizScores')) || []; +function renderScores() { + /* const scores = JSON.parse(localStorage.getItem('quizScores')) || []; scores.sort((a, b) => b.SCORE - a.SCORE); - const highScores = scores.filter((score) => filterHighScores(score, 'CATS')); + const highScores = scores.filter((score) => filterHighScores(score, 'CATS')); */ + const highScores = getScoreFromLocalStorage(); function showScore() { nick1.innerText = `${highScores[0].NAME} Pts:${highScores[0].SCORE}`; nick2.innerText = `${highScores[1].NAME} Pts:${highScores[1].SCORE}`; @@ -106,9 +107,19 @@ function renderResetBtn() { resetButton.append(Button('RESET SCORE', 'resetButton', false, 'click', resetLocalStorage)); } +function getScoreFromLocalStorage() { + const scores = JSON.parse(localStorage.getItem('quizScores')) || []; + scores.sort((a, b) => b.SCORE - a.SCORE); + return scores; +} + +/* + function filterHighScores(item, about) { if (about === 'default') { return item; } return item.ABOUT === about; } + +*/ diff --git a/src/views/quiz-settings/quiz-settings.js b/src/views/quiz-settings/quiz-settings.js index c1a449d..dd4639c 100644 --- a/src/views/quiz-settings/quiz-settings.js +++ b/src/views/quiz-settings/quiz-settings.js @@ -4,7 +4,9 @@ import Button from '../../components/Button/Button'; class QuizSettings { quizAbout; + questionsNum; + questionsType; static createRadioButton(value, settingName) { @@ -32,7 +34,7 @@ class QuizSettings { this.questionsType = value; } if (settingName === 'questionsNum') { - this.questionsNum = parseInt(component.value); + this.questionsNum = parseInt(component.value, 10); } }); } @@ -79,6 +81,7 @@ class QuizSettings { buttonStartQuiz.value = 'START QUIZ'; return buttonStartQuiz; } + static navigateToMenu() { window.location.hash = ''; } @@ -100,7 +103,7 @@ class QuizSettings { ); form.addEventListener('submit', (e) => { e.preventDefault(); - if (this.questionsNum === undefined || this.questionsNum < 1 || this.questionsNum > 20) { + if (validateQuestionNumber(this.questionsNum)) { alert('Insert questions number between 1 and 20'); } else if (this.quizAbout === undefined) { alert('Choose animals'); @@ -129,3 +132,7 @@ export { QuizSettings }; export function renderQuizSettings() { QuizSettings.showSettings(); } + +function validateQuestionNumber(questionsNum) { + return !Number.isInteger(questionsNum) || questionsNum < 1 || questionsNum > 20; +} From c1d57662200c9cd7be849d1f2cb65b4af647e2bc Mon Sep 17 00:00:00 2001 From: Urszuja Date: Mon, 3 Jan 2022 21:16:09 +0100 Subject: [PATCH 09/12] basic functions working, add DropDown & RangeSelect componend --- .../ScoreFilter.css => Dropdown/Dropdown.css} | 0 src/components/Dropdown/Dropdown.js | 28 ++++ src/components/RangeSelect/RangeSelect.css | 0 src/components/RangeSelect/RangeSelect.js | 18 +++ src/components/ScoreFilter/ScoreFilter.js | 143 ------------------ src/model/ScoreFilter.js | 136 +++++++++++++++++ src/model/getScoreFromLocalStorage.js | 13 -- src/views/Leaderboard/Leaderboard.css | 4 +- src/views/Leaderboard/Leaderboard.js | 66 +++----- src/views/ScorePage/ScorePage.css | 14 +- src/views/ScorePage/ScorePage.js | 30 ++-- 11 files changed, 226 insertions(+), 226 deletions(-) rename src/components/{ScoreFilter/ScoreFilter.css => Dropdown/Dropdown.css} (100%) create mode 100644 src/components/Dropdown/Dropdown.js create mode 100644 src/components/RangeSelect/RangeSelect.css create mode 100644 src/components/RangeSelect/RangeSelect.js delete mode 100644 src/components/ScoreFilter/ScoreFilter.js create mode 100644 src/model/ScoreFilter.js delete mode 100644 src/model/getScoreFromLocalStorage.js diff --git a/src/components/ScoreFilter/ScoreFilter.css b/src/components/Dropdown/Dropdown.css similarity index 100% rename from src/components/ScoreFilter/ScoreFilter.css rename to src/components/Dropdown/Dropdown.css diff --git a/src/components/Dropdown/Dropdown.js b/src/components/Dropdown/Dropdown.js new file mode 100644 index 0000000..3d7c7c2 --- /dev/null +++ b/src/components/Dropdown/Dropdown.js @@ -0,0 +1,28 @@ +import './Dropdown.css'; + +export default function Dropdown(className, dropdownLabel, option1, option2) { + const dropdown = document.createElement('div'); + dropdown.classList.add('custom-select'); + dropdown.classList.add(className); + + const select = document.createElement('select'); + select.setAttribute('name', 'settings'); + select.setAttribute('id', 'settings'); + + const defaultSetting = document.createElement('option'); + defaultSetting.setAttribute('value', dropdownLabel); + defaultSetting.innerHTML = dropdownLabel; + + const option1Setting = document.createElement('option'); + option1Setting.setAttribute('value', `${option1}`); + option1Setting.innerHTML = option1.toLowerCase(); + + const option2Setting = document.createElement('option'); + option2Setting.setAttribute('value', `${option2}`); + option2Setting.innerHTML = option2.toLowerCase(); + + select.append(defaultSetting, option1Setting, option2Setting); + dropdown.append(select); + + return dropdown; +} diff --git a/src/components/RangeSelect/RangeSelect.css b/src/components/RangeSelect/RangeSelect.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/RangeSelect/RangeSelect.js b/src/components/RangeSelect/RangeSelect.js new file mode 100644 index 0000000..2ec4bc1 --- /dev/null +++ b/src/components/RangeSelect/RangeSelect.js @@ -0,0 +1,18 @@ +import './RangeSelect.css'; +import { DEFAULT_MIN, DEFAULT_MAX } from '../../model/ScoreFilter'; + +export default function RangeSelect(labelName) { + const range = document.createElement('div'); + const label = document.createElement('p'); + label.innerHTML = labelName; + + const input = document.createElement('input'); + input.className = labelName; + input.type = 'number'; + input.min = DEFAULT_MIN; + input.max = DEFAULT_MAX; + + range.append(label, input); + + return range; +} diff --git a/src/components/ScoreFilter/ScoreFilter.js b/src/components/ScoreFilter/ScoreFilter.js deleted file mode 100644 index ceff684..0000000 --- a/src/components/ScoreFilter/ScoreFilter.js +++ /dev/null @@ -1,143 +0,0 @@ -import './ScoreFilter.css'; - -export const settings = { - ABOUT: 'default', - TYPE: 'default', - MIN: 1, - MAX: 20, -}; - -export default function ScoreFilter() { - const scoreFilter = document.createElement('div'); - scoreFilter.classList.add('score-filter'); - - const button = ClearButton(); - - const dropdownAbout = Dropdown('about-dropdown', 'animal', 'cats', 'dogs'); - const dropdownType = Dropdown('type-dropdown', 'quiz type', 'multiple choice', 'open'); - scoreFilter.append(dropdownAbout, dropdownType); - - dropdownAbout.addEventListener('change', (e) => { - settings.ABOUT = e.target.value.toUpperCase(); - // new settings - filterScores(); - scoreFilter.append(button); - }); - dropdownType.addEventListener('change', (e) => { - settings.TYPE = e.target.value.toUpperCase(); - filterScores(); - scoreFilter.append(button); - }); - - const minRange = RangeSelect('min'); - const maxRange = RangeSelect('max'); - - scoreFilter.append(minRange, maxRange); - - minRange.addEventListener('change', (e) => { - settings.MIN = e.target.value; - console.log('changing min', settings); - scoreFilter.append(button); - }); - - maxRange.addEventListener('change', (e) => { - settings.MAX = e.target.value; - console.log('changing max', settings); - scoreFilter.append(button); - }); - - if (settings.ABOUT !== 'default' || settings.TYPE !== 'default' || settings.MIN !== 1 || settings.MAX !== 20) { - scoreFilter.append(button); - } - - return scoreFilter; -} - -function RangeSelect(labelName) { - const range = document.createElement('div'); - const label = document.createElement('p'); - label.innerHTML = labelName; - - const input = document.createElement('input'); - input.type = 'number'; - input.min = 0; - input.max = 20; - - range.append(label, input); - - return range; -} - -function Dropdown(className, dropdownLabel, option1, option2) { - const dropdown = document.createElement('div'); - dropdown.classList.add('custom-select'); - dropdown.classList.add(className); - - const select = document.createElement('select'); - select.setAttribute('name', 'settings'); - select.setAttribute('id', 'settings'); - - const defaultSetting = document.createElement('option'); - defaultSetting.setAttribute('value', 'default'); - defaultSetting.innerHTML = `Select ${dropdownLabel}`; - - const option1Setting = document.createElement('option'); - option1Setting.setAttribute('value', `${option1}`); - option1Setting.innerHTML = option1; - - const option2Setting = document.createElement('option'); - option2Setting.setAttribute('value', `${option2}`); - option2Setting.innerHTML = option2; - - select.append(defaultSetting, option1Setting, option2Setting); - dropdown.append(select); - - return dropdown; -} - -function ClearButton() { - const button = document.createElement('button'); - button.innerHTML = 'clear filters'; - button.addEventListener('click', () => { - settings.ABOUT = 'default'; - settings.TYPE = 'default'; - settings.MIN = 1; - settings.MAX = 20; - - const dropdowns = document.querySelectorAll('select'); - // eslint-disable-next-line no-return-assign - dropdowns.forEach((select) => (select.selectedIndex = 0)); - - button.remove(); - }); - - return button; -} - -function filterScores() { - const scores = getScoreFromLocalStorage(); - const filteredScores = scores.filter(filterAbout).filter(filterType); - console.log(scores); - console.log(filteredScores); - return filteredScores; -} - -function filterAbout(item) { - if (settings.ABOUT === 'default') { - return item; - } - return item.ABOUT === settings.ABOUT; -} - -function filterType(item) { - if (settings.TYPE === 'default') { - return item; - } - return item.TYPE === settings.TYPE; -} - -function getScoreFromLocalStorage() { - const scores = JSON.parse(localStorage.getItem('quizScores')) || []; - scores.sort((a, b) => b.SCORE - a.SCORE); - return scores; -} diff --git a/src/model/ScoreFilter.js b/src/model/ScoreFilter.js new file mode 100644 index 0000000..be79947 --- /dev/null +++ b/src/model/ScoreFilter.js @@ -0,0 +1,136 @@ +import Dropdown from '../components/Dropdown/Dropdown'; +import RangeSelect from '../components/RangeSelect/RangeSelect'; +import { getScoreFromLocalStorage, renderScores } from '../views/Leaderboard/Leaderboard'; + +const DEFAULT_ABOUT = 'Select animal'; +const DEFAULT_TYPE = 'Select quiz type'; +export const DEFAULT_MIN = 1; +export const DEFAULT_MAX = 20; + +export const settings = { + about: DEFAULT_ABOUT, + type: DEFAULT_TYPE, + min: DEFAULT_MIN, + max: DEFAULT_MAX, +}; + +export default function ScoreFilter() { + const scoreFilter = document.createElement('div'); + scoreFilter.classList.add('score-filter'); + + const button = ClearButton(); + + const dropdownAbout = Dropdown('about-dropdown', DEFAULT_ABOUT, 'CATS', 'DOGS'); + const dropdownType = Dropdown('type-dropdown', DEFAULT_TYPE, 'MULTIPLE CHOICE', 'OPEN'); + scoreFilter.append(dropdownAbout, dropdownType); + + dropdownAbout.addEventListener('change', (e) => { + settings.about = e.target.value; + filterScores(); + scoreFilter.append(button); + }); + dropdownType.addEventListener('change', (e) => { + settings.type = e.target.value; + filterScores(); + scoreFilter.append(button); + }); + + const minRange = RangeSelect('min'); + const maxRange = RangeSelect('max'); + + scoreFilter.append(minRange, maxRange); + + minRange.addEventListener('change', (e) => { + settings.min = e.target.value; + filterScores(); + scoreFilter.append(button); + }); + + maxRange.addEventListener('change', (e) => { + settings.max = e.target.value; + filterScores(); + scoreFilter.append(button); + }); + + if (settings.about !== DEFAULT_ABOUT || settings.type !== DEFAULT_TYPE || settings.min !== 1 || settings.max !== 20) { + scoreFilter.append(button); + } + + return scoreFilter; +} + +// TODO: use Button component instead +function ClearButton() { + const button = document.createElement('button'); + button.innerHTML = 'clear filters'; + button.addEventListener('click', () => { + settings.about = DEFAULT_ABOUT; + settings.type = DEFAULT_TYPE; + settings.min = DEFAULT_MIN; + settings.max = DEFAULT_MAX; + filterScores(); + + const dropdowns = document.querySelectorAll('select'); + dropdowns.forEach((select) => { + select.selectedIndex = 0; + }); + + const minRange = document.querySelector('.min'); + minRange.value = DEFAULT_MIN; + + const maxRange = document.querySelector('.max'); + maxRange.value = DEFAULT_MAX; + + button.remove(); + }); + + return button; +} +/* +function resetSettings() { + settings.about = DEFAULT_ABOUT; + settings.type = DEFAULT_TYPE; + settings.min = DEFAULT_MIN; + settings.max = DEFAULT_MAX; + filterScores(); + + const dropdowns = document.querySelectorAll('select'); + dropdowns.forEach((select) => { + select.selectedIndex = 0; + }); + + const minRange = document.querySelector('.min'); + minRange.value = DEFAULT_MIN; + + const maxRange = document.querySelector('.max'); + maxRange.value = DEFAULT_MAX; + + button.remove(); +} */ + +function filterScores() { + const scores = getScoreFromLocalStorage(); + const filteredScores = scores.filter(filterAbout).filter(filterType).filter(filterQuestionNumber); + renderScores(filteredScores); +} + +function filterAbout(item) { + if (settings.about === DEFAULT_ABOUT) { + return item; + } + return item.ABOUT === settings.about; +} + +function filterType(item) { + if (settings.type === DEFAULT_TYPE) { + return item; + } + return item.TYPE === settings.type; +} + +function filterQuestionNumber(item) { + if (item.NUMBER >= settings.min && item.NUMBER <= settings.max) { + return item; + } + return false; +} diff --git a/src/model/getScoreFromLocalStorage.js b/src/model/getScoreFromLocalStorage.js deleted file mode 100644 index 64fc0d0..0000000 --- a/src/model/getScoreFromLocalStorage.js +++ /dev/null @@ -1,13 +0,0 @@ -export default function getScoreFromLocalStorage() { - const scores = JSON.parse(localStorage.getItem('quizScores')) || []; - scores.sort((a, b) => b.SCORE - a.SCORE); - return scores; -} - -/* function filterHighScores(item, about) { - if (about === 'default') { - return item; - } - return item.ABOUT === about; -} -*/ diff --git a/src/views/Leaderboard/Leaderboard.css b/src/views/Leaderboard/Leaderboard.css index 716313b..62e4979 100644 --- a/src/views/Leaderboard/Leaderboard.css +++ b/src/views/Leaderboard/Leaderboard.css @@ -23,7 +23,7 @@ div#scorePage > * { justify-content: center; } -.podiumNick { +.podiumNickname { margin-top: 30px; margin-left: 15px; display: flex; @@ -94,7 +94,7 @@ button.resetButton { } @media (max-width: 960px) { - .podiumNick { + .podiumNickname { font-size: 1rem; } .listItem { diff --git a/src/views/Leaderboard/Leaderboard.js b/src/views/Leaderboard/Leaderboard.js index 48e6d44..a1dea8e 100644 --- a/src/views/Leaderboard/Leaderboard.js +++ b/src/views/Leaderboard/Leaderboard.js @@ -2,25 +2,15 @@ import './Leaderboard.css'; import Button from '../../components/Button/Button'; import '../../components/Button/Button.css'; -import ScoreFilter from '../../components/ScoreFilter/ScoreFilter'; +import ScoreFilter from '../../model/ScoreFilter'; export function renderLeaderboard() { renderPodium(); createMenuButton(); renderResetBtn(); - renderScores(); + renderScores(getScoreFromLocalStorage()); } -let nick1; -let nick2; -let nick3; -let nick4; -let nick5; -let nick6; -let nick7; -let nick8; -let nick9; - function renderPodium() { document.querySelector('#app').innerHTML = ` @@ -31,9 +21,9 @@ function renderPodium() {
- - - + + + @@ -45,15 +35,15 @@ function renderPodium() {
    -

    2. -

    3. -

    4. +

    5. +

    6. +

    -

    2. -

    3. -

    4. +

    5. +

    6. +

2