From f9f9b15bf7a4226aa040a10dcac8c5eb4b198148 Mon Sep 17 00:00:00 2001 From: Damian Montero Date: Mon, 18 Feb 2019 00:08:01 -0500 Subject: [PATCH 01/16] Adding a Youtube Playlist --- ReadMe.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ReadMe.md b/ReadMe.md index 520dda2..ff4dfb4 100644 --- a/ReadMe.md +++ b/ReadMe.md @@ -1,6 +1,6 @@ # Build a Quiz App with HTML, CSS, and JavaScript -![Home Screen](./images/cover.png) +[yt_playlist id="https://www.youtube.com/playlist?list=PLB6wlEeCDJ5Yyh6P2N6Q_9JijB6v4UejF"] Build a Quiz App with HTML, CSS, and JavaScript to improve your Core Web Development From df9ea21358c49d9e7b03765df61addad31aab37c Mon Sep 17 00:00:00 2001 From: Damian Montero Date: Mon, 18 Feb 2019 00:18:08 -0500 Subject: [PATCH 02/16] Video youtube Playlist of James' amazing videos --- ReadMe.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/ReadMe.md b/ReadMe.md index ff4dfb4..7b66345 100644 --- a/ReadMe.md +++ b/ReadMe.md @@ -1,6 +1,8 @@ # Build a Quiz App with HTML, CSS, and JavaScript -[yt_playlist id="https://www.youtube.com/playlist?list=PLB6wlEeCDJ5Yyh6P2N6Q_9JijB6v4UejF"] +![Home Screen](./images/cover.png) + +Video Playlist: https://www.youtube.com/playlist?list=PLB6wlEeCDJ5Yyh6P2N6Q_9JijB6v4UejF Build a Quiz App with HTML, CSS, and JavaScript to improve your Core Web Development From 12c2394c50a26bee84513687c9d551a2dee23147 Mon Sep 17 00:00:00 2001 From: James Quick Date: Wed, 22 Jan 2020 19:33:27 -0600 Subject: [PATCH 03/16] Updated ReadMe --- ReadMe.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ReadMe.md b/ReadMe.md index 520dda2..1074ea8 100644 --- a/ReadMe.md +++ b/ReadMe.md @@ -2,7 +2,7 @@ ![Home Screen](./images/cover.png) -Build a Quiz App with HTML, CSS, and JavaScript to improve your Core Web Development +Build a Quiz App with HTML, CSS, and JavaScript to improve your Core Web Development! Want to improve your **core Web Develoment skills**? Want to improve your knowledge of **HTML, CSS, and JavaScript**? In this course, you're going to learn how to build a Quiz application **without the assistance of libraries or frameworks**. Here are some of the topic we will cover! From fa9af0b3395499b2917bd7ef3e673f0210c7dc35 Mon Sep 17 00:00:00 2001 From: James Quick Date: Wed, 22 Jan 2020 19:36:13 -0600 Subject: [PATCH 04/16] Updated Read Me again --- ReadMe.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ReadMe.md b/ReadMe.md index 1074ea8..326eeb4 100644 --- a/ReadMe.md +++ b/ReadMe.md @@ -2,7 +2,7 @@ ![Home Screen](./images/cover.png) -Build a Quiz App with HTML, CSS, and JavaScript to improve your Core Web Development! +Build a Quiz App with HTML, CSS, and JavaScript to improve your Core Web Development!! Want to improve your **core Web Develoment skills**? Want to improve your knowledge of **HTML, CSS, and JavaScript**? In this course, you're going to learn how to build a Quiz application **without the assistance of libraries or frameworks**. Here are some of the topic we will cover! From acb701ede09a59eedce898d62a96f61822a8340a Mon Sep 17 00:00:00 2001 From: James Quick Date: Wed, 22 Jan 2020 19:36:33 -0600 Subject: [PATCH 05/16] Got rid of exclamation --- ReadMe.md | 74 +++++++++++++++++++++++++++---------------------------- 1 file changed, 37 insertions(+), 37 deletions(-) diff --git a/ReadMe.md b/ReadMe.md index 1074ea8..a992bac 100644 --- a/ReadMe.md +++ b/ReadMe.md @@ -2,19 +2,19 @@ ![Home Screen](./images/cover.png) -Build a Quiz App with HTML, CSS, and JavaScript to improve your Core Web Development! +Build a Quiz App with HTML, CSS, and JavaScript to improve your Core Web Development Want to improve your **core Web Develoment skills**? Want to improve your knowledge of **HTML, CSS, and JavaScript**? In this course, you're going to learn how to build a Quiz application **without the assistance of libraries or frameworks**. Here are some of the topic we will cover! -- Save high scores in Local Storage -- Create a progress bar -- Create a spinning loader icon -- Dynamically generate HTML in JavaScript -- Fetch trivia questions from Open Trivia DB API +- Save high scores in Local Storage +- Create a progress bar +- Create a spinning loader icon +- Dynamically generate HTML in JavaScript +- Fetch trivia questions from Open Trivia DB API -- JavaScript - Array Functions (splice, map, sort), Local Storage, Fetch API -- ES6 JavaScript Features - Arrow Functions, the Spread Operator, Const and Let, Template Literals -- CSS - Flexbox, Animtations, and REM units +- JavaScript - Array Functions (splice, map, sort), Local Storage, Fetch API +- ES6 JavaScript Features - Arrow Functions, the Spread Operator, Const and Let, Template Literals +- CSS - Flexbox, Animtations, and REM units ## Course Intro and Resources @@ -24,9 +24,9 @@ In this course, we are going to use fundamental HTML, CSS, and JavaScript skills Resources -- [Course Source Code](https://github.com/jamesqquick/Design-And-Build-A-Quiz-App) -- [Learn Build Teach Newsletter](https://www.learnbuildteach.com/) -- [Learn Build Teach YouTube Channel](https://www.youtube.com/c/jamesqquick) +- [Course Source Code](https://github.com/jamesqquick/Design-And-Build-A-Quiz-App) +- [Learn Build Teach Newsletter](https://www.learnbuildteach.com/) +- [Learn Build Teach YouTube Channel](https://www.youtube.com/c/jamesqquick) ## 1. Create and Style the Home Page @@ -36,9 +36,9 @@ I encourage you all to take a look at Emmet snippets for generating HTML and CSS Resources -- [Emmet in Visual Studio Code](https://www.youtube.com/watch?v=5guZjNDcVnA) -- [Understanding REM Units](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/) -- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) +- [Emmet in Visual Studio Code](https://www.youtube.com/watch?v=5guZjNDcVnA) +- [Understanding REM Units](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/) +- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) ## 2. Create and Style the Game Page @@ -50,12 +50,12 @@ In this video, we will load questions from a hard coded array and iterate throug Resources -- [Creating Code Snippets in Visual Studio Code](https://www.youtube.com/watch?v=K3gLlZm-m_8) -- [Using Data Attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) -- [Document Query Selector](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) -- [Document Get by ID](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) -- [Spread Operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) -- [Arrow Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) +- [Creating Code Snippets in Visual Studio Code](https://www.youtube.com/watch?v=K3gLlZm-m_8) +- [Using Data Attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) +- [Document Query Selector](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) +- [Document Get by ID](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) +- [Spread Operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) +- [Arrow Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) ## 4. Display Feedback for Correct/Incorrect Answers @@ -63,8 +63,8 @@ In this video, we check the user's answer for correctness and display feedback t Resources -- [Bootstrap 4 Colors](https://www.w3schools.com/bootstrap4/bootstrap_colors.asp) -- [Triple vs Double Equals](https://codeburst.io/javascript-double-equals-vs-triple-equals-61d4ce5a121a) +- [Bootstrap 4 Colors](https://www.w3schools.com/bootstrap4/bootstrap_colors.asp) +- [Triple vs Double Equals](https://codeburst.io/javascript-double-equals-vs-triple-equals-61d4ce5a121a) ## 5. Create Head's Up Display (HUD) @@ -72,7 +72,7 @@ In this video, we will create a Heads Up Display (HUD) for our quiz app. This wi Resources -- [ES6 Template Literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) +- [ES6 Template Literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) ## 6. Create a Progress Bar @@ -84,7 +84,7 @@ In this video, we will create our End page where we will display the user's achi Resources -- [Local Storage](https://www.w3schools.com/jsref/prop_win_localstorage.asp) +- [Local Storage](https://www.w3schools.com/jsref/prop_win_localstorage.asp) ## 8. Save High Scores in Local Storage @@ -92,7 +92,7 @@ In this video, we will save and maintain a high scores array in Local Storage. T Resources -- [Local Storage](https://www.w3schools.com/jsref/prop_win_localstorage.asp) +- [Local Storage](https://www.w3schools.com/jsref/prop_win_localstorage.asp) ## 9. Load and Display High Scores from Local Storage @@ -100,10 +100,10 @@ In this video, we will create our High Scores page. We will have to load the hig Resources -- [JSON Parse and Stringify](https://alligator.io/js/json-parse-stringify/) -- [Array Sort](https://www.w3schools.com/js/js_array_sort.asp) -- [Array Map](https://www.w3schools.com/jsref/jsref_map.asp) -- [Array Join](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join) +- [JSON Parse and Stringify](https://alligator.io/js/json-parse-stringify/) +- [Array Sort](https://www.w3schools.com/js/js_array_sort.asp) +- [Array Map](https://www.w3schools.com/jsref/jsref_map.asp) +- [Array Join](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join) ## 10. Fetch API to Load Questions From Local JSON File @@ -111,8 +111,8 @@ In this video, we will move our sample questions from a hard coded array to an e Resources -- [How to Use the Fetch API](https://scotch.io/tutorials/how-to-use-the-javascript-fetch-api-to-get-data) -- [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise_) +- [How to Use the Fetch API](https://scotch.io/tutorials/how-to-use-the-javascript-fetch-api-to-get-data) +- [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise_) ## 11. Fetch API to Load Questions from Open Trivia API @@ -120,10 +120,10 @@ In this video, we will use Fetch to request a list of questions from the Open Tr Reources -- [How to Use the Fetch API](https://scotch.io/tutorials/how-to-use-the-javascript-fetch-api-to-get-data) -- [Open Trivia DB](https://opentdb.com/) -- [Array Map](https://www.w3schools.com/jsref/jsref_map.asp) -- [Array For Each](https://www.w3schools.com/jsref/jsref_foreach.asp) +- [How to Use the Fetch API](https://scotch.io/tutorials/how-to-use-the-javascript-fetch-api-to-get-data) +- [Open Trivia DB](https://opentdb.com/) +- [Array Map](https://www.w3schools.com/jsref/jsref_map.asp) +- [Array For Each](https://www.w3schools.com/jsref/jsref_foreach.asp) ## 12. Create a Spinning Loader @@ -131,7 +131,7 @@ In this video, we will create a simple spinning loader in CSS that will be displ Resources -- [Create a CSS Loader](https://www.w3schools.com/howto/howto_css_loader.asp) +- [Create a CSS Loader](https://www.w3schools.com/howto/howto_css_loader.asp) ## 13. Closing From ae4c09a1d34a40c03aa058b5a370937fcbf436a0 Mon Sep 17 00:00:00 2001 From: krishna16sharma <59202185+krishna16sharma@users.noreply.github.com> Date: Tue, 14 Apr 2020 12:02:20 +0530 Subject: [PATCH 06/16] Fixed minor issues. Updated line 21 of end.js to store actual score instead of a random score. Updated game.js to show the corresponding string of various HTML entities (like ") in the loaded question and choice. --- Final/app.css | 127 ++++++++++++++++++++++++++++++++++++++++ Final/end.html | 37 ++++++++++++ Final/end.js | 30 ++++++++++ Final/game.css | 82 ++++++++++++++++++++++++++ Final/game.html | 54 +++++++++++++++++ Final/game.js | 132 ++++++++++++++++++++++++++++++++++++++++++ Final/highscores.css | 14 +++++ Final/highscores.html | 21 +++++++ Final/highscores.js | 8 +++ Final/index.html | 19 ++++++ Final/questions.json | 26 +++++++++ 11 files changed, 550 insertions(+) create mode 100644 Final/app.css create mode 100644 Final/end.html create mode 100644 Final/end.js create mode 100644 Final/game.css create mode 100644 Final/game.html create mode 100644 Final/game.js create mode 100644 Final/highscores.css create mode 100644 Final/highscores.html create mode 100644 Final/highscores.js create mode 100644 Final/index.html create mode 100644 Final/questions.json diff --git a/Final/app.css b/Final/app.css new file mode 100644 index 0000000..7d3c2a0 --- /dev/null +++ b/Final/app.css @@ -0,0 +1,127 @@ +:root { + background-color: #ecf5ff; + font-size: 62.5%; +} + +* { + box-sizing: border-box; + font-family: Arial, Helvetica, sans-serif; + margin: 0; + padding: 0; + color: #333; +} + +h1, +h2, +h3, +h4 { + margin-bottom: 1rem; +} + +h1 { + font-size: 5.4rem; + color: #56a5eb; + margin-bottom: 5rem; +} + +h1 > span { + font-size: 2.4rem; + font-weight: 500; +} + +h2 { + font-size: 4.2rem; + margin-bottom: 4rem; + font-weight: 700; +} + +h3 { + font-size: 2.8rem; + font-weight: 500; +} + +/* UTILITIES */ + +.container { + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + max-width: 80rem; + margin: 0 auto; + padding: 2rem; +} + +.container > * { + width: 100%; +} + +.flex-column { + display: flex; + flex-direction: column; +} + +.flex-center { + justify-content: center; + align-items: center; +} + +.justify-center { + justify-content: center; +} + +.text-center { + text-align: center; +} + +.hidden { + display: none; +} + +/* BUTTONS */ +.btn { + font-size: 1.8rem; + padding: 1rem 0; + width: 20rem; + text-align: center; + border: 0.1rem solid #56a5eb; + margin-bottom: 1rem; + text-decoration: none; + color: #56a5eb; + background-color: white; +} + +.btn:hover { + cursor: pointer; + box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5); + transform: translateY(-0.1rem); + transition: transform 150ms; +} + +.btn[disabled]:hover { + cursor: not-allowed; + box-shadow: none; + transform: none; +} + +/* FORMS */ +form { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; +} + +input { + margin-bottom: 1rem; + width: 20rem; + padding: 1.5rem; + font-size: 1.8rem; + border: none; + box-shadow: 0 0.1rem 1.4rem 0 rgba(86, 185, 235, 0.5); +} + +input::placeholder { + color: #aaa; +} diff --git a/Final/end.html b/Final/end.html new file mode 100644 index 0000000..1ec5659 --- /dev/null +++ b/Final/end.html @@ -0,0 +1,37 @@ + + + + + + + Congrats! + + + +
+
+

