From d94c812cc8dc8b0992eea80f1c80164b05899d32 Mon Sep 17 00:00:00 2001 From: NataliaCichonska Date: Fri, 3 Dec 2021 19:04:43 +0100 Subject: [PATCH 1/5] built layout of quiz settings page --- src/main.js | 6 +-- src/views/quiz-settings/quiz-settings.css | 0 src/views/quiz-settings/quiz-settings.js | 50 +++++++++++++++++++++++ 3 files changed, 53 insertions(+), 3 deletions(-) create mode 100644 src/views/quiz-settings/quiz-settings.css create mode 100644 src/views/quiz-settings/quiz-settings.js diff --git a/src/main.js b/src/main.js index 0de0ebc..d72906a 100644 --- a/src/main.js +++ b/src/main.js @@ -1,5 +1,5 @@ import './style.css'; +import {QuizSettings} from "./views/quiz-settings/quiz-settings"; -document.querySelector('#app').innerHTML = ` -

CC first project

-`; + +document.querySelector('#app').innerHTML = QuizSettings.showSettings(); diff --git a/src/views/quiz-settings/quiz-settings.css b/src/views/quiz-settings/quiz-settings.css new file mode 100644 index 0000000..e69de29 diff --git a/src/views/quiz-settings/quiz-settings.js b/src/views/quiz-settings/quiz-settings.js new file mode 100644 index 0000000..5c4fc3b --- /dev/null +++ b/src/views/quiz-settings/quiz-settings.js @@ -0,0 +1,50 @@ +class QuizSettings{ + quizAbout; + questionsNumber; + questionsType; + + static showSettings(){ + const settings =document.createElement("div"); + const form=document.createElement("form"); + const about=document.createElement("div"); + const questionsNumberdiv=document.createElement("div"); + const questionsType=document.createElement("div"); + + const buttonCats=document.createElement("input"); + buttonCats.type="button"; + const buttonDogs=document.createElement("input"); + buttonDogs.type="button"; + about.append("Quiz about:",buttonCats,buttonDogs); + // buttonCats.addEventListener("click",function(){ + // console.log("dotknięty"); + // }); + + const QuestionsNumber=document.createElement("input"); + questionsNumberdiv.append("Questions number:",QuestionsNumber); + + const buttonOpen=document.createElement("input"); + buttonOpen.type="button"; + const buttonMultipleChoice=document.createElement("input"); + buttonMultipleChoice.type="button"; + questionsType.append("Questions type:",buttonOpen,buttonMultipleChoice); + + const buttonStartQuiz=document.createElement("input"); + buttonStartQuiz.type="submit"; + + form.append(about,questionsNumberdiv,questionsType, buttonStartQuiz); + settings.appendChild(form); + + console.log(this.quizAbout,this.questionsType,this.questionsNumber); + + + form.addEventListener("click",function(){ + console.log("dotknięty"); + }); + + return settings.innerHTML; + } +}; + + + +export {QuizSettings}; \ No newline at end of file From dd1be63010c0e7c81ba239af8905ff2350668f1d Mon Sep 17 00:00:00 2001 From: NataliaCichonska Date: Sat, 4 Dec 2021 12:03:49 +0100 Subject: [PATCH 2/5] adden some kind of data validation with alerts and prestyled --- src/main.js | 3 +- src/style.css | 3 + src/views/quiz-settings/quiz-settings.css | 51 ++++++++ src/views/quiz-settings/quiz-settings.js | 152 ++++++++++++++++------ 4 files changed, 167 insertions(+), 42 deletions(-) diff --git a/src/main.js b/src/main.js index d72906a..5340bfa 100644 --- a/src/main.js +++ b/src/main.js @@ -1,5 +1,6 @@ import './style.css'; +import './views/quiz-settings/quiz-settings.css'; import {QuizSettings} from "./views/quiz-settings/quiz-settings"; -document.querySelector('#app').innerHTML = QuizSettings.showSettings(); +document.querySelector('#app').appendChild(QuizSettings.showSettings()); diff --git a/src/style.css b/src/style.css index 852de7a..a2df3c5 100644 --- a/src/style.css +++ b/src/style.css @@ -1,3 +1,6 @@ +body { + background-color: #8ab0ab; +} #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; diff --git a/src/views/quiz-settings/quiz-settings.css b/src/views/quiz-settings/quiz-settings.css index e69de29..808b472 100644 --- a/src/views/quiz-settings/quiz-settings.css +++ b/src/views/quiz-settings/quiz-settings.css @@ -0,0 +1,51 @@ +form { + margin:auto; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + gap:30px; + width:70%; + color:white; +} + +form div{ + width:100%; + max-width: 450px; + display: grid; + grid-template-columns:[first] 1fr [second] 1fr [third]; + align-items: center; + justify-items: center; + align-content: center; + gap:20px; +} +input{ + border: 0px ; + border-radius: 7px; + width:100%; + max-width: 450px; + background-color: #658080; + height:50px +} + +input:active{ + background-color: #3e505b; +} + +form p{ + grid-column-start: first; + grid-column-end: third; +} +#number{ + width:100%; + grid-column-start: first; + grid-column-end: third; +} +#number:hover{ + background-color: #3e505b; +} + +#submit{ + margin-top:100px; + color: +} \ No newline at end of file diff --git a/src/views/quiz-settings/quiz-settings.js b/src/views/quiz-settings/quiz-settings.js index 5c4fc3b..af5b6d3 100644 --- a/src/views/quiz-settings/quiz-settings.js +++ b/src/views/quiz-settings/quiz-settings.js @@ -1,50 +1,120 @@ -class QuizSettings{ +class QuizSettings { quizAbout; - questionsNumber; + questionsNum; questionsType; + static createButtonCats() { + const buttonCats = document.createElement('input'); + buttonCats.type = 'button'; + buttonCats.addEventListener('click', () => { + this.quizAbout = 'cats'; + }); + return buttonCats; + } + + static createButtonDogs() { + const buttonDogs = document.createElement('input'); + buttonDogs.type = 'button'; + buttonDogs.addEventListener('click', () => { + this.quizAbout="dogs" + }); + return buttonDogs; + } + + static createAboutSection() { + const about = document.createElement('div'); + const text = document.createElement('p'); + text.innerText='Quiz about: ' + about.append(text, this.createButtonCats(), this.createButtonDogs()); + return about; + } + + static createQuestionsNumberInput() { + const questionsNumber = document.createElement('input'); + questionsNumber.setAttribute('id','number'); + questionsNumber.addEventListener('input', () => { + this.questionsNum=questionsNumber.value; + }); + return questionsNumber; + } + + static createQuestionsNumberSection() { + const questionsNumberdiv = document.createElement('div'); + const text = document.createElement('p'); + text.innerText='Questions number: ' + questionsNumberdiv.append(text, this.createQuestionsNumberInput()); + return questionsNumberdiv; + } - static showSettings(){ - const settings =document.createElement("div"); - const form=document.createElement("form"); - const about=document.createElement("div"); - const questionsNumberdiv=document.createElement("div"); - const questionsType=document.createElement("div"); - - const buttonCats=document.createElement("input"); - buttonCats.type="button"; - const buttonDogs=document.createElement("input"); - buttonDogs.type="button"; - about.append("Quiz about:",buttonCats,buttonDogs); - // buttonCats.addEventListener("click",function(){ - // console.log("dotknięty"); - // }); - - const QuestionsNumber=document.createElement("input"); - questionsNumberdiv.append("Questions number:",QuestionsNumber); - - const buttonOpen=document.createElement("input"); - buttonOpen.type="button"; - const buttonMultipleChoice=document.createElement("input"); - buttonMultipleChoice.type="button"; - questionsType.append("Questions type:",buttonOpen,buttonMultipleChoice); - - const buttonStartQuiz=document.createElement("input"); - buttonStartQuiz.type="submit"; - - form.append(about,questionsNumberdiv,questionsType, buttonStartQuiz); - settings.appendChild(form); - - console.log(this.quizAbout,this.questionsType,this.questionsNumber); - - - form.addEventListener("click",function(){ - console.log("dotknięty"); + static createButtonOpen() { + const buttonOpen = document.createElement('input'); + buttonOpen.type = 'button'; + buttonOpen.addEventListener('click', () => { + this.questionsType="open" }); + return buttonOpen; + } + + static createMultipleChoice() { + const buttonMultipleChoice = document.createElement('input'); + buttonMultipleChoice.type = 'button'; + buttonMultipleChoice.addEventListener('click', () => { + this.questionsType="multiple" + }); + return buttonMultipleChoice; + } + + static createQuestionsTypeSection() { + const questionsType = document.createElement('div'); + const text = document.createElement('p'); + text.innerText='Questions type: ' + questionsType.append(text, this.createButtonOpen(), this.createMultipleChoice()); + return questionsType; + } - return settings.innerHTML; + static createForm() { + const form = document.createElement('form'); + + const buttonStartQuiz = document.createElement('input'); + buttonStartQuiz.type = 'submit'; + buttonStartQuiz.setAttribute('id','submit'); + buttonStartQuiz.value='Start Quiz'; + + form.append( + this.createAboutSection(), + this.createQuestionsNumberSection(), + this.createQuestionsTypeSection(), + buttonStartQuiz, + ); + form.addEventListener("submit", e => { + e.preventDefault(); + if (this.questionsNum===undefined || this.questionsNum<1 || this.questionsNum>20){ + alert("Insert questions number between 1 and 20"); + } + else if (this.quizAbout===undefined){ + alert("Choose animals"); + } + else if (this.quizAbout===undefined){ + alert("Choose questionsType"); + } + else { + alert("Quiz about: "+this.quizAbout+"\nQuestions number: "+this.questionsNum+"\nQuestions type: "+this.questionsType); + } + + }); + return form; } -}; + static showSettings() { + const settings = document.createElement('div'); + settings.appendChild(this.createForm()); + settings.setAttribute('id','quiz-settings'); + + console.log(this.quizAbout, this.questionsType, this.questionsNum); + return settings; + } +} -export {QuizSettings}; \ No newline at end of file +export { + QuizSettings +}; \ No newline at end of file From 2adb62b52c2b96fff92bff90dde571ec8d1ba380 Mon Sep 17 00:00:00 2001 From: NataliaCichonska Date: Mon, 6 Dec 2021 16:38:21 +0100 Subject: [PATCH 3/5] changed buttons to radio buttons, added reusable function for making radio buttons with labels, styled quiz-settiong view --- src/views/quiz-settings/quiz-settings.css | 43 +++++++++++++--- src/views/quiz-settings/quiz-settings.js | 62 ++++++++++------------- 2 files changed, 64 insertions(+), 41 deletions(-) diff --git a/src/views/quiz-settings/quiz-settings.css b/src/views/quiz-settings/quiz-settings.css index 808b472..2f8b79e 100644 --- a/src/views/quiz-settings/quiz-settings.css +++ b/src/views/quiz-settings/quiz-settings.css @@ -5,19 +5,17 @@ form { justify-content: space-around; align-items: center; gap:30px; - width:70%; color:white; } form div{ width:100%; - max-width: 450px; display: grid; grid-template-columns:[first] 1fr [second] 1fr [third]; align-items: center; justify-items: center; align-content: center; - gap:20px; + gap:5%; } input{ border: 0px ; @@ -25,27 +23,58 @@ input{ width:100%; max-width: 450px; background-color: #658080; - height:50px + height:50px; + display:inline-block; + +} +input[type=radio]{ + -webkit-appearance: none; +} + +input[type=radio]:checked{ + background-color: #191f24; } -input:active{ +input[type=radio]:hover{ background-color: #3e505b; } +input[type=submit]:active{ + background-color: #263038; +} + form p{ grid-column-start: first; grid-column-end: third; } #number{ - width:100%; + width:40%; grid-column-start: first; grid-column-end: third; + color:white; + text-align: center; } #number:hover{ background-color: #3e505b; } #submit{ + width:40%; margin-top:100px; - color: + color:white; +} +#submit:hover{ + width:40%; + margin-top:100px; + background-color: #1e272c; +} + +.left{ + position:relative; + left:110%; +} + +.right{ + position:relative; + left:-110%; } \ No newline at end of file diff --git a/src/views/quiz-settings/quiz-settings.js b/src/views/quiz-settings/quiz-settings.js index af5b6d3..67f78b0 100644 --- a/src/views/quiz-settings/quiz-settings.js +++ b/src/views/quiz-settings/quiz-settings.js @@ -2,29 +2,41 @@ class QuizSettings { quizAbout; questionsNum; questionsType; - static createButtonCats() { - const buttonCats = document.createElement('input'); - buttonCats.type = 'button'; - buttonCats.addEventListener('click', () => { - this.quizAbout = 'cats'; - }); - return buttonCats; - } - static createButtonDogs() { - const buttonDogs = document.createElement('input'); - buttonDogs.type = 'button'; - buttonDogs.addEventListener('click', () => { - this.quizAbout="dogs" + static createRadioButton(val,nameOfRadio,what,side){ + const div=document.createElement('div'); + const button = document.createElement('input'); + button.setAttribute('id',val); + button.type='radio'; + button.value=val; + button.name=nameOfRadio; + const label=document.createElement('label'); + label.setAttribute('for',val); + label.setAttribute('class',side); + label.innerText=val; + button.addEventListener('click', () => { + if (what=="about"){ + this.quizAbout=val; + } + if (what=="type"){ + this.questionsType=val; + } + }); - return buttonDogs; + if (side=="left"){ + div.append(label,button); + } + else { + div.append(button,label); + } + return div; } static createAboutSection() { const about = document.createElement('div'); const text = document.createElement('p'); text.innerText='Quiz about: ' - about.append(text, this.createButtonCats(), this.createButtonDogs()); + about.append(text,this.createRadioButton("cats","about","about","left"), this.createRadioButton("dogs","about","about","right")); return about; } @@ -45,29 +57,11 @@ class QuizSettings { return questionsNumberdiv; } - static createButtonOpen() { - const buttonOpen = document.createElement('input'); - buttonOpen.type = 'button'; - buttonOpen.addEventListener('click', () => { - this.questionsType="open" - }); - return buttonOpen; - } - - static createMultipleChoice() { - const buttonMultipleChoice = document.createElement('input'); - buttonMultipleChoice.type = 'button'; - buttonMultipleChoice.addEventListener('click', () => { - this.questionsType="multiple" - }); - return buttonMultipleChoice; - } - static createQuestionsTypeSection() { const questionsType = document.createElement('div'); const text = document.createElement('p'); text.innerText='Questions type: ' - questionsType.append(text, this.createButtonOpen(), this.createMultipleChoice()); + questionsType.append(text, this.createRadioButton("open","type","type","left"), this.createRadioButton("multiple choice","type","type","right")); return questionsType; } From 2518c34054611658ed12d4a769a8d5fc32508cf8 Mon Sep 17 00:00:00 2001 From: NataliaCichonska Date: Mon, 6 Dec 2021 22:55:05 +0100 Subject: [PATCH 4/5] fixer problems --- src/views/quiz-settings/quiz-settings.css | 15 +-- src/views/quiz-settings/quiz-settings.js | 142 +++++++++++++--------- 2 files changed, 95 insertions(+), 62 deletions(-) diff --git a/src/views/quiz-settings/quiz-settings.css b/src/views/quiz-settings/quiz-settings.css index 2f8b79e..086b15e 100644 --- a/src/views/quiz-settings/quiz-settings.css +++ b/src/views/quiz-settings/quiz-settings.css @@ -1,4 +1,5 @@ form { + width:70%; margin:auto; display: flex; flex-direction: column; @@ -27,6 +28,11 @@ input{ display:inline-block; } + +.radioButton{ + display:flex; + flex-direction: column; +} input[type=radio]{ -webkit-appearance: none; } @@ -69,12 +75,7 @@ form p{ background-color: #1e272c; } -.left{ - position:relative; - left:110%; -} - -.right{ +label { position:relative; - left:-110%; + top:-35px; } \ No newline at end of file diff --git a/src/views/quiz-settings/quiz-settings.js b/src/views/quiz-settings/quiz-settings.js index 67f78b0..047b738 100644 --- a/src/views/quiz-settings/quiz-settings.js +++ b/src/views/quiz-settings/quiz-settings.js @@ -3,112 +3,144 @@ class QuizSettings { questionsNum; questionsType; - static createRadioButton(val,nameOfRadio,what,side){ - const div=document.createElement('div'); + static createRadioButton(value, settingName) { + const div = document.createElement('div'); + div.setAttribute('class','radioButton') const button = document.createElement('input'); - button.setAttribute('id',val); - button.type='radio'; - button.value=val; - button.name=nameOfRadio; - const label=document.createElement('label'); - label.setAttribute('for',val); - label.setAttribute('class',side); - label.innerText=val; - button.addEventListener('click', () => { - if (what=="about"){ - this.quizAbout=val; + button.setAttribute('id', value); + button.type = 'radio'; + button.value = value; + button.name = settingName; + const label = document.createElement('label'); + label.setAttribute('for', value); + label.innerText = value; + this.addEventListenerToComponent(button,'click',settingName,value); + div.append(button,label); + return div; + } + + + + static addEventListenerToComponent(component,event,settingName,value){ + component.addEventListener(event,()=>{ + if (settingName==='quizAbout'){ + this.quizAbout=value; } - if (what=="type"){ - this.questionsType=val; + if (settingName==='questionsType'){ + this.questionsType=value; } - + if (settingName==='questionsNum'){ + this.questionsNum=component.value; + } + console.log(this.quizAbout,this.questionsType,this.questionsNum); }); - if (side=="left"){ - div.append(label,button); - } - else { - div.append(button,label); - } - return div; } + + static createAboutSection() { const about = document.createElement('div'); const text = document.createElement('p'); - text.innerText='Quiz about: ' - about.append(text,this.createRadioButton("cats","about","about","left"), this.createRadioButton("dogs","about","about","right")); + text.innerText = 'Quiz about: '; + about.append( + text, + this.createRadioButton('cats', 'quizAbout'), + this.createRadioButton('dogs', 'quizAbout'), + ); return about; } + + static createQuestionsNumberInput() { const questionsNumber = document.createElement('input'); - questionsNumber.setAttribute('id','number'); - questionsNumber.addEventListener('input', () => { - this.questionsNum=questionsNumber.value; - }); + questionsNumber.setAttribute('id', 'number'); + this.addEventListenerToComponent(questionsNumber,'input','questionsNum',questionsNumber) return questionsNumber; } - static createQuestionsNumberSection() { + + + static createQuestionsNumberdiv() { const questionsNumberdiv = document.createElement('div'); const text = document.createElement('p'); - text.innerText='Questions number: ' + text.innerText = 'Questions number: '; questionsNumberdiv.append(text, this.createQuestionsNumberInput()); return questionsNumberdiv; } + + static createQuestionsTypeSection() { const questionsType = document.createElement('div'); const text = document.createElement('p'); - text.innerText='Questions type: ' - questionsType.append(text, this.createRadioButton("open","type","type","left"), this.createRadioButton("multiple choice","type","type","right")); + text.innerText = 'Questions type: '; + questionsType.append( + text, + this.createRadioButton('open','questionsType'), + this.createRadioButton('multiple choice', 'questionsType'), + ); return questionsType; } - static createForm() { - const form = document.createElement('form'); + + static createButtonStartQuiz(){ const buttonStartQuiz = document.createElement('input'); buttonStartQuiz.type = 'submit'; - buttonStartQuiz.setAttribute('id','submit'); - buttonStartQuiz.value='Start Quiz'; + buttonStartQuiz.setAttribute('id', 'submit'); + buttonStartQuiz.value = 'Start Quiz'; + return buttonStartQuiz; + } + + + + static createForm() { + const form = document.createElement('form'); form.append( this.createAboutSection(), - this.createQuestionsNumberSection(), + this.createQuestionsNumberdiv(), this.createQuestionsTypeSection(), - buttonStartQuiz, + this.createButtonStartQuiz() ); - form.addEventListener("submit", e => { + form.addEventListener('submit', (e) => { e.preventDefault(); - if (this.questionsNum===undefined || this.questionsNum<1 || this.questionsNum>20){ - alert("Insert questions number between 1 and 20"); - } - else if (this.quizAbout===undefined){ - alert("Choose animals"); - } - else if (this.quizAbout===undefined){ - alert("Choose questionsType"); + if (this.questionsNum === undefined || this.questionsNum < 1 || this.questionsNum > 20) { + alert('Insert questions number between 1 and 20'); + } else if (this.quizAbout === undefined) { + alert('Choose animals'); + } else if (this.quizAbout === undefined) { + alert('Choose questionsType'); + } else { + alert( + 'Quiz about: ' + + this.quizAbout + + '\nQuestions number: ' + + this.questionsNum + + '\nQuestions type: ' + + this.questionsType, + ); } - else { - alert("Quiz about: "+this.quizAbout+"\nQuestions number: "+this.questionsNum+"\nQuestions type: "+this.questionsType); - } - }); return form; } + + static showSettings() { const settings = document.createElement('div'); settings.appendChild(this.createForm()); - settings.setAttribute('id','quiz-settings'); - - console.log(this.quizAbout, this.questionsType, this.questionsNum); + settings.setAttribute('id', 'quiz-settings'); return settings; } } + + + + export { QuizSettings }; \ No newline at end of file From ee6620df23604d3f12fdc2e06b0d354a3f612ae6 Mon Sep 17 00:00:00 2001 From: NataliaCichonska Date: Wed, 8 Dec 2021 09:00:58 +0100 Subject: [PATCH 5/5] code formated with prettier --- src/views/quiz-settings/quiz-settings.css | 73 ++++++++++++----------- src/views/quiz-settings/quiz-settings.js | 30 +++++----- 2 files changed, 54 insertions(+), 49 deletions(-) diff --git a/src/views/quiz-settings/quiz-settings.css b/src/views/quiz-settings/quiz-settings.css index 086b15e..5ff4b66 100644 --- a/src/views/quiz-settings/quiz-settings.css +++ b/src/views/quiz-settings/quiz-settings.css @@ -1,81 +1,86 @@ form { - width:70%; - margin:auto; + width: 70%; + margin: auto; display: flex; flex-direction: column; justify-content: space-around; align-items: center; - gap:30px; - color:white; + gap: 30px; + color: white; } -form div{ - width:100%; +form div { + width: 100%; display: grid; - grid-template-columns:[first] 1fr [second] 1fr [third]; + grid-template-columns: [first] 1fr [second] 1fr [third]; align-items: center; justify-items: center; align-content: center; - gap:5%; + gap: 5%; } -input{ - border: 0px ; + +input { + border: 0px; border-radius: 7px; - width:100%; + width: 100%; max-width: 450px; background-color: #658080; - height:50px; - display:inline-block; - + height: 50px; + display: inline-block; + } -.radioButton{ - display:flex; +.radioButton { + display: flex; flex-direction: column; } -input[type=radio]{ + +input[type=radio] { -webkit-appearance: none; } -input[type=radio]:checked{ +input[type=radio]:checked { background-color: #191f24; } -input[type=radio]:hover{ +input[type=radio]:hover { background-color: #3e505b; } -input[type=submit]:active{ +input[type=submit]:active { background-color: #263038; } -form p{ +form p { grid-column-start: first; grid-column-end: third; } -#number{ - width:40%; + +#number { + width: 40%; grid-column-start: first; grid-column-end: third; - color:white; + color: white; text-align: center; } -#number:hover{ + +#number:hover { background-color: #3e505b; } -#submit{ - width:40%; - margin-top:100px; - color:white; +#submit { + width: 40%; + margin-top: 100px; + color: white; } -#submit:hover{ - width:40%; - margin-top:100px; + +#submit:hover { + width: 40%; + margin-top: 100px; background-color: #1e272c; } label { - position:relative; - top:-35px; + position: relative; + top: -35px; } \ No newline at end of file diff --git a/src/views/quiz-settings/quiz-settings.js b/src/views/quiz-settings/quiz-settings.js index 047b738..6d24447 100644 --- a/src/views/quiz-settings/quiz-settings.js +++ b/src/views/quiz-settings/quiz-settings.js @@ -5,7 +5,7 @@ class QuizSettings { static createRadioButton(value, settingName) { const div = document.createElement('div'); - div.setAttribute('class','radioButton') + div.setAttribute('class', 'radioButton') const button = document.createElement('input'); button.setAttribute('id', value); button.type = 'radio'; @@ -14,25 +14,25 @@ class QuizSettings { const label = document.createElement('label'); label.setAttribute('for', value); label.innerText = value; - this.addEventListenerToComponent(button,'click',settingName,value); - div.append(button,label); + this.addEventListenerToComponent(button, 'click', settingName, value); + div.append(button, label); return div; } - static addEventListenerToComponent(component,event,settingName,value){ - component.addEventListener(event,()=>{ - if (settingName==='quizAbout'){ - this.quizAbout=value; + static addEventListenerToComponent(component, event, settingName, value) { + component.addEventListener(event, () => { + if (settingName === 'quizAbout') { + this.quizAbout = value; } - if (settingName==='questionsType'){ - this.questionsType=value; + if (settingName === 'questionsType') { + this.questionsType = value; } - if (settingName==='questionsNum'){ - this.questionsNum=component.value; + if (settingName === 'questionsNum') { + this.questionsNum = component.value; } - console.log(this.quizAbout,this.questionsType,this.questionsNum); + console.log(this.quizAbout, this.questionsType, this.questionsNum); }); } @@ -55,7 +55,7 @@ class QuizSettings { static createQuestionsNumberInput() { const questionsNumber = document.createElement('input'); questionsNumber.setAttribute('id', 'number'); - this.addEventListenerToComponent(questionsNumber,'input','questionsNum',questionsNumber) + this.addEventListenerToComponent(questionsNumber, 'input', 'questionsNum', questionsNumber) return questionsNumber; } @@ -77,7 +77,7 @@ class QuizSettings { text.innerText = 'Questions type: '; questionsType.append( text, - this.createRadioButton('open','questionsType'), + this.createRadioButton('open', 'questionsType'), this.createRadioButton('multiple choice', 'questionsType'), ); return questionsType; @@ -85,7 +85,7 @@ class QuizSettings { - static createButtonStartQuiz(){ + static createButtonStartQuiz() { const buttonStartQuiz = document.createElement('input'); buttonStartQuiz.type = 'submit'; buttonStartQuiz.setAttribute('id', 'submit');