From ccc1e078edf65ff2ccb1ab880f0c37733d7b3f62 Mon Sep 17 00:00:00 2001 From: Daria Dziubaltowska Date: Sun, 3 Jan 2021 18:46:38 +0100 Subject: [PATCH 01/12] MNG-11 Add quiz template to index.html and create js file to render this template --- index.html | 10 ++++++++++ src/app/showQuizPage.js | 5 +++++ 2 files changed, 15 insertions(+) create mode 100644 src/app/showQuizPage.js diff --git a/index.html b/index.html index ae14b76..7092b81 100644 --- a/index.html +++ b/index.html @@ -23,6 +23,16 @@ arendarczyk / Kamil Arendarczyk + + diff --git a/src/app/showQuizPage.js b/src/app/showQuizPage.js new file mode 100644 index 0000000..361effe --- /dev/null +++ b/src/app/showQuizPage.js @@ -0,0 +1,5 @@ +export function showQuizPage() { + const appScreen = document.querySelector('#pokequiz-app'); + const quizTemplate = document.getElementById('quiz-template'); + appScreen.innerHTML = quizTemplate.innerHTML; +} From a3a25b8043f1cf3509f3401d67ef78761a44d80b Mon Sep 17 00:00:00 2001 From: Daria Dziubaltowska Date: Tue, 5 Jan 2021 16:04:58 +0100 Subject: [PATCH 02/12] Update quiz template, add template for quiz answer --- index.html | 67 +++++++++++++++++++++++++++++++++--------------------- 1 file changed, 41 insertions(+), 26 deletions(-) diff --git a/index.html b/index.html index 7092b81..055ac39 100644 --- a/index.html +++ b/index.html @@ -1,38 +1,53 @@ + - - - + + + CodersCamp2020 | Star Wars API QUIZ - - + + -
- Łukasz Dutka - daria305 - memeraki / Gosia Dziewit - Aleksandra Cypko / AleksandraCyp - mariusz-sm / Mariusz Smarz - Agata Ludwiczyńska/ AgataLudwiczynska - arendarczyk / Kamil Arendarczyk -
- - - + + + +
  • + + +
    • +     + + - + + \ No newline at end of file From e55711103fa202477fa51265a61fffe7e3f2b881 Mon Sep 17 00:00:00 2001 From: Daria Dziubaltowska Date: Tue, 5 Jan 2021 17:08:15 +0100 Subject: [PATCH 03/12] MNG-11 Create renderQuizPage and functions for question/mode-title updates Use templates provided in index.html to render the page. Use service question syntax for getting the question. --- src/app/App.js | 14 +++++++++- src/app/quizPage.js | 59 +++++++++++++++++++++++++++++++++++++++++ src/app/showQuizPage.js | 5 ---- 3 files changed, 72 insertions(+), 6 deletions(-) create mode 100644 src/app/quizPage.js delete mode 100644 src/app/showQuizPage.js diff --git a/src/app/App.js b/src/app/App.js index a95be5e..5b3f52c 100644 --- a/src/app/App.js +++ b/src/app/App.js @@ -1,7 +1,7 @@ -import { doc } from "prettier"; import { showStartingPage } from './showStartingPage.js'; import { showAPopUpScreen } from './showAPopUpScreen'; import { addHelpScreenTemplate } from "./addHelpScreenTemplate.js"; +import { renderQuizPage } from './quizPage.js' export const App = ({options}) => { @@ -12,6 +12,18 @@ export const App = ({options}) => { document.querySelector('#helpOption').addEventListener('click', () => { showAPopUpScreen(document.querySelector('#helpScreen')) }); + + // will be replaced with impoert from service/modes + const mode = { + name: 'WHO_IS_THAT_POKEMON', + title: "Who's that pokemon?", + questionType: "image", + answerType: "text", + answersNumber: 4 + } + + const startBtn = document.querySelector("#startGameButton"); + startBtn.addEventListener("click", function(){renderQuizPage(mode)}); } diff --git a/src/app/quizPage.js b/src/app/quizPage.js new file mode 100644 index 0000000..e8e3970 --- /dev/null +++ b/src/app/quizPage.js @@ -0,0 +1,59 @@ +export function renderQuizPage(mode) { + console.log("test"); + const appScreen = document.querySelector('#pokequiz-app'); + const quizTemplate = document.getElementById('quiz-template'); + appScreen.innerHTML = quizTemplate.innerHTML; + + // TODO later - generate question using questionService - below are temporary dummy variables + const quizQuestion = { + question: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/1.png', + answers: ['bulbasaur', 'ivysaur', 'venusaur', 'charmander'], + correctAnswer: { + name: 'bulbasaur', + index: 1 + } + } + const generatedQuestion = { + question: quizQuestion, + questionNum: 1, + } + setupPageTitle(mode) + renderNextQuestion(generatedQuestion, mode) +} + + +export function renderNextQuestion(genQuestion, mode) { + const quizBody = document.querySelector("#quiz-body"); + const quizQuestionElem = quizBody.querySelector(".quiz-question") + updateQuestion(quizQuestionElem, genQuestion, mode) + + const quizUl = quizBody.querySelector(".quiz-answers-list") + //updateQuestionsList(quizUl) + + // const questionCounter = quizBody.querySelector("#question-counter"); + // updateQuestionCounter(questionCounter, questionNum) +} + +const setupPageTitle = (mode) => { + const modeHeader = document.querySelector(".mode-title h2") + modeHeader.innerText = mode.title // Setup mode title +} + +const updateQuestion = (questionElement, quizQuestion, mode) => { + // adds styling and content depending on a type of a question + if (mode.questionType === "image") { + questionElement.classList.add("question-image") + const imgElem = createImgElement(quizQuestion.question.question) // get img url + questionElement.appendChild(imgElem) + + } else if (mode.questionType === "text") { + questionElement.classList.add("question-text") + questionElement.innerText = quizQuestion.question.question // add question as an inner text + } +} + +const createImgElement = (mode) => { + const img = document.createElement("img") + img.setAttribute("src", mode) + return img +} diff --git a/src/app/showQuizPage.js b/src/app/showQuizPage.js deleted file mode 100644 index 361effe..0000000 --- a/src/app/showQuizPage.js +++ /dev/null @@ -1,5 +0,0 @@ -export function showQuizPage() { - const appScreen = document.querySelector('#pokequiz-app'); - const quizTemplate = document.getElementById('quiz-template'); - appScreen.innerHTML = quizTemplate.innerHTML; -} From 760c78a94428569e4912d7d5971c0dc61e863b9d Mon Sep 17 00:00:00 2001 From: Daria Dziubaltowska Date: Tue, 5 Jan 2021 20:04:31 +0100 Subject: [PATCH 04/12] MNG-11 Update for quizPage, add question/answers items functions Still needed to correct error in template reading --- index.html | 9 ++++--- src/app/quizPage.js | 64 ++++++++++++++++++++++++++++++++++++++------- 2 files changed, 59 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index 055ac39..73845c7 100644 --- a/index.html +++ b/index.html @@ -34,16 +34,17 @@

    -
    +
      +
      -
    • - - +
    • + +
      • diff --git a/src/app/quizPage.js b/src/app/quizPage.js index e8e3970..059100c 100644 --- a/src/app/quizPage.js +++ b/src/app/quizPage.js @@ -1,3 +1,4 @@ +// use to render the page for the first time, after the game start export function renderQuizPage(mode) { console.log("test"); const appScreen = document.querySelector('#pokequiz-app'); @@ -21,39 +22,82 @@ export function renderQuizPage(mode) { renderNextQuestion(generatedQuestion, mode) } - +// use to update quizPage and change only the question, new answers and question qounter +// not changing the time bar export function renderNextQuestion(genQuestion, mode) { const quizBody = document.querySelector("#quiz-body"); const quizQuestionElem = quizBody.querySelector(".quiz-question") - updateQuestion(quizQuestionElem, genQuestion, mode) + updateQuestion(quizQuestionElem, genQuestion.question, mode) const quizUl = quizBody.querySelector(".quiz-answers-list") - //updateQuestionsList(quizUl) + updateAnswersList(quizUl, genQuestion.question, mode) // const questionCounter = quizBody.querySelector("#question-counter"); // updateQuestionCounter(questionCounter, questionNum) } +// Changes the title corresponding to the chosen game mode const setupPageTitle = (mode) => { const modeHeader = document.querySelector(".mode-title h2") modeHeader.innerText = mode.title // Setup mode title } -const updateQuestion = (questionElement, quizQuestion, mode) => { - // adds styling and content depending on a type of a question +// Updates the question div with styling and content depending on a type of a question +const updateQuestion = (questionElement, questionSet, mode) => { if (mode.questionType === "image") { - questionElement.classList.add("question-image") - const imgElem = createImgElement(quizQuestion.question.question) // get img url + questionElement.classList.add("question-img") + const imgElem = createImgElement(questionSet.question) // add img from url questionElement.appendChild(imgElem) } else if (mode.questionType === "text") { questionElement.classList.add("question-text") - questionElement.innerText = quizQuestion.question.question // add question as an inner text + questionElement.innerText = questionSet.question.question // add question as an inner text } } -const createImgElement = (mode) => { +// Creates img element with a selected image url +const createImgElement = (url) => { const img = document.createElement("img") - img.setAttribute("src", mode) + img.setAttribute("src", url) return img } + +// Updates styles for question list based on mode type +// creates question items sor provided question set +const updateAnswersList = (answersElement, questionSet, mode) => { + // current version works only for text answer type + //TODO add img version + console.log(answersElement); + if (mode.questionType == "text") { + answersElement.classList.add("quiz-answer-text") + } + for (let answer of questionSet.answers) { + const answerElement = createAnswerElement(answer, mode) + // answersElement.appendChild(answerElement) + } +} + +// returns first child element from tthe template +// for template.content replacement, which is not fully supported yet +const getTemplateContent = (template) => { + const dummyDiv = document.createElement("div"); + dummyDiv.innerHTML = template.innerHTML; + return dummyDiv.children[0] +} + +const createAnswerElement = (answer, mode) => { + const liTemplate = document.querySelector("#quiz-li"); + const li = getTemplateContent(liTemplate); + const liFirstElem = li.children[0] + if (mode.answerType === "image") { + // first child of li receives an image + liFirstElem.classList.add("question-img") + const imgElem = createImgElement(answer) // get img url + liFirstElem.appendChild(imgElem) + + } else if (mode.questionType === "text") { + // first child of li receives text + liFirstElem.classList.add("question-text") + questionElement.innerText = answer // add question as an inner text + } +} From 65e665654a65dc4bb5fb074a9837da1878a08e7c Mon Sep 17 00:00:00 2001 From: Daria Dziubaltowska Date: Tue, 5 Jan 2021 23:27:29 +0100 Subject: [PATCH 05/12] MNG-11 Fiish rendering quiz questions --- .gitignore | 1 + index.html | 7 ++++--- src/app/quizPage.js | 17 ++++++++++------- 3 files changed, 15 insertions(+), 10 deletions(-) diff --git a/.gitignore b/.gitignore index b05591d..fab8dc4 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ dist .cache node_modules coverage +.vscode \ No newline at end of file diff --git a/index.html b/index.html index 73845c7..faefc03 100644 --- a/index.html +++ b/index.html @@ -26,14 +26,15 @@ - -
    • - - + diff --git a/src/app/App.js b/src/app/App.js index 5b3f52c..d854c4d 100644 --- a/src/app/App.js +++ b/src/app/App.js @@ -19,7 +19,8 @@ export const App = ({options}) => { title: "Who's that pokemon?", questionType: "image", answerType: "text", - answersNumber: 4 + answersNumber: 4, + totalQuestions: 20 } const startBtn = document.querySelector("#startGameButton"); diff --git a/src/app/quizPage.js b/src/app/quizPage.js index b2415a5..3a99b6c 100644 --- a/src/app/quizPage.js +++ b/src/app/quizPage.js @@ -1,6 +1,7 @@ // use to render the page for the first time, after the game start export function renderQuizPage(mode) { const appScreen = document.querySelector('#pokequiz-app'); + appScreen.classList = ["quiz-page"] const quizTemplate = document.getElementById('quiz-template'); appScreen.innerHTML = quizTemplate.innerHTML; diff --git a/src/app/showStartingPage.js b/src/app/showStartingPage.js index 24ba6de..26961ef 100644 --- a/src/app/showStartingPage.js +++ b/src/app/showStartingPage.js @@ -1,5 +1,6 @@ export const showStartingPage = () => { const appScreen = document.querySelector('#pokequiz-app'); + appScreen.classList.add("start-page") const startingPageTemplate = `
      -
      +
        @@ -42,8 +42,8 @@

        diff --git a/src/app/App.js b/src/app/App.js index e57f3d6..dfcf16e 100644 --- a/src/app/App.js +++ b/src/app/App.js @@ -19,8 +19,7 @@ export const App = ({options}) => { title: "Who's that pokemon?", questionType: "image", answerType: "text", - answersNumber: 4, - totalQuestions: 20 + answersNumber: 6, } const mode2 = { name: 'WHAT_DOES_THIS_POKEMON_LOOK_LIKE', @@ -29,6 +28,9 @@ export const App = ({options}) => { answerType: "image", answersNumber: 4 } - document.querySelector("#startGameButton").addEventListener("click", function() {renderQuizPage(mode2)}); + document.querySelector("#startGameButton").addEventListener("click", function() { + renderQuizPage(mode2); + }); + } diff --git a/src/app/appSettings.js b/src/app/appSettings.js new file mode 100644 index 0000000..2bdf391 --- /dev/null +++ b/src/app/appSettings.js @@ -0,0 +1,18 @@ +// css styles dictionary changed during app runtime +export const START_PAGE_STYLES = { + startPageClass: "start-page" +} + +export const QUIZ_PAGE_STYLES = { + quizPageClass: "quiz-page", + quizAnswerTextClass: "answer-text", + quizAnswerImageClass: "answer-image", + quizQuestionTextClass: "question-text", + quizQuestionImageClass: "question-image", + wrongAnswerClass: "wrong-answer", + correctAnswerClass: "correct-answer", + uncheckedClass: "unchecked" +} + +export const TIMEOUT_AFTER_ANSWER_SELECTION = 1; //miliseconds + diff --git a/src/app/quizPage.js b/src/app/quizPage.js index 13a81bb..03c7e5d 100644 --- a/src/app/quizPage.js +++ b/src/app/quizPage.js @@ -1,10 +1,22 @@ -import { QuestionService } from "../service/QuestionService.js" +import { + QuestionService +} from "../service/QuestionService.js" + +import { + QUIZ_PAGE_STYLES, + START_PAGE_STYLES, + TIMEOUT_AFTER_ANSWER_SELECTION +} from "./appSettings.js" + +// will be filledi with mode object during page rendering +let CURRENT_MODE = null; +let GENERATOR = null; // use to render the page for the first time, after the game start export function renderQuizPage(mode) { const appScreen = document.querySelector('#pokequiz-app'); - appScreen.classList.add('quiz-page') - appScreen.classList.remove('start-page') + appScreen.classList.add(QUIZ_PAGE_STYLES.quizPageClass) + appScreen.classList.remove(START_PAGE_STYLES.startPageClass) const quizTemplate = document.getElementById('quiz-template'); appScreen.innerHTML = quizTemplate.innerHTML; // TODO later - generate question using questionService - below are temporary dummy variables @@ -13,8 +25,10 @@ export function renderQuizPage(mode) { questionNum: 1, } setupPageTitle(mode); + CURRENT_MODE = mode; + //GENERATOR = new QuestionService.Generator() //TODO setupTimer() -- here or directly in App - renderNextQuestion(generatedQuestion, mode); + renderNextQuestion(CURRENT_MODE); } @@ -22,8 +36,8 @@ export function renderQuizPage(mode) { // not changing the timer and bar // gent question generator and use generates next question if there is any left to answer // otherwise finishes the game and redirect user to the summary page -export function renderNextQuestion(questionsGenerator, mode) { -//genQuestion nie powinno być przekazywane do funkcji tylko powinno być tu wywoływana +export function renderNextQuestion(mode) { + //genQuestion nie powinno być przekazywane do funkcji tylko powinno być tu wywoływana const genQuestion = getNextQuestion(mode); // TODO later pass generator and use generator.genQuestion(), and replace dummy function with real one, once it's implemented if (genQuestion) { // some questions still left to answer const quizBody = document.querySelector("#quiz-body"); @@ -39,21 +53,22 @@ export function renderNextQuestion(questionsGenerator, mode) { // listen for an answer selection const answersOptions = [...quizBody.querySelector(".quiz-answers-list").children] for (let option of answersOptions) { - option.addEventListener("mouseup", function selectEventFunc () {selectAnswer(genQuestion.question, option.querySelector("div"))}) + option.addEventListener("mouseup", function selectEventFunc() { + selectAnswer(genQuestion.question, option.querySelector("div")); + }) } } else { // no more questions left console.log("You WON!, but sorry, we still don't have any summary page"); // TODO create summary page redirection } - } -//TODO dummy function to be removed afte generator is added +//TODO dummy function to be removed after generator is added const getNextQuestion = (mode) => { let q; if (mode.name == "WHO_IS_THAT_POKEMON") { - q = { + q = { question: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/1.png', - answers: ['bulbasaur', 'ivysaur', 'venusaur', 'charmander'], + answers: ['bulbasaur', 'ivysaur', 'venusaur', 'charmander', 'dummy1', 'dummy2'], correctAnswer: { name: 'bulbasaur', index: 1 @@ -61,14 +76,15 @@ const getNextQuestion = (mode) => { } } else if (mode.name == "WHAT_DOES_THIS_POKEMON_LOOK_LIKE") { q = { - question: 'bulbasaur' , - answers: ['https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/1.png', - 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/4.png', - 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/3.png', - 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/2.png'], - correctAnswer: { - name: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/1.png', - index: 1 + question: 'bulbasaur', + answers: ['https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/1.png', + 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/4.png', + 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/3.png', + 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/2.png' + ], + correctAnswer: { + name: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/1.png', + index: 1 } } } @@ -87,13 +103,13 @@ const setupPageTitle = (mode) => { // Updates the question div with styling and content depending on a type of a question const updateQuestion = (questionElement, questionSet, mode) => { if (mode.questionType === "image") { - questionElement.classList.add("question-img"); - const imgElem = createImgElement(questionSet.question); // add img from url + questionElement.classList.add(QUIZ_PAGE_STYLES.quizQuestionImageClass); + const imgElem = createImgElement(questionSet.question); // add img from url questionElement.appendChild(imgElem); } else if (mode.questionType === "text") { - questionElement.classList.add("question-text"); - questionElement.innerText = questionSet.question; // add question as an inner text + questionElement.classList.add(QUIZ_PAGE_STYLES.quizQuestionTextClass); + questionElement.innerText = questionSet.question; // add question as an inner text } } @@ -107,58 +123,51 @@ const createImgElement = (url) => { // Updates styles for question list based on mode type // creates question items sor provided question set const updateAnswersList = (answersElement, questionSet, mode) => { - - if (mode.questionType == "text") { - answersElement.classList.add("quiz-answer-text"); - - } else if (mode.questionType == "image") { - answersElement.classList.add("quiz-answer-img"); - } for (let answer of questionSet.answers) { const answerElement = createAnswerElement(answer, mode); answersElement.appendChild(answerElement); } } -// returns the first child element from the template +// returns children elements from the template // for template.content replacement, which is not fully supported yet const getTemplateContent = (template) => { - const dummyDiv = document.createElement("div"); // + const dummyDiv = document.createElement("div"); // dummyDiv.innerHTML = template.innerHTML; - return dummyDiv.children[0] + return dummyDiv.children } const createAnswerElement = (answer, mode) => { const liTemplate = document.querySelector("#quiz-li"); - const li = getTemplateContent(liTemplate); + const li = getTemplateContent(liTemplate)[0]; const liFirstElem = li.children[0] if (mode.answerType === "image") { // first child of li receives an image - liFirstElem.classList.add("quiz-answer-img") - const imgElem = createImgElement(answer) // get img url + liFirstElem.classList.add(QUIZ_PAGE_STYLES.quizAnswerImageClass) + const imgElem = createImgElement(answer) // get img url liFirstElem.appendChild(imgElem) } else if (mode.answerType === "text") { // first child of li receives text - liFirstElem.classList.add("quiz-answer-text") - liFirstElem.innerText = answer // add question as an inner text + liFirstElem.classList.add(QUIZ_PAGE_STYLES.quizAnswerTextClass) + liFirstElem.innerText = answer // add question as an inner text } return li } // Updates the question number ona quiz page const updateQuestionCounter = (counterElem, questionNum) => { - counterElem.innerText = String(questionNum).padStart(2, '0'); //TODO maybe - total num of question in a game mode + counterElem.innerText = String(questionNum).padStart(2, '0'); //TODO maybe - total num of question in a game mode } // fires up on mouse up event on answers list li, additionally accepts questionSet // check which answer was selected // eventHandler is element to which eventListener was attached to function selectAnswer(questionSet, eventHandler) { - const answer = getAnswerFromElement(eventHandler); + const answer = getAnswerFromElement(eventHandler); if (answer) { - questionSet.correctAnswer.name === answer ? correctAnswerSelected() : wrongAnswerSelected(); + questionSet.correctAnswer.name === answer ? correctAnswerSelected(eventHandler) : wrongAnswerSelected(eventHandler); } else { throw new Error('Answer was not found') } @@ -167,28 +176,47 @@ function selectAnswer(questionSet, eventHandler) { // Read selected answer value from clicked list item const getAnswerFromElement = (target) => { - const targetClasses = [...target.classList] + const targetClasses = [...target.classList]; let answer; - if (targetClasses.includes("unchecked")) { - if (targetClasses.includes("quiz-answer-text")) { + if (targetClasses.includes(QUIZ_PAGE_STYLES.uncheckedClass)) { + if (targetClasses.includes(QUIZ_PAGE_STYLES.quizAnswerTextClass)) { answer = target.innerText - } else if (targetClasses.includes("quiz-answer-img")) { + } else if (targetClasses.includes(QUIZ_PAGE_STYLES.quizAnswerImageClass)) { answer = target.children[0].getAttribute("src") } return answer - } + } } -const correctAnswerSelected = () => { -console.log("yes") +const correctAnswerSelected = (selectedElem) => { + console.log("yes") + //TODO add correct-answer class and remove unchecked + selectedElem.classList.remove(QUIZ_PAGE_STYLES.uncheckedClass) + selectedElem.classList.add(QUIZ_PAGE_STYLES.correctAnswerClass) + //TODO store results + setTimeout(()=> { + resetQuizAfterQuestion(); + renderNextQuestion(CURRENT_MODE); + }, TIMEOUT_AFTER_ANSWER_SELECTION) } -const wrongAnswerSelected = () => { -console.log("no") +const wrongAnswerSelected = (selectedElem) => { + console.log("no") + // add wrong-answer class and remove unchecked + selectedElem.classList.remove(QUIZ_PAGE_STYLES.uncheckedClass) + selectedElem.classList.add(QUIZ_PAGE_STYLES.wrongAnswerClass) + //TODO store results + setTimeout(()=> { + resetQuizAfterQuestion(); + renderNextQuestion(CURRENT_MODE); + }, TIMEOUT_AFTER_ANSWER_SELECTION) } // removes question list items -const clearPrevQuestion = (questionsElem) => { - questionsElem.innerHTML = "" +const resetQuizAfterQuestion = () => { + const quizBody = document.querySelector('#quiz-body'); + const quizTemplate = document.getElementById('quiz-template'); + quizBody.innerHTML = getTemplateContent(quizTemplate)[1].innerHTML // get the quiz body inner HTML from the template } - // TODO check if any css class should be reset too +// TODO check if any css class should be reset too + diff --git a/src/app/showStartingPage.js b/src/app/showStartingPage.js index 26961ef..54499cf 100644 --- a/src/app/showStartingPage.js +++ b/src/app/showStartingPage.js @@ -1,6 +1,8 @@ +import { START_PAGE_STYLES } from "./appSettings.js" + export const showStartingPage = () => { const appScreen = document.querySelector('#pokequiz-app'); - appScreen.classList.add("start-page") + appScreen.classList.add(START_PAGE_STYLES.startPageClass) const startingPageTemplate = `