+
+ + +
+ Play Again + Go Home +
+
+ + + diff --git a/Final/end.js b/Final/end.js new file mode 100644 index 0000000..284babd --- /dev/null +++ b/Final/end.js @@ -0,0 +1,30 @@ +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 MAX_HIGH_SCORES = 5; + +finalScore.innerText = mostRecentScore; + +username.addEventListener("keyup", () => { + saveScoreBtn.disabled = !username.value; +}); + +saveHighScore = e => { + console.log("clicked the save button!"); + e.preventDefault(); + + 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("/"); +}; diff --git a/Final/game.css b/Final/game.css new file mode 100644 index 0000000..9a80ecc --- /dev/null +++ b/Final/game.css @@ -0,0 +1,82 @@ +.choice-container { + display: flex; + margin-bottom: 0.5rem; + width: 100%; + font-size: 1.8rem; + border: 0.1rem solid rgb(86, 165, 235, 0.25); + background-color: white; +} + +.choice-container:hover { + cursor: pointer; + box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5); + transform: translateY(-0.1rem); + transition: transform 150ms; +} + +.choice-prefix { + padding: 1.5rem 2.5rem; + background-color: #56a5eb; + color: white; +} + +.choice-text { + padding: 1.5rem; + width: 100%; +} + +.correct { + background-color: #28a745; +} + +.incorrect { + background-color: #dc3545; +} + +/* HUD */ + +#hud { + display: flex; + justify-content: space-between; +} + +.hud-prefix { + text-align: center; + font-size: 2rem; +} + +.hud-main-text { + text-align: center; +} + +#progressBar { + width: 20rem; + height: 4rem; + border: 0.3rem solid #56a5eb; + margin-top: 1.5rem; +} + +#progressBarFull { + height: 3.4rem; + background-color: #56a5eb; + width: 0%; +} + +/* LOADER */ +#loader { + border: 1.6rem solid white; + border-radius: 50%; + border-top: 1.6rem solid #56a5eb; + width: 12rem; + height: 12rem; + animation: spin 2s linear infinite; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} diff --git a/Final/game.html b/Final/game.html new file mode 100644 index 0000000..039e272 --- /dev/null +++ b/Final/game.html @@ -0,0 +1,54 @@ + + + + + + + Quick Quiz - Play + + + + +
+
+ +
+ + + diff --git a/Final/game.js b/Final/game.js new file mode 100644 index 0000000..20afdd7 --- /dev/null +++ b/Final/game.js @@ -0,0 +1,132 @@ +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; +let questionCounter = 0; +let availableQuesions = []; + +let questions = []; + +//Replace HTML Entities with appropriate string +function unescapeHtml(safe) { + return safe.replace(/&/g, '&') + .replace(/</g, '<') + .replace(/>/g, '>') + .replace(/"/g, '"') + .replace(/“/g, '\“') + .replace(/”/g, '\”') + .replace(/‘/g, '\'') + .replace(/’/g, '\'') + .replace(/…/g, '…') + .replace(/‎/g, '') + .replace(/ó/g, 'ó') + .replace(/É/g, 'É') + .replace(/­/g, "-") + .replace(/'/g, "'"); +} + +fetch( + "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: unescapeHtml(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)] = unescapeHtml(choice); + }); + + return formattedQuestion; + }); + + 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"); +}; + +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; +}; + +choices.forEach(choice => { + choice.addEventListener("click", e => { + if (!acceptingAnswers) return; + + acceptingAnswers = false; + const selectedChoice = e.target; + const selectedAnswer = selectedChoice.dataset["number"]; + + const classToApply = + selectedAnswer == currentQuestion.answer ? "correct" : "incorrect"; + + if (classToApply === "correct") { + incrementScore(CORRECT_BONUS); + } + + selectedChoice.parentElement.classList.add(classToApply); + + setTimeout(() => { + selectedChoice.parentElement.classList.remove(classToApply); + getNewQuestion(); + }, 1000); + }); +}); + +incrementScore = num => { + score += num; + scoreText.innerText = score; +}; diff --git a/Final/highscores.css b/Final/highscores.css new file mode 100644 index 0000000..b69893d --- /dev/null +++ b/Final/highscores.css @@ -0,0 +1,14 @@ +#highScoresList { + list-style: none; + padding-left: 0; + margin-bottom: 4rem; +} + +.high-score { + font-size: 2.8rem; + margin-bottom: 0.5rem; +} + +.high-score:hover { + transform: scale(1.025); +} diff --git a/Final/highscores.html b/Final/highscores.html new file mode 100644 index 0000000..2f81ba8 --- /dev/null +++ b/Final/highscores.html @@ -0,0 +1,21 @@ + + + + + + + High Scores + + + + +
+
+

High Scores

+
    + Go Home +
    +
    + + + diff --git a/Final/highscores.js b/Final/highscores.js new file mode 100644 index 0000000..860feee --- /dev/null +++ b/Final/highscores.js @@ -0,0 +1,8 @@ +const highScoresList = document.getElementById("highScoresList"); +const highScores = JSON.parse(localStorage.getItem("highScores")) || []; + +highScoresList.innerHTML = highScores + .map(score => { + return `
  • ${score.name} - ${score.score}
    • `; + }) + .join(""); diff --git a/Final/index.html b/Final/index.html new file mode 100644 index 0000000..fb1c219 --- /dev/null +++ b/Final/index.html @@ -0,0 +1,19 @@ + + + + + + + Quick Quiz + + + +
    +
    +

    Quick Quiz

    + Play + High Scores +
    +
    + + diff --git a/Final/questions.json b/Final/questions.json new file mode 100644 index 0000000..6988ecd --- /dev/null +++ b/Final/questions.json @@ -0,0 +1,26 @@ +[ + { + "question": "Inside which HTML element do we put the JavaScript??", + "choice1": " - - diff --git a/Final/end.js b/Final/end.js deleted file mode 100644 index 284babd..0000000 --- a/Final/end.js +++ /dev/null @@ -1,30 +0,0 @@ -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 MAX_HIGH_SCORES = 5; - -finalScore.innerText = mostRecentScore; - -username.addEventListener("keyup", () => { - saveScoreBtn.disabled = !username.value; -}); - -saveHighScore = e => { - console.log("clicked the save button!"); - e.preventDefault(); - - 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("/"); -}; diff --git a/Final/game.css b/Final/game.css deleted file mode 100644 index 9a80ecc..0000000 --- a/Final/game.css +++ /dev/null @@ -1,82 +0,0 @@ -.choice-container { - display: flex; - margin-bottom: 0.5rem; - width: 100%; - font-size: 1.8rem; - border: 0.1rem solid rgb(86, 165, 235, 0.25); - background-color: white; -} - -.choice-container:hover { - cursor: pointer; - box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5); - transform: translateY(-0.1rem); - transition: transform 150ms; -} - -.choice-prefix { - padding: 1.5rem 2.5rem; - background-color: #56a5eb; - color: white; -} - -.choice-text { - padding: 1.5rem; - width: 100%; -} - -.correct { - background-color: #28a745; -} - -.incorrect { - background-color: #dc3545; -} - -/* HUD */ - -#hud { - display: flex; - justify-content: space-between; -} - -.hud-prefix { - text-align: center; - font-size: 2rem; -} - -.hud-main-text { - text-align: center; -} - -#progressBar { - width: 20rem; - height: 4rem; - border: 0.3rem solid #56a5eb; - margin-top: 1.5rem; -} - -#progressBarFull { - height: 3.4rem; - background-color: #56a5eb; - width: 0%; -} - -/* LOADER */ -#loader { - border: 1.6rem solid white; - border-radius: 50%; - border-top: 1.6rem solid #56a5eb; - width: 12rem; - height: 12rem; - animation: spin 2s linear infinite; -} - -@keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} diff --git a/Final/game.html b/Final/game.html deleted file mode 100644 index 039e272..0000000 --- a/Final/game.html +++ /dev/null @@ -1,54 +0,0 @@ - - - - - - - Quick Quiz - Play - - - - -
    -
    - -
    - - - diff --git a/Final/game.js b/Final/game.js deleted file mode 100644 index 20afdd7..0000000 --- a/Final/game.js +++ /dev/null @@ -1,132 +0,0 @@ -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; -let questionCounter = 0; -let availableQuesions = []; - -let questions = []; - -//Replace HTML Entities with appropriate string -function unescapeHtml(safe) { - return safe.replace(/&/g, '&') - .replace(/</g, '<') - .replace(/>/g, '>') - .replace(/"/g, '"') - .replace(/“/g, '\“') - .replace(/”/g, '\”') - .replace(/‘/g, '\'') - .replace(/’/g, '\'') - .replace(/…/g, '…') - .replace(/‎/g, '') - .replace(/ó/g, 'ó') - .replace(/É/g, 'É') - .replace(/­/g, "-") - .replace(/'/g, "'"); -} - -fetch( - "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: unescapeHtml(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)] = unescapeHtml(choice); - }); - - return formattedQuestion; - }); - - 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"); -}; - -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; -}; - -choices.forEach(choice => { - choice.addEventListener("click", e => { - if (!acceptingAnswers) return; - - acceptingAnswers = false; - const selectedChoice = e.target; - const selectedAnswer = selectedChoice.dataset["number"]; - - const classToApply = - selectedAnswer == currentQuestion.answer ? "correct" : "incorrect"; - - if (classToApply === "correct") { - incrementScore(CORRECT_BONUS); - } - - selectedChoice.parentElement.classList.add(classToApply); - - setTimeout(() => { - selectedChoice.parentElement.classList.remove(classToApply); - getNewQuestion(); - }, 1000); - }); -}); - -incrementScore = num => { - score += num; - scoreText.innerText = score; -}; diff --git a/Final/highscores.css b/Final/highscores.css deleted file mode 100644 index b69893d..0000000 --- a/Final/highscores.css +++ /dev/null @@ -1,14 +0,0 @@ -#highScoresList { - list-style: none; - padding-left: 0; - margin-bottom: 4rem; -} - -.high-score { - font-size: 2.8rem; - margin-bottom: 0.5rem; -} - -.high-score:hover { - transform: scale(1.025); -} diff --git a/Final/highscores.html b/Final/highscores.html deleted file mode 100644 index 2f81ba8..0000000 --- a/Final/highscores.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - High Scores - - - - -
    -
    -

    High Scores

    -
      - Go Home -
      -
      - - - diff --git a/Final/highscores.js b/Final/highscores.js deleted file mode 100644 index 860feee..0000000 --- a/Final/highscores.js +++ /dev/null @@ -1,8 +0,0 @@ -const highScoresList = document.getElementById("highScoresList"); -const highScores = JSON.parse(localStorage.getItem("highScores")) || []; - -highScoresList.innerHTML = highScores - .map(score => { - return `
    • ${score.name} - ${score.score}
      • `; - }) - .join(""); diff --git a/Final/index.html b/Final/index.html deleted file mode 100644 index fb1c219..0000000 --- a/Final/index.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - Quick Quiz - - - -
      -
      -

      Quick Quiz

      - Play - High Scores -
      -
      - - diff --git a/Final/questions.json b/Final/questions.json deleted file mode 100644 index 6988ecd..0000000 --- a/Final/questions.json +++ /dev/null @@ -1,26 +0,0 @@ -[ - { - "question": "Inside which HTML element do we put the JavaScript??", - "choice1": "