diff --git a/10. Fetch Questions from Local JSON File/end.js b/10. Fetch Questions from Local JSON File/end.js index e8eda3a..ec9c85c 100644 --- a/10. Fetch Questions from Local JSON File/end.js +++ b/10. Fetch Questions from Local JSON File/end.js @@ -1,30 +1,29 @@ -const username = document.getElementById("username"); -const saveScoreBtn = document.getElementById("saveScoreBtn"); -const finalScore = document.getElementById("finalScore"); -const mostRecentScore = localStorage.getItem("mostRecentScore"); +const username = document.getElementById('username'); +const saveScoreBtn = document.getElementById('saveScoreBtn'); +const finalScore = document.getElementById('finalScore'); +const mostRecentScore = localStorage.getItem('mostRecentScore'); -const highScores = JSON.parse(localStorage.getItem("highScores")) || []; +const highScores = JSON.parse(localStorage.getItem('highScores')) || []; const MAX_HIGH_SCORES = 5; finalScore.innerText = mostRecentScore; -username.addEventListener("keyup", () => { - saveScoreBtn.disabled = !username.value; +username.addEventListener('keyup', () => { + saveScoreBtn.disabled = !username.value; }); -saveHighScore = e => { - console.log("clicked the save button!"); - e.preventDefault(); +saveHighScore = (e) => { + e.preventDefault(); - const score = { - score: Math.floor(Math.random() * 100), - name: username.value - }; - highScores.push(score); - highScores.sort((a, b) => b.score - a.score); - highScores.splice(5); + const score = { + score: mostRecentScore, + name: username.value, + }; + highScores.push(score); + highScores.sort((a, b) => b.score - a.score); + highScores.splice(5); - localStorage.setItem("highScores", JSON.stringify(highScores)); - window.location.assign("/"); + localStorage.setItem('highScores', JSON.stringify(highScores)); + window.location.assign('/'); }; diff --git a/10. Fetch Questions from Local JSON File/game.js b/10. Fetch Questions from Local JSON File/game.js index 8cca138..e031ed8 100644 --- a/10. Fetch Questions from Local JSON File/game.js +++ b/10. Fetch Questions from Local JSON File/game.js @@ -1,8 +1,8 @@ -const question = document.getElementById("question"); -const choices = Array.from(document.getElementsByClassName("choice-text")); -const progressText = document.getElementById("progressText"); -const scoreText = document.getElementById("score"); -const progressBarFull = document.getElementById("progressBarFull"); +const question = document.getElementById('question'); +const choices = Array.from(document.getElementsByClassName('choice-text')); +const progressText = document.getElementById('progressText'); +const scoreText = document.getElementById('score'); +const progressBarFull = document.getElementById('progressBarFull'); let currentQuestion = {}; let acceptingAnswers = false; let score = 0; @@ -11,79 +11,78 @@ let availableQuesions = []; let questions = []; -fetch("questions.json") - .then(res => { - return res.json(); - }) - .then(loadedQuestions => { - console.log(loadedQuestions); - questions = loadedQuestions; - startGame(); - }) - .catch(err => { - console.error(err); - }); +fetch('questions.json') + .then((res) => { + return res.json(); + }) + .then((loadedQuestions) => { + questions = loadedQuestions; + startGame(); + }) + .catch((err) => { + console.error(err); + }); //CONSTANTS const CORRECT_BONUS = 10; const MAX_QUESTIONS = 3; startGame = () => { - questionCounter = 0; - score = 0; - availableQuesions = [...questions]; - getNewQuestion(); + questionCounter = 0; + score = 0; + availableQuesions = [...questions]; + getNewQuestion(); }; getNewQuestion = () => { - if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) { - localStorage.setItem("mostRecentScore", score); - //go to the end page - return window.location.assign("/end.html"); - } - questionCounter++; - progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`; - //Update the progress bar - progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`; + if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) { + localStorage.setItem('mostRecentScore', score); + //go to the end page + return window.location.assign('/end.html'); + } + questionCounter++; + progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`; + //Update the progress bar + progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`; - const questionIndex = Math.floor(Math.random() * availableQuesions.length); - currentQuestion = availableQuesions[questionIndex]; - question.innerText = currentQuestion.question; + const questionIndex = Math.floor(Math.random() * availableQuesions.length); + currentQuestion = availableQuesions[questionIndex]; + question.innerText = currentQuestion.question; - choices.forEach(choice => { - const number = choice.dataset["number"]; - choice.innerText = currentQuestion["choice" + number]; - }); + choices.forEach((choice) => { + const number = choice.dataset['number']; + choice.innerText = currentQuestion['choice' + number]; + }); - availableQuesions.splice(questionIndex, 1); - acceptingAnswers = true; + availableQuesions.splice(questionIndex, 1); + acceptingAnswers = true; }; -choices.forEach(choice => { - choice.addEventListener("click", e => { - if (!acceptingAnswers) return; +choices.forEach((choice) => { + choice.addEventListener('click', (e) => { + if (!acceptingAnswers) return; - acceptingAnswers = false; - const selectedChoice = e.target; - const selectedAnswer = selectedChoice.dataset["number"]; + acceptingAnswers = false; + const selectedChoice = e.target; + const selectedAnswer = selectedChoice.dataset['number']; - const classToApply = - selectedAnswer == currentQuestion.answer ? "correct" : "incorrect"; + const classToApply = + selectedAnswer == currentQuestion.answer ? 'correct' : 'incorrect'; - if (classToApply === "correct") { - incrementScore(CORRECT_BONUS); - } + if (classToApply === 'correct') { + incrementScore(CORRECT_BONUS); + } - selectedChoice.parentElement.classList.add(classToApply); + selectedChoice.parentElement.classList.add(classToApply); - setTimeout(() => { - selectedChoice.parentElement.classList.remove(classToApply); - getNewQuestion(); - }, 1000); - }); + setTimeout(() => { + selectedChoice.parentElement.classList.remove(classToApply); + getNewQuestion(); + }, 1000); + }); }); -incrementScore = num => { - score += num; - scoreText.innerText = score; +incrementScore = (num) => { + score += num; + scoreText.innerText = score; }; diff --git a/11. Fetch API Questions from Open Trivia API/end.js b/11. Fetch API Questions from Open Trivia API/end.js index e8eda3a..ec9c85c 100644 --- a/11. Fetch API Questions from Open Trivia API/end.js +++ b/11. Fetch API Questions from Open Trivia API/end.js @@ -1,30 +1,29 @@ -const username = document.getElementById("username"); -const saveScoreBtn = document.getElementById("saveScoreBtn"); -const finalScore = document.getElementById("finalScore"); -const mostRecentScore = localStorage.getItem("mostRecentScore"); +const username = document.getElementById('username'); +const saveScoreBtn = document.getElementById('saveScoreBtn'); +const finalScore = document.getElementById('finalScore'); +const mostRecentScore = localStorage.getItem('mostRecentScore'); -const highScores = JSON.parse(localStorage.getItem("highScores")) || []; +const highScores = JSON.parse(localStorage.getItem('highScores')) || []; const MAX_HIGH_SCORES = 5; finalScore.innerText = mostRecentScore; -username.addEventListener("keyup", () => { - saveScoreBtn.disabled = !username.value; +username.addEventListener('keyup', () => { + saveScoreBtn.disabled = !username.value; }); -saveHighScore = e => { - console.log("clicked the save button!"); - e.preventDefault(); +saveHighScore = (e) => { + e.preventDefault(); - const score = { - score: Math.floor(Math.random() * 100), - name: username.value - }; - highScores.push(score); - highScores.sort((a, b) => b.score - a.score); - highScores.splice(5); + const score = { + score: mostRecentScore, + name: username.value, + }; + highScores.push(score); + highScores.sort((a, b) => b.score - a.score); + highScores.splice(5); - localStorage.setItem("highScores", JSON.stringify(highScores)); - window.location.assign("/"); + localStorage.setItem('highScores', JSON.stringify(highScores)); + window.location.assign('/'); }; diff --git a/11. Fetch API Questions from Open Trivia API/game.js b/11. Fetch API Questions from Open Trivia API/game.js index d1a5d54..7394629 100644 --- a/11. Fetch API Questions from Open Trivia API/game.js +++ b/11. Fetch API Questions from Open Trivia API/game.js @@ -1,8 +1,8 @@ -const question = document.getElementById("question"); -const choices = Array.from(document.getElementsByClassName("choice-text")); -const progressText = document.getElementById("progressText"); -const scoreText = document.getElementById("score"); -const progressBarFull = document.getElementById("progressBarFull"); +const question = document.getElementById('question'); +const choices = Array.from(document.getElementsByClassName('choice-text')); +const progressText = document.getElementById('progressText'); +const scoreText = document.getElementById('score'); +const progressBarFull = document.getElementById('progressBarFull'); let currentQuestion = {}; let acceptingAnswers = false; let score = 0; @@ -12,98 +12,97 @@ let availableQuesions = []; let questions = []; fetch( - "https://opentdb.com/api.php?amount=10&category=9&difficulty=easy&type=multiple" + 'https://opentdb.com/api.php?amount=10&category=9&difficulty=easy&type=multiple' ) - .then(res => { - return res.json(); - }) - .then(loadedQuestions => { - console.log(loadedQuestions.results); - questions = loadedQuestions.results.map(loadedQuestion => { - const formattedQuestion = { - question: loadedQuestion.question - }; - - const answerChoices = [...loadedQuestion.incorrect_answers]; - formattedQuestion.answer = Math.floor(Math.random() * 3) + 1; - answerChoices.splice( - formattedQuestion.answer - 1, - 0, - loadedQuestion.correct_answer - ); - - answerChoices.forEach((choice, index) => { - formattedQuestion["choice" + (index + 1)] = choice; - }); - - return formattedQuestion; + .then((res) => { + return res.json(); + }) + .then((loadedQuestions) => { + questions = loadedQuestions.results.map((loadedQuestion) => { + const formattedQuestion = { + question: loadedQuestion.question, + }; + + const answerChoices = [...loadedQuestion.incorrect_answers]; + formattedQuestion.answer = Math.floor(Math.random() * 4) + 1; + answerChoices.splice( + formattedQuestion.answer - 1, + 0, + loadedQuestion.correct_answer + ); + + answerChoices.forEach((choice, index) => { + formattedQuestion['choice' + (index + 1)] = choice; + }); + + return formattedQuestion; + }); + startGame(); + }) + .catch((err) => { + console.error(err); }); - startGame(); - }) - .catch(err => { - console.error(err); - }); //CONSTANTS const CORRECT_BONUS = 10; const MAX_QUESTIONS = 3; startGame = () => { - questionCounter = 0; - score = 0; - availableQuesions = [...questions]; - getNewQuestion(); + questionCounter = 0; + score = 0; + availableQuesions = [...questions]; + getNewQuestion(); }; getNewQuestion = () => { - if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) { - localStorage.setItem("mostRecentScore", score); - //go to the end page - return window.location.assign("/end.html"); - } - questionCounter++; - progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`; - //Update the progress bar - progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`; - - const questionIndex = Math.floor(Math.random() * availableQuesions.length); - currentQuestion = availableQuesions[questionIndex]; - question.innerText = currentQuestion.question; - - choices.forEach(choice => { - const number = choice.dataset["number"]; - choice.innerText = currentQuestion["choice" + number]; - }); - - availableQuesions.splice(questionIndex, 1); - acceptingAnswers = true; + if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) { + localStorage.setItem('mostRecentScore', score); + //go to the end page + return window.location.assign('/end.html'); + } + questionCounter++; + progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`; + //Update the progress bar + progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`; + + const questionIndex = Math.floor(Math.random() * availableQuesions.length); + currentQuestion = availableQuesions[questionIndex]; + question.innerText = currentQuestion.question; + + choices.forEach((choice) => { + const number = choice.dataset['number']; + choice.innerText = currentQuestion['choice' + number]; + }); + + availableQuesions.splice(questionIndex, 1); + acceptingAnswers = true; }; -choices.forEach(choice => { - choice.addEventListener("click", e => { - if (!acceptingAnswers) return; +choices.forEach((choice) => { + choice.addEventListener('click', (e) => { + if (!acceptingAnswers) return; - acceptingAnswers = false; - const selectedChoice = e.target; - const selectedAnswer = selectedChoice.dataset["number"]; + acceptingAnswers = false; + const selectedChoice = e.target; + const selectedAnswer = selectedChoice.dataset['number']; - const classToApply = - selectedAnswer == currentQuestion.answer ? "correct" : "incorrect"; + const classToApply = + selectedAnswer == currentQuestion.answer ? 'correct' : 'incorrect'; - if (classToApply === "correct") { - incrementScore(CORRECT_BONUS); - } + if (classToApply === 'correct') { + incrementScore(CORRECT_BONUS); + } - selectedChoice.parentElement.classList.add(classToApply); + selectedChoice.parentElement.classList.add(classToApply); - setTimeout(() => { - selectedChoice.parentElement.classList.remove(classToApply); - getNewQuestion(); - }, 1000); - }); + setTimeout(() => { + selectedChoice.parentElement.classList.remove(classToApply); + getNewQuestion(); + }, 1000); + }); }); -incrementScore = num => { - score += num; - scoreText.innerText = score; +incrementScore = (num) => { + score += num; + scoreText.innerText = score; }; diff --git a/12. Create a Spinning Loader/end.js b/12. Create a Spinning Loader/end.js index e8eda3a..ec9c85c 100644 --- a/12. Create a Spinning Loader/end.js +++ b/12. Create a Spinning Loader/end.js @@ -1,30 +1,29 @@ -const username = document.getElementById("username"); -const saveScoreBtn = document.getElementById("saveScoreBtn"); -const finalScore = document.getElementById("finalScore"); -const mostRecentScore = localStorage.getItem("mostRecentScore"); +const username = document.getElementById('username'); +const saveScoreBtn = document.getElementById('saveScoreBtn'); +const finalScore = document.getElementById('finalScore'); +const mostRecentScore = localStorage.getItem('mostRecentScore'); -const highScores = JSON.parse(localStorage.getItem("highScores")) || []; +const highScores = JSON.parse(localStorage.getItem('highScores')) || []; const MAX_HIGH_SCORES = 5; finalScore.innerText = mostRecentScore; -username.addEventListener("keyup", () => { - saveScoreBtn.disabled = !username.value; +username.addEventListener('keyup', () => { + saveScoreBtn.disabled = !username.value; }); -saveHighScore = e => { - console.log("clicked the save button!"); - e.preventDefault(); +saveHighScore = (e) => { + e.preventDefault(); - const score = { - score: Math.floor(Math.random() * 100), - name: username.value - }; - highScores.push(score); - highScores.sort((a, b) => b.score - a.score); - highScores.splice(5); + const score = { + score: mostRecentScore, + name: username.value, + }; + highScores.push(score); + highScores.sort((a, b) => b.score - a.score); + highScores.splice(5); - localStorage.setItem("highScores", JSON.stringify(highScores)); - window.location.assign("/"); + localStorage.setItem('highScores', JSON.stringify(highScores)); + window.location.assign('/'); }; diff --git a/12. Create a Spinning Loader/game.js b/12. Create a Spinning Loader/game.js index e89029a..b504fd1 100644 --- a/12. Create a Spinning Loader/game.js +++ b/12. Create a Spinning Loader/game.js @@ -1,10 +1,10 @@ -const question = document.getElementById("question"); -const choices = Array.from(document.getElementsByClassName("choice-text")); -const progressText = document.getElementById("progressText"); -const scoreText = document.getElementById("score"); -const progressBarFull = document.getElementById("progressBarFull"); -const loader = document.getElementById("loader"); -const game = document.getElementById("game"); +const question = document.getElementById('question'); +const choices = Array.from(document.getElementsByClassName('choice-text')); +const progressText = document.getElementById('progressText'); +const scoreText = document.getElementById('score'); +const progressBarFull = document.getElementById('progressBarFull'); +const loader = document.getElementById('loader'); +const game = document.getElementById('game'); let currentQuestion = {}; let acceptingAnswers = false; let score = 0; @@ -14,101 +14,100 @@ let availableQuesions = []; let questions = []; fetch( - "https://opentdb.com/api.php?amount=10&category=9&difficulty=easy&type=multiple" + 'https://opentdb.com/api.php?amount=10&category=9&difficulty=easy&type=multiple' ) - .then(res => { - return res.json(); - }) - .then(loadedQuestions => { - console.log(loadedQuestions.results); - questions = loadedQuestions.results.map(loadedQuestion => { - const formattedQuestion = { - question: loadedQuestion.question - }; - - const answerChoices = [...loadedQuestion.incorrect_answers]; - formattedQuestion.answer = Math.floor(Math.random() * 3) + 1; - answerChoices.splice( - formattedQuestion.answer - 1, - 0, - loadedQuestion.correct_answer - ); - - answerChoices.forEach((choice, index) => { - formattedQuestion["choice" + (index + 1)] = choice; - }); - - return formattedQuestion; + .then((res) => { + return res.json(); + }) + .then((loadedQuestions) => { + questions = loadedQuestions.results.map((loadedQuestion) => { + const formattedQuestion = { + question: loadedQuestion.question, + }; + + const answerChoices = [...loadedQuestion.incorrect_answers]; + formattedQuestion.answer = Math.floor(Math.random() * 4) + 1; + answerChoices.splice( + formattedQuestion.answer - 1, + 0, + loadedQuestion.correct_answer + ); + + answerChoices.forEach((choice, index) => { + formattedQuestion['choice' + (index + 1)] = choice; + }); + + return formattedQuestion; + }); + + startGame(); + }) + .catch((err) => { + console.error(err); }); - startGame(); - }) - .catch(err => { - console.error(err); - }); - //CONSTANTS const CORRECT_BONUS = 10; const MAX_QUESTIONS = 3; startGame = () => { - questionCounter = 0; - score = 0; - availableQuesions = [...questions]; - getNewQuestion(); - game.classList.remove("hidden"); - loader.classList.add("hidden"); + questionCounter = 0; + score = 0; + availableQuesions = [...questions]; + getNewQuestion(); + game.classList.remove('hidden'); + loader.classList.add('hidden'); }; getNewQuestion = () => { - if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) { - localStorage.setItem("mostRecentScore", score); - //go to the end page - return window.location.assign("/end.html"); - } - questionCounter++; - progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`; - //Update the progress bar - progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`; - - const questionIndex = Math.floor(Math.random() * availableQuesions.length); - currentQuestion = availableQuesions[questionIndex]; - question.innerText = currentQuestion.question; - - choices.forEach(choice => { - const number = choice.dataset["number"]; - choice.innerText = currentQuestion["choice" + number]; - }); - - availableQuesions.splice(questionIndex, 1); - acceptingAnswers = true; + if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) { + localStorage.setItem('mostRecentScore', score); + //go to the end page + return window.location.assign('/end.html'); + } + questionCounter++; + progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`; + //Update the progress bar + progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`; + + const questionIndex = Math.floor(Math.random() * availableQuesions.length); + currentQuestion = availableQuesions[questionIndex]; + question.innerText = currentQuestion.question; + + choices.forEach((choice) => { + const number = choice.dataset['number']; + choice.innerText = currentQuestion['choice' + number]; + }); + + availableQuesions.splice(questionIndex, 1); + acceptingAnswers = true; }; -choices.forEach(choice => { - choice.addEventListener("click", e => { - if (!acceptingAnswers) return; +choices.forEach((choice) => { + choice.addEventListener('click', (e) => { + if (!acceptingAnswers) return; - acceptingAnswers = false; - const selectedChoice = e.target; - const selectedAnswer = selectedChoice.dataset["number"]; + acceptingAnswers = false; + const selectedChoice = e.target; + const selectedAnswer = selectedChoice.dataset['number']; - const classToApply = - selectedAnswer == currentQuestion.answer ? "correct" : "incorrect"; + const classToApply = + selectedAnswer == currentQuestion.answer ? 'correct' : 'incorrect'; - if (classToApply === "correct") { - incrementScore(CORRECT_BONUS); - } + if (classToApply === 'correct') { + incrementScore(CORRECT_BONUS); + } - selectedChoice.parentElement.classList.add(classToApply); + selectedChoice.parentElement.classList.add(classToApply); - setTimeout(() => { - selectedChoice.parentElement.classList.remove(classToApply); - getNewQuestion(); - }, 1000); - }); + setTimeout(() => { + selectedChoice.parentElement.classList.remove(classToApply); + getNewQuestion(); + }, 1000); + }); }); -incrementScore = num => { - score += num; - scoreText.innerText = score; +incrementScore = (num) => { + score += num; + scoreText.innerText = score; }; diff --git a/3. Display Hard Coded Question and Answers/game.js b/3. Display Hard Coded Question and Answers/game.js index 1cabaee..473890c 100644 --- a/3. Display Hard Coded Question and Answers/game.js +++ b/3. Display Hard Coded Question and Answers/game.js @@ -1,5 +1,5 @@ -const question = document.getElementById("question"); -const choices = Array.from(document.getElementsByClassName("choice-text")); +const question = document.getElementById('question'); +const choices = Array.from(document.getElementsByClassName('choice-text')); let currentQuestion = {}; let acceptingAnswers = false; @@ -8,31 +8,31 @@ let questionCounter = 0; let availableQuesions = []; let questions = [ - { - question: "Inside which HTML element do we put the JavaScript??", - choice1: "