├── images
    └── cover.png
├── Quiz App Master
    ├── highscores.css
    ├── highscores.js
    ├── index.html
    ├── highscores.html
    ├── questions.json
    ├── end.js
    ├── end.html
    ├── game.css
    ├── game.html
    ├── app.css
    └── game.js
├── 12. Create a Spinning Loader
    ├── highscores.css
    ├── highscores.js
    ├── index.html
    ├── highscores.html
    ├── questions.json
    ├── end.js
    ├── end.html
    ├── game.css
    ├── game.html
    ├── app.css
    └── game.js
├── 10. Fetch Questions from Local JSON File
    ├── highscores.css
    ├── highscores.js
    ├── index.html
    ├── highscores.html
    ├── questions.json
    ├── end.js
    ├── end.html
    ├── game.css
    ├── game.html
    ├── app.css
    └── game.js
├── 11. Fetch API Questions from Open Trivia API
    ├── highscores.css
    ├── highscores.js
    ├── index.html
    ├── highscores.html
    ├── questions.json
    ├── end.js
    ├── end.html
    ├── game.css
    ├── game.html
    ├── app.css
    └── game.js
├── 9. Load and Display High Scores from Local Storage
    ├── highscores.css
    ├── highscores.js
    ├── index.html
    ├── highscores.html
    ├── end.js
    ├── end.html
    ├── game.css
    ├── game.html
    ├── app.css
    └── game.js
├── .vscode
    └── launch.json
├── 7. Create and Style the End Page
    ├── end.js
    ├── index.html
    ├── end.html
    ├── game.css
    ├── game.html
    ├── app.css
    └── game.js
├── 2. Create and Style the Game Page
    ├── game.css
    ├── index.html
    ├── game.html
    └── app.css
├── 3. Display Hard Coded Question and Answers
    ├── game.css
    ├── index.html
    ├── game.html
    ├── app.css
    └── game.js
├── 6. Create a Progress Bar
    ├── index.html
    ├── game.css
    ├── game.html
    ├── app.css
    └── game.js
├── 5. Create a Head's Up Display
    ├── index.html
    ├── game.css
    ├── game.html
    ├── app.css
    └── game.js
├── 8. Save High Scores in Local Storage
    ├── index.html
    ├── end.js
    ├── end.html
    ├── game.css
    ├── game.html
    ├── app.css
    └── game.js
├── 1. Create Home Page and Application Styling
    ├── index.html
    └── app.css
├── 4. Display Feedback for Correct and Incorrect Answers
    ├── index.html
    ├── game.css
    ├── game.html
    ├── app.css
    └── game.js
├── LICENSE
└── ReadMe.md


/images/cover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamesqquick/Build-A-Quiz-App-With-HTML-CSS-and-JavaScript/HEAD/images/cover.png


--------------------------------------------------------------------------------
/Quiz App Master/highscores.css:
--------------------------------------------------------------------------------
 1 | #highScoresList {
 2 |   list-style: none;
 3 |   padding-left: 0;
 4 |   margin-bottom: 4rem;
 5 | }
 6 | 
 7 | .high-score {
 8 |   font-size: 2.8rem;
 9 |   margin-bottom: 0.5rem;
10 | }
11 | 
12 | .high-score:hover {
13 |   transform: scale(1.025);
14 | }
15 | 


--------------------------------------------------------------------------------
/12. Create a Spinning Loader/highscores.css:
--------------------------------------------------------------------------------
 1 | #highScoresList {
 2 |   list-style: none;
 3 |   padding-left: 0;
 4 |   margin-bottom: 4rem;
 5 | }
 6 | 
 7 | .high-score {
 8 |   font-size: 2.8rem;
 9 |   margin-bottom: 0.5rem;
10 | }
11 | 
12 | .high-score:hover {
13 |   transform: scale(1.025);
14 | }
15 | 


--------------------------------------------------------------------------------
/10. Fetch Questions from Local JSON File/highscores.css:
--------------------------------------------------------------------------------
 1 | #highScoresList {
 2 |   list-style: none;
 3 |   padding-left: 0;
 4 |   margin-bottom: 4rem;
 5 | }
 6 | 
 7 | .high-score {
 8 |   font-size: 2.8rem;
 9 |   margin-bottom: 0.5rem;
10 | }
11 | 
12 | .high-score:hover {
13 |   transform: scale(1.025);
14 | }
15 | 


--------------------------------------------------------------------------------
/11. Fetch API Questions from Open Trivia API/highscores.css:
--------------------------------------------------------------------------------
 1 | #highScoresList {
 2 |   list-style: none;
 3 |   padding-left: 0;
 4 |   margin-bottom: 4rem;
 5 | }
 6 | 
 7 | .high-score {
 8 |   font-size: 2.8rem;
 9 |   margin-bottom: 0.5rem;
10 | }
11 | 
12 | .high-score:hover {
13 |   transform: scale(1.025);
14 | }
15 | 


--------------------------------------------------------------------------------
/9. Load and Display High Scores from Local Storage/highscores.css:
--------------------------------------------------------------------------------
 1 | #highScoresList {
 2 |   list-style: none;
 3 |   padding-left: 0;
 4 |   margin-bottom: 4rem;
 5 | }
 6 | 
 7 | .high-score {
 8 |   font-size: 2.8rem;
 9 |   margin-bottom: 0.5rem;
10 | }
11 | 
12 | .high-score:hover {
13 |   transform: scale(1.025);
14 | }
15 | 


--------------------------------------------------------------------------------
/Quiz App Master/highscores.js:
--------------------------------------------------------------------------------
1 | const highScoresList = document.getElementById("highScoresList");
2 | const highScores = JSON.parse(localStorage.getItem("highScores")) || [];
3 | 
4 | highScoresList.innerHTML = highScores
5 |   .map(score => {
6 |     return `<li class="high-score">${score.name} - ${score.score}</li>`;
7 |   })
8 |   .join("");
9 | 


--------------------------------------------------------------------------------
/12. Create a Spinning Loader/highscores.js:
--------------------------------------------------------------------------------
1 | const highScoresList = document.getElementById("highScoresList");
2 | const highScores = JSON.parse(localStorage.getItem("highScores")) || [];
3 | 
4 | highScoresList.innerHTML = highScores
5 |   .map(score => {
6 |     return `<li class="high-score">${score.name} - ${score.score}</li>`;
7 |   })
8 |   .join("");
9 | 


--------------------------------------------------------------------------------
/10. Fetch Questions from Local JSON File/highscores.js:
--------------------------------------------------------------------------------
1 | const highScoresList = document.getElementById("highScoresList");
2 | const highScores = JSON.parse(localStorage.getItem("highScores")) || [];
3 | 
4 | highScoresList.innerHTML = highScores
5 |   .map(score => {
6 |     return `<li class="high-score">${score.name} - ${score.score}</li>`;
7 |   })
8 |   .join("");
9 | 


--------------------------------------------------------------------------------
/11. Fetch API Questions from Open Trivia API/highscores.js:
--------------------------------------------------------------------------------
1 | const highScoresList = document.getElementById("highScoresList");
2 | const highScores = JSON.parse(localStorage.getItem("highScores")) || [];
3 | 
4 | highScoresList.innerHTML = highScores
5 |   .map(score => {
6 |     return `<li class="high-score">${score.name} - ${score.score}</li>`;
7 |   })
8 |   .join("");
9 | 


--------------------------------------------------------------------------------
/9. Load and Display High Scores from Local Storage/highscores.js:
--------------------------------------------------------------------------------
1 | const highScoresList = document.getElementById("highScoresList");
2 | const highScores = JSON.parse(localStorage.getItem("highScores")) || [];
3 | 
4 | highScoresList.innerHTML = highScores
5 |   .map(score => {
6 |     return `<li class="high-score">${score.name} - ${score.score}</li>`;
7 |   })
8 |   .join("");
9 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // Use IntelliSense to learn about possible attributes.
 3 |   // Hover to view descriptions of existing attributes.
 4 |   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 5 |   "version": "0.2.0",
 6 |   "configurations": [
 7 |     {
 8 |       "type": "chrome",
 9 |       "request": "launch",
10 |       "name": "Launch Chrome against localhost",
11 |       "url": "http://localhost:5500",
12 |       "webRoot": "${workspaceFolder}"
13 |     }
14 |   ]
15 | }
16 | 


--------------------------------------------------------------------------------
/7. Create and Style the End Page/end.js:
--------------------------------------------------------------------------------
 1 | const username = document.getElementById('username');
 2 | const saveScoreBtn = document.getElementById('saveScoreBtn');
 3 | const finalScore = document.getElementById('finalScore');
 4 | const mostRecentScore = localStorage.getItem('mostRecentScore');
 5 | finalScore.innerText = mostRecentScore;
 6 | 
 7 | username.addEventListener('keyup', () => {
 8 |     saveScoreBtn.disabled = !username.value;
 9 | });
10 | 
11 | saveHighScore = (e) => {
12 |     e.preventDefault();
13 | };
14 | 


--------------------------------------------------------------------------------
/2. Create and Style the Game Page/game.css:
--------------------------------------------------------------------------------
 1 | .choice-container {
 2 |   display: flex;
 3 |   margin-bottom: 0.5rem;
 4 |   width: 100%;
 5 |   font-size: 1.8rem;
 6 |   border: 0.1rem solid rgb(86, 165, 235, 0.25);
 7 |   background-color: white;
 8 | }
 9 | 
10 | .choice-container:hover {
11 |   cursor: pointer;
12 |   box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
13 |   transform: translateY(-0.1rem);
14 |   transition: transform 150ms;
15 | }
16 | 
17 | .choice-prefix {
18 |   padding: 1.5rem 2.5rem;
19 |   background-color: #56a5eb;
20 |   color: white;
21 | }
22 | 
23 | .choice-text {
24 |   padding: 1.5rem;
25 | }
26 | 


--------------------------------------------------------------------------------
/3. Display Hard Coded Question and Answers/game.css:
--------------------------------------------------------------------------------
 1 | .choice-container {
 2 |   display: flex;
 3 |   margin-bottom: 0.5rem;
 4 |   width: 100%;
 5 |   font-size: 1.8rem;
 6 |   border: 0.1rem solid rgb(86, 165, 235, 0.25);
 7 |   background-color: white;
 8 | }
 9 | 
10 | .choice-container:hover {
11 |   cursor: pointer;
12 |   box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
13 |   transform: translateY(-0.1rem);
14 |   transition: transform 150ms;
15 | }
16 | 
17 | .choice-prefix {
18 |   padding: 1.5rem 2.5rem;
19 |   background-color: #56a5eb;
20 |   color: white;
21 | }
22 | 
23 | .choice-text {
24 |   padding: 1.5rem;
25 |   width: 100%;
26 | }
27 | 


--------------------------------------------------------------------------------
/Quiz App Master/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Quick Quiz</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <div id="home" class="flex-center flex-column">
13 |         <h1>Quick Quiz</h1>
14 |         <a class="btn" href="/game.html">Play</a>
15 |         <a class="btn" href="/highscores.html">High Scores</a>
16 |       </div>
17 |     </div>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/6. Create a Progress Bar/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Quick Quiz</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <div id="home" class="flex-center flex-column">
13 |         <h1>Quick Quiz</h1>
14 |         <a class="btn" href="/game.html">Play</a>
15 |         <a class="btn" href="/highscores.html">High Scores</a>
16 |       </div>
17 |     </div>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/12. Create a Spinning Loader/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Quick Quiz</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <div id="home" class="flex-center flex-column">
13 |         <h1>Quick Quiz</h1>
14 |         <a class="btn" href="/game.html">Play</a>
15 |         <a class="btn" href="/highscores.html">High Scores</a>
16 |       </div>
17 |     </div>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/5. Create a Head's Up Display/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Quick Quiz</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <div id="home" class="flex-center flex-column">
13 |         <h1>Quick Quiz</h1>
14 |         <a class="btn" href="/game.html">Play</a>
15 |         <a class="btn" href="/highscores.html">High Scores</a>
16 |       </div>
17 |     </div>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/2. Create and Style the Game Page/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Quick Quiz</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <div id="home" class="flex-center flex-column">
13 |         <h1>Quick Quiz</h1>
14 |         <a class="btn" href="/game.html">Play</a>
15 |         <a class="btn" href="/highscores.html">High Scores</a>
16 |       </div>
17 |     </div>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/7. Create and Style the End Page/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Quick Quiz</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <div id="home" class="flex-center flex-column">
13 |         <h1>Quick Quiz</h1>
14 |         <a class="btn" href="/game.html">Play</a>
15 |         <a class="btn" href="/highscores.html">High Scores</a>
16 |       </div>
17 |     </div>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/8. Save High Scores in Local Storage/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Quick Quiz</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <div id="home" class="flex-center flex-column">
13 |         <h1>Quick Quiz</h1>
14 |         <a class="btn" href="/game.html">Play</a>
15 |         <a class="btn" href="/highscores.html">High Scores</a>
16 |       </div>
17 |     </div>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/1. Create Home Page and Application Styling/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Quick Quiz</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <div id="home" class="flex-center flex-column">
13 |         <h1>Quick Quiz</h1>
14 |         <a class="btn" href="/game.html">Play</a>
15 |         <a class="btn" href="/highscores.html">High Scores</a>
16 |       </div>
17 |     </div>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/10. Fetch Questions from Local JSON File/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Quick Quiz</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <div id="home" class="flex-center flex-column">
13 |         <h1>Quick Quiz</h1>
14 |         <a class="btn" href="/game.html">Play</a>
15 |         <a class="btn" href="/highscores.html">High Scores</a>
16 |       </div>
17 |     </div>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/11. Fetch API Questions from Open Trivia API/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Quick Quiz</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <div id="home" class="flex-center flex-column">
13 |         <h1>Quick Quiz</h1>
14 |         <a class="btn" href="/game.html">Play</a>
15 |         <a class="btn" href="/highscores.html">High Scores</a>
16 |       </div>
17 |     </div>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/3. Display Hard Coded Question and Answers/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Quick Quiz</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <div id="home" class="flex-center flex-column">
13 |         <h1>Quick Quiz</h1>
14 |         <a class="btn" href="/game.html">Play</a>
15 |         <a class="btn" href="/highscores.html">High Scores</a>
16 |       </div>
17 |     </div>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/4. Display Feedback for Correct and Incorrect Answers/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Quick Quiz</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <div id="home" class="flex-center flex-column">
13 |         <h1>Quick Quiz</h1>
14 |         <a class="btn" href="/game.html">Play</a>
15 |         <a class="btn" href="/highscores.html">High Scores</a>
16 |       </div>
17 |     </div>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/9. Load and Display High Scores from Local Storage/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Quick Quiz</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <div id="home" class="flex-center flex-column">
13 |         <h1>Quick Quiz</h1>
14 |         <a class="btn" href="/game.html">Play</a>
15 |         <a class="btn" href="/highscores.html">High Scores</a>
16 |       </div>
17 |     </div>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Quiz App Master/highscores.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>High Scores</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |     <link rel="stylesheet" href="highscores.css" />
10 |   </head>
11 |   <body>
12 |     <div class="container">
13 |       <div id="highScores" class="flex-center flex-column">
14 |         <h1 id="finalScore">High Scores</h1>
15 |         <ul id="highScoresList"></ul>
16 |         <a class="btn" href="/">Go Home</a>
17 |       </div>
18 |     </div>
19 |     <script src="highscores.js"></script>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/12. Create a Spinning Loader/highscores.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>High Scores</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |     <link rel="stylesheet" href="highscores.css" />
10 |   </head>
11 |   <body>
12 |     <div class="container">
13 |       <div id="highScores" class="flex-center flex-column">
14 |         <h1 id="finalScore">High Scores</h1>
15 |         <ul id="highScoresList"></ul>
16 |         <a class="btn" href="/">Go Home</a>
17 |       </div>
18 |     </div>
19 |     <script src="highscores.js"></script>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/4. Display Feedback for Correct and Incorrect Answers/game.css:
--------------------------------------------------------------------------------
 1 | .choice-container {
 2 |   display: flex;
 3 |   margin-bottom: 0.5rem;
 4 |   width: 100%;
 5 |   font-size: 1.8rem;
 6 |   border: 0.1rem solid rgb(86, 165, 235, 0.25);
 7 |   background-color: white;
 8 | }
 9 | 
10 | .choice-container:hover {
11 |   cursor: pointer;
12 |   box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
13 |   transform: translateY(-0.1rem);
14 |   transition: transform 150ms;
15 | }
16 | 
17 | .choice-prefix {
18 |   padding: 1.5rem 2.5rem;
19 |   background-color: #56a5eb;
20 |   color: white;
21 | }
22 | 
23 | .choice-text {
24 |   padding: 1.5rem;
25 |   width: 100%;
26 | }
27 | 
28 | .correct {
29 |   background-color: #28a745;
30 | }
31 | 
32 | .incorrect {
33 |   background-color: #dc3545;
34 | }
35 | 


--------------------------------------------------------------------------------
/10. Fetch Questions from Local JSON File/highscores.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>High Scores</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |     <link rel="stylesheet" href="highscores.css" />
10 |   </head>
11 |   <body>
12 |     <div class="container">
13 |       <div id="highScores" class="flex-center flex-column">
14 |         <h1 id="finalScore">High Scores</h1>
15 |         <ul id="highScoresList"></ul>
16 |         <a class="btn" href="/">Go Home</a>
17 |       </div>
18 |     </div>
19 |     <script src="highscores.js"></script>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/11. Fetch API Questions from Open Trivia API/highscores.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>High Scores</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |     <link rel="stylesheet" href="highscores.css" />
10 |   </head>
11 |   <body>
12 |     <div class="container">
13 |       <div id="highScores" class="flex-center flex-column">
14 |         <h1 id="finalScore">High Scores</h1>
15 |         <ul id="highScoresList"></ul>
16 |         <a class="btn" href="/">Go Home</a>
17 |       </div>
18 |     </div>
19 |     <script src="highscores.js"></script>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/9. Load and Display High Scores from Local Storage/highscores.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>High Scores</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |     <link rel="stylesheet" href="highscores.css" />
10 |   </head>
11 |   <body>
12 |     <div class="container">
13 |       <div id="highScores" class="flex-center flex-column">
14 |         <h1 id="finalScore">High Scores</h1>
15 |         <ul id="highScoresList"></ul>
16 |         <a class="btn" href="/">Go Home</a>
17 |       </div>
18 |     </div>
19 |     <script src="highscores.js"></script>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/Quiz App Master/questions.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "question": "Inside which HTML element do we put the JavaScript??",
 4 |     "choice1": "<script>",
 5 |     "choice2": "<javascript>",
 6 |     "choice3": "<js>",
 7 |     "choice4": "<scripting>",
 8 |     "answer": 1
 9 |   },
10 |   {
11 |     "question": "What is the correct syntax for referring to an external script called 'xxx.js'?",
12 |     "choice1": "<script href='xxx.js'>",
13 |     "choice2": "<script name='xxx.js'>",
14 |     "choice3": "<script src='xxx.js'>",
15 |     "choice4": "<script file='xxx.js'>",
16 |     "answer": 3
17 |   },
18 |   {
19 |     "question": " How do you write 'Hello World' in an alert box?",
20 |     "choice1": "msgBox('Hello World');",
21 |     "choice2": "alertBox('Hello World');",
22 |     "choice3": "msg('Hello World');",
23 |     "choice4": "alert('Hello World');",
24 |     "answer": 4
25 |   }
26 | ]
27 | 


--------------------------------------------------------------------------------
/12. Create a Spinning Loader/questions.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "question": "Inside which HTML element do we put the JavaScript??",
 4 |     "choice1": "<script>",
 5 |     "choice2": "<javascript>",
 6 |     "choice3": "<js>",
 7 |     "choice4": "<scripting>",
 8 |     "answer": 1
 9 |   },
10 |   {
11 |     "question": "What is the correct syntax for referring to an external script called 'xxx.js'?",
12 |     "choice1": "<script href='xxx.js'>",
13 |     "choice2": "<script name='xxx.js'>",
14 |     "choice3": "<script src='xxx.js'>",
15 |     "choice4": "<script file='xxx.js'>",
16 |     "answer": 3
17 |   },
18 |   {
19 |     "question": " How do you write 'Hello World' in an alert box?",
20 |     "choice1": "msgBox('Hello World');",
21 |     "choice2": "alertBox('Hello World');",
22 |     "choice3": "msg('Hello World');",
23 |     "choice4": "alert('Hello World');",
24 |     "answer": 4
25 |   }
26 | ]
27 | 


--------------------------------------------------------------------------------
/10. Fetch Questions from Local JSON File/questions.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "question": "Inside which HTML element do we put the JavaScript??",
 4 |     "choice1": "<script>",
 5 |     "choice2": "<javascript>",
 6 |     "choice3": "<js>",
 7 |     "choice4": "<scripting>",
 8 |     "answer": 1
 9 |   },
10 |   {
11 |     "question": "What is the correct syntax for referring to an external script called 'xxx.js'?",
12 |     "choice1": "<script href='xxx.js'>",
13 |     "choice2": "<script name='xxx.js'>",
14 |     "choice3": "<script src='xxx.js'>",
15 |     "choice4": "<script file='xxx.js'>",
16 |     "answer": 3
17 |   },
18 |   {
19 |     "question": " How do you write 'Hello World' in an alert box?",
20 |     "choice1": "msgBox('Hello World');",
21 |     "choice2": "alertBox('Hello World');",
22 |     "choice3": "msg('Hello World');",
23 |     "choice4": "alert('Hello World');",
24 |     "answer": 4
25 |   }
26 | ]
27 | 


--------------------------------------------------------------------------------
/11. Fetch API Questions from Open Trivia API/questions.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "question": "Inside which HTML element do we put the JavaScript??",
 4 |     "choice1": "<script>",
 5 |     "choice2": "<javascript>",
 6 |     "choice3": "<js>",
 7 |     "choice4": "<scripting>",
 8 |     "answer": 1
 9 |   },
10 |   {
11 |     "question": "What is the correct syntax for referring to an external script called 'xxx.js'?",
12 |     "choice1": "<script href='xxx.js'>",
13 |     "choice2": "<script name='xxx.js'>",
14 |     "choice3": "<script src='xxx.js'>",
15 |     "choice4": "<script file='xxx.js'>",
16 |     "answer": 3
17 |   },
18 |   {
19 |     "question": " How do you write 'Hello World' in an alert box?",
20 |     "choice1": "msgBox('Hello World');",
21 |     "choice2": "alertBox('Hello World');",
22 |     "choice3": "msg('Hello World');",
23 |     "choice4": "alert('Hello World');",
24 |     "answer": 4
25 |   }
26 | ]
27 | 


--------------------------------------------------------------------------------
/Quiz App Master/end.js:
--------------------------------------------------------------------------------
 1 | const username = document.getElementById('username');
 2 | const saveScoreBtn = document.getElementById('saveScoreBtn');
 3 | const finalScore = document.getElementById('finalScore');
 4 | const mostRecentScore = localStorage.getItem('mostRecentScore');
 5 | 
 6 | const highScores = JSON.parse(localStorage.getItem('highScores')) || [];
 7 | 
 8 | const MAX_HIGH_SCORES = 5;
 9 | 
10 | finalScore.innerText = mostRecentScore;
11 | 
12 | username.addEventListener('keyup', () => {
13 |     saveScoreBtn.disabled = !username.value;
14 | });
15 | 
16 | saveHighScore = (e) => {
17 |     e.preventDefault();
18 | 
19 |     const score = {
20 |         score: mostRecentScore,
21 |         name: username.value,
22 |     };
23 |     highScores.push(score);
24 |     highScores.sort((a, b) => b.score - a.score);
25 |     highScores.splice(5);
26 | 
27 |     localStorage.setItem('highScores', JSON.stringify(highScores));
28 |     window.location.assign('/');
29 | };
30 | 


--------------------------------------------------------------------------------
/12. Create a Spinning Loader/end.js:
--------------------------------------------------------------------------------
 1 | const username = document.getElementById('username');
 2 | const saveScoreBtn = document.getElementById('saveScoreBtn');
 3 | const finalScore = document.getElementById('finalScore');
 4 | const mostRecentScore = localStorage.getItem('mostRecentScore');
 5 | 
 6 | const highScores = JSON.parse(localStorage.getItem('highScores')) || [];
 7 | 
 8 | const MAX_HIGH_SCORES = 5;
 9 | 
10 | finalScore.innerText = mostRecentScore;
11 | 
12 | username.addEventListener('keyup', () => {
13 |     saveScoreBtn.disabled = !username.value;
14 | });
15 | 
16 | saveHighScore = (e) => {
17 |     e.preventDefault();
18 | 
19 |     const score = {
20 |         score: mostRecentScore,
21 |         name: username.value,
22 |     };
23 |     highScores.push(score);
24 |     highScores.sort((a, b) => b.score - a.score);
25 |     highScores.splice(5);
26 | 
27 |     localStorage.setItem('highScores', JSON.stringify(highScores));
28 |     window.location.assign('/');
29 | };
30 | 


--------------------------------------------------------------------------------
/8. Save High Scores in Local Storage/end.js:
--------------------------------------------------------------------------------
 1 | const username = document.getElementById('username');
 2 | const saveScoreBtn = document.getElementById('saveScoreBtn');
 3 | const finalScore = document.getElementById('finalScore');
 4 | const mostRecentScore = localStorage.getItem('mostRecentScore');
 5 | 
 6 | const highScores = JSON.parse(localStorage.getItem('highScores')) || [];
 7 | 
 8 | const MAX_HIGH_SCORES = 5;
 9 | 
10 | finalScore.innerText = mostRecentScore;
11 | 
12 | username.addEventListener('keyup', () => {
13 |     saveScoreBtn.disabled = !username.value;
14 | });
15 | 
16 | saveHighScore = (e) => {
17 |     e.preventDefault();
18 | 
19 |     const score = {
20 |         score: mostRecentScore,
21 |         name: username.value,
22 |     };
23 |     highScores.push(score);
24 |     highScores.sort((a, b) => b.score - a.score);
25 |     highScores.splice(5);
26 | 
27 |     localStorage.setItem('highScores', JSON.stringify(highScores));
28 |     window.location.assign('/');
29 | };
30 | 


--------------------------------------------------------------------------------
/10. Fetch Questions from Local JSON File/end.js:
--------------------------------------------------------------------------------
 1 | const username = document.getElementById('username');
 2 | const saveScoreBtn = document.getElementById('saveScoreBtn');
 3 | const finalScore = document.getElementById('finalScore');
 4 | const mostRecentScore = localStorage.getItem('mostRecentScore');
 5 | 
 6 | const highScores = JSON.parse(localStorage.getItem('highScores')) || [];
 7 | 
 8 | const MAX_HIGH_SCORES = 5;
 9 | 
10 | finalScore.innerText = mostRecentScore;
11 | 
12 | username.addEventListener('keyup', () => {
13 |     saveScoreBtn.disabled = !username.value;
14 | });
15 | 
16 | saveHighScore = (e) => {
17 |     e.preventDefault();
18 | 
19 |     const score = {
20 |         score: mostRecentScore,
21 |         name: username.value,
22 |     };
23 |     highScores.push(score);
24 |     highScores.sort((a, b) => b.score - a.score);
25 |     highScores.splice(5);
26 | 
27 |     localStorage.setItem('highScores', JSON.stringify(highScores));
28 |     window.location.assign('/');
29 | };
30 | 


--------------------------------------------------------------------------------
/11. Fetch API Questions from Open Trivia API/end.js:
--------------------------------------------------------------------------------
 1 | const username = document.getElementById('username');
 2 | const saveScoreBtn = document.getElementById('saveScoreBtn');
 3 | const finalScore = document.getElementById('finalScore');
 4 | const mostRecentScore = localStorage.getItem('mostRecentScore');
 5 | 
 6 | const highScores = JSON.parse(localStorage.getItem('highScores')) || [];
 7 | 
 8 | const MAX_HIGH_SCORES = 5;
 9 | 
10 | finalScore.innerText = mostRecentScore;
11 | 
12 | username.addEventListener('keyup', () => {
13 |     saveScoreBtn.disabled = !username.value;
14 | });
15 | 
16 | saveHighScore = (e) => {
17 |     e.preventDefault();
18 | 
19 |     const score = {
20 |         score: mostRecentScore,
21 |         name: username.value,
22 |     };
23 |     highScores.push(score);
24 |     highScores.sort((a, b) => b.score - a.score);
25 |     highScores.splice(5);
26 | 
27 |     localStorage.setItem('highScores', JSON.stringify(highScores));
28 |     window.location.assign('/');
29 | };
30 | 


--------------------------------------------------------------------------------
/9. Load and Display High Scores from Local Storage/end.js:
--------------------------------------------------------------------------------
 1 | const username = document.getElementById('username');
 2 | const saveScoreBtn = document.getElementById('saveScoreBtn');
 3 | const finalScore = document.getElementById('finalScore');
 4 | const mostRecentScore = localStorage.getItem('mostRecentScore');
 5 | 
 6 | const highScores = JSON.parse(localStorage.getItem('highScores')) || [];
 7 | 
 8 | const MAX_HIGH_SCORES = 5;
 9 | 
10 | finalScore.innerText = mostRecentScore;
11 | 
12 | username.addEventListener('keyup', () => {
13 |     saveScoreBtn.disabled = !username.value;
14 | });
15 | 
16 | saveHighScore = (e) => {
17 |     e.preventDefault();
18 | 
19 |     const score = {
20 |         score: mostRecentScore,
21 |         name: username.value,
22 |     };
23 |     highScores.push(score);
24 |     highScores.sort((a, b) => b.score - a.score);
25 |     highScores.splice(5);
26 | 
27 |     localStorage.setItem('highScores', JSON.stringify(highScores));
28 |     window.location.assign('/');
29 | };
30 | 


--------------------------------------------------------------------------------
/5. Create a Head's Up Display/game.css:
--------------------------------------------------------------------------------
 1 | .choice-container {
 2 |   display: flex;
 3 |   margin-bottom: 0.5rem;
 4 |   width: 100%;
 5 |   font-size: 1.8rem;
 6 |   border: 0.1rem solid rgb(86, 165, 235, 0.25);
 7 |   background-color: white;
 8 | }
 9 | 
10 | .choice-container:hover {
11 |   cursor: pointer;
12 |   box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
13 |   transform: translateY(-0.1rem);
14 |   transition: transform 150ms;
15 | }
16 | 
17 | .choice-prefix {
18 |   padding: 1.5rem 2.5rem;
19 |   background-color: #56a5eb;
20 |   color: white;
21 | }
22 | 
23 | .choice-text {
24 |   padding: 1.5rem;
25 |   width: 100%;
26 | }
27 | 
28 | .correct {
29 |   background-color: #28a745;
30 | }
31 | 
32 | .incorrect {
33 |   background-color: #dc3545;
34 | }
35 | 
36 | /* HUD */
37 | 
38 | #hud {
39 |   display: flex;
40 |   justify-content: space-between;
41 | }
42 | 
43 | .hud-prefix {
44 |   text-align: center;
45 |   font-size: 2rem;
46 | }
47 | 
48 | .hud-main-text {
49 |   text-align: center;
50 | }
51 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 James Q Quick
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/Quiz App Master/end.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Congrats!</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <div id="end" class="flex-center flex-column">
13 |         <h1 id="finalScore"></h1>
14 |         <form>
15 |           <input
16 |             type="text"
17 |             name="username"
18 |             id="username"
19 |             placeholder="username"
20 |           />
21 |           <button
22 |             type="submit"
23 |             class="btn"
24 |             id="saveScoreBtn"
25 |             onclick="saveHighScore(event)"
26 |             disabled
27 |           >
28 |             Save
29 |           </button>
30 |         </form>
31 |         <a class="btn" href="/game.html">Play Again</a>
32 |         <a class="btn" href="/">Go Home</a>
33 |       </div>
34 |     </div>
35 |     <script src="end.js"></script>
36 |   </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/12. Create a Spinning Loader/end.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Congrats!</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <div id="end" class="flex-center flex-column">
13 |         <h1 id="finalScore"></h1>
14 |         <form>
15 |           <input
16 |             type="text"
17 |             name="username"
18 |             id="username"
19 |             placeholder="username"
20 |           />
21 |           <button
22 |             type="submit"
23 |             class="btn"
24 |             id="saveScoreBtn"
25 |             onclick="saveHighScore(event)"
26 |             disabled
27 |           >
28 |             Save
29 |           </button>
30 |         </form>
31 |         <a class="btn" href="/game.html">Play Again</a>
32 |         <a class="btn" href="/">Go Home</a>
33 |       </div>
34 |     </div>
35 |     <script src="end.js"></script>
36 |   </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/7. Create and Style the End Page/end.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Congrats!</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <div id="end" class="flex-center flex-column">
13 |         <h1 id="finalScore"></h1>
14 |         <form>
15 |           <input
16 |             type="text"
17 |             name="username"
18 |             id="username"
19 |             placeholder="username"
20 |           />
21 |           <button
22 |             type="submit"
23 |             class="btn"
24 |             id="saveScoreBtn"
25 |             onclick="saveHighScore(event)"
26 |             disabled
27 |           >
28 |             Save
29 |           </button>
30 |         </form>
31 |         <a class="btn" href="/game.html">Play Again</a>
32 |         <a class="btn" href="/">Go Home</a>
33 |       </div>
34 |     </div>
35 |     <script src="end.js"></script>
36 |   </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/10. Fetch Questions from Local JSON File/end.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Congrats!</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <div id="end" class="flex-center flex-column">
13 |         <h1 id="finalScore"></h1>
14 |         <form>
15 |           <input
16 |             type="text"
17 |             name="username"
18 |             id="username"
19 |             placeholder="username"
20 |           />
21 |           <button
22 |             type="submit"
23 |             class="btn"
24 |             id="saveScoreBtn"
25 |             onclick="saveHighScore(event)"
26 |             disabled
27 |           >
28 |             Save
29 |           </button>
30 |         </form>
31 |         <a class="btn" href="/game.html">Play Again</a>
32 |         <a class="btn" href="/">Go Home</a>
33 |       </div>
34 |     </div>
35 |     <script src="end.js"></script>
36 |   </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/8. Save High Scores in Local Storage/end.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Congrats!</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <div id="end" class="flex-center flex-column">
13 |         <h1 id="finalScore"></h1>
14 |         <form>
15 |           <input
16 |             type="text"
17 |             name="username"
18 |             id="username"
19 |             placeholder="username"
20 |           />
21 |           <button
22 |             type="submit"
23 |             class="btn"
24 |             id="saveScoreBtn"
25 |             onclick="saveHighScore(event)"
26 |             disabled
27 |           >
28 |             Save
29 |           </button>
30 |         </form>
31 |         <a class="btn" href="/game.html">Play Again</a>
32 |         <a class="btn" href="/">Go Home</a>
33 |       </div>
34 |     </div>
35 |     <script src="end.js"></script>
36 |   </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/11. Fetch API Questions from Open Trivia API/end.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Congrats!</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <div id="end" class="flex-center flex-column">
13 |         <h1 id="finalScore"></h1>
14 |         <form>
15 |           <input
16 |             type="text"
17 |             name="username"
18 |             id="username"
19 |             placeholder="username"
20 |           />
21 |           <button
22 |             type="submit"
23 |             class="btn"
24 |             id="saveScoreBtn"
25 |             onclick="saveHighScore(event)"
26 |             disabled
27 |           >
28 |             Save
29 |           </button>
30 |         </form>
31 |         <a class="btn" href="/game.html">Play Again</a>
32 |         <a class="btn" href="/">Go Home</a>
33 |       </div>
34 |     </div>
35 |     <script src="end.js"></script>
36 |   </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/9. Load and Display High Scores from Local Storage/end.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Congrats!</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <div id="end" class="flex-center flex-column">
13 |         <h1 id="finalScore"></h1>
14 |         <form>
15 |           <input
16 |             type="text"
17 |             name="username"
18 |             id="username"
19 |             placeholder="username"
20 |           />
21 |           <button
22 |             type="submit"
23 |             class="btn"
24 |             id="saveScoreBtn"
25 |             onclick="saveHighScore(event)"
26 |             disabled
27 |           >
28 |             Save
29 |           </button>
30 |         </form>
31 |         <a class="btn" href="/game.html">Play Again</a>
32 |         <a class="btn" href="/">Go Home</a>
33 |       </div>
34 |     </div>
35 |     <script src="end.js"></script>
36 |   </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/6. Create a Progress Bar/game.css:
--------------------------------------------------------------------------------
 1 | .choice-container {
 2 |   display: flex;
 3 |   margin-bottom: 0.5rem;
 4 |   width: 100%;
 5 |   font-size: 1.8rem;
 6 |   border: 0.1rem solid rgb(86, 165, 235, 0.25);
 7 |   background-color: white;
 8 | }
 9 | 
10 | .choice-container:hover {
11 |   cursor: pointer;
12 |   box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
13 |   transform: translateY(-0.1rem);
14 |   transition: transform 150ms;
15 | }
16 | 
17 | .choice-prefix {
18 |   padding: 1.5rem 2.5rem;
19 |   background-color: #56a5eb;
20 |   color: white;
21 | }
22 | 
23 | .choice-text {
24 |   padding: 1.5rem;
25 |   width: 100%;
26 | }
27 | 
28 | .correct {
29 |   background-color: #28a745;
30 | }
31 | 
32 | .incorrect {
33 |   background-color: #dc3545;
34 | }
35 | 
36 | /* HUD */
37 | 
38 | #hud {
39 |   display: flex;
40 |   justify-content: space-between;
41 | }
42 | 
43 | .hud-prefix {
44 |   text-align: center;
45 |   font-size: 2rem;
46 | }
47 | 
48 | .hud-main-text {
49 |   text-align: center;
50 | }
51 | 
52 | #progressBar {
53 |   width: 20rem;
54 |   height: 4rem;
55 |   border: 0.3rem solid #56a5eb;
56 |   margin-top: 1.5rem;
57 | }
58 | 
59 | #progressBarFull {
60 |   height: 3.4rem;
61 |   background-color: #56a5eb;
62 |   width: 0%;
63 | }
64 | 


--------------------------------------------------------------------------------
/7. Create and Style the End Page/game.css:
--------------------------------------------------------------------------------
 1 | .choice-container {
 2 |   display: flex;
 3 |   margin-bottom: 0.5rem;
 4 |   width: 100%;
 5 |   font-size: 1.8rem;
 6 |   border: 0.1rem solid rgb(86, 165, 235, 0.25);
 7 |   background-color: white;
 8 | }
 9 | 
10 | .choice-container:hover {
11 |   cursor: pointer;
12 |   box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
13 |   transform: translateY(-0.1rem);
14 |   transition: transform 150ms;
15 | }
16 | 
17 | .choice-prefix {
18 |   padding: 1.5rem 2.5rem;
19 |   background-color: #56a5eb;
20 |   color: white;
21 | }
22 | 
23 | .choice-text {
24 |   padding: 1.5rem;
25 |   width: 100%;
26 | }
27 | 
28 | .correct {
29 |   background-color: #28a745;
30 | }
31 | 
32 | .incorrect {
33 |   background-color: #dc3545;
34 | }
35 | 
36 | /* HUD */
37 | 
38 | #hud {
39 |   display: flex;
40 |   justify-content: space-between;
41 | }
42 | 
43 | .hud-prefix {
44 |   text-align: center;
45 |   font-size: 2rem;
46 | }
47 | 
48 | .hud-main-text {
49 |   text-align: center;
50 | }
51 | 
52 | #progressBar {
53 |   width: 20rem;
54 |   height: 4rem;
55 |   border: 0.3rem solid #56a5eb;
56 |   margin-top: 1.5rem;
57 | }
58 | 
59 | #progressBarFull {
60 |   height: 3.4rem;
61 |   background-color: #56a5eb;
62 |   width: 0%;
63 | }
64 | 


--------------------------------------------------------------------------------
/8. Save High Scores in Local Storage/game.css:
--------------------------------------------------------------------------------
 1 | .choice-container {
 2 |   display: flex;
 3 |   margin-bottom: 0.5rem;
 4 |   width: 100%;
 5 |   font-size: 1.8rem;
 6 |   border: 0.1rem solid rgb(86, 165, 235, 0.25);
 7 |   background-color: white;
 8 | }
 9 | 
10 | .choice-container:hover {
11 |   cursor: pointer;
12 |   box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
13 |   transform: translateY(-0.1rem);
14 |   transition: transform 150ms;
15 | }
16 | 
17 | .choice-prefix {
18 |   padding: 1.5rem 2.5rem;
19 |   background-color: #56a5eb;
20 |   color: white;
21 | }
22 | 
23 | .choice-text {
24 |   padding: 1.5rem;
25 |   width: 100%;
26 | }
27 | 
28 | .correct {
29 |   background-color: #28a745;
30 | }
31 | 
32 | .incorrect {
33 |   background-color: #dc3545;
34 | }
35 | 
36 | /* HUD */
37 | 
38 | #hud {
39 |   display: flex;
40 |   justify-content: space-between;
41 | }
42 | 
43 | .hud-prefix {
44 |   text-align: center;
45 |   font-size: 2rem;
46 | }
47 | 
48 | .hud-main-text {
49 |   text-align: center;
50 | }
51 | 
52 | #progressBar {
53 |   width: 20rem;
54 |   height: 4rem;
55 |   border: 0.3rem solid #56a5eb;
56 |   margin-top: 1.5rem;
57 | }
58 | 
59 | #progressBarFull {
60 |   height: 3.4rem;
61 |   background-color: #56a5eb;
62 |   width: 0%;
63 | }
64 | 


--------------------------------------------------------------------------------
/10. Fetch Questions from Local JSON File/game.css:
--------------------------------------------------------------------------------
 1 | .choice-container {
 2 |   display: flex;
 3 |   margin-bottom: 0.5rem;
 4 |   width: 100%;
 5 |   font-size: 1.8rem;
 6 |   border: 0.1rem solid rgb(86, 165, 235, 0.25);
 7 |   background-color: white;
 8 | }
 9 | 
10 | .choice-container:hover {
11 |   cursor: pointer;
12 |   box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
13 |   transform: translateY(-0.1rem);
14 |   transition: transform 150ms;
15 | }
16 | 
17 | .choice-prefix {
18 |   padding: 1.5rem 2.5rem;
19 |   background-color: #56a5eb;
20 |   color: white;
21 | }
22 | 
23 | .choice-text {
24 |   padding: 1.5rem;
25 |   width: 100%;
26 | }
27 | 
28 | .correct {
29 |   background-color: #28a745;
30 | }
31 | 
32 | .incorrect {
33 |   background-color: #dc3545;
34 | }
35 | 
36 | /* HUD */
37 | 
38 | #hud {
39 |   display: flex;
40 |   justify-content: space-between;
41 | }
42 | 
43 | .hud-prefix {
44 |   text-align: center;
45 |   font-size: 2rem;
46 | }
47 | 
48 | .hud-main-text {
49 |   text-align: center;
50 | }
51 | 
52 | #progressBar {
53 |   width: 20rem;
54 |   height: 4rem;
55 |   border: 0.3rem solid #56a5eb;
56 |   margin-top: 1.5rem;
57 | }
58 | 
59 | #progressBarFull {
60 |   height: 3.4rem;
61 |   background-color: #56a5eb;
62 |   width: 0%;
63 | }
64 | 


--------------------------------------------------------------------------------
/11. Fetch API Questions from Open Trivia API/game.css:
--------------------------------------------------------------------------------
 1 | .choice-container {
 2 |   display: flex;
 3 |   margin-bottom: 0.5rem;
 4 |   width: 100%;
 5 |   font-size: 1.8rem;
 6 |   border: 0.1rem solid rgb(86, 165, 235, 0.25);
 7 |   background-color: white;
 8 | }
 9 | 
10 | .choice-container:hover {
11 |   cursor: pointer;
12 |   box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
13 |   transform: translateY(-0.1rem);
14 |   transition: transform 150ms;
15 | }
16 | 
17 | .choice-prefix {
18 |   padding: 1.5rem 2.5rem;
19 |   background-color: #56a5eb;
20 |   color: white;
21 | }
22 | 
23 | .choice-text {
24 |   padding: 1.5rem;
25 |   width: 100%;
26 | }
27 | 
28 | .correct {
29 |   background-color: #28a745;
30 | }
31 | 
32 | .incorrect {
33 |   background-color: #dc3545;
34 | }
35 | 
36 | /* HUD */
37 | 
38 | #hud {
39 |   display: flex;
40 |   justify-content: space-between;
41 | }
42 | 
43 | .hud-prefix {
44 |   text-align: center;
45 |   font-size: 2rem;
46 | }
47 | 
48 | .hud-main-text {
49 |   text-align: center;
50 | }
51 | 
52 | #progressBar {
53 |   width: 20rem;
54 |   height: 4rem;
55 |   border: 0.3rem solid #56a5eb;
56 |   margin-top: 1.5rem;
57 | }
58 | 
59 | #progressBarFull {
60 |   height: 3.4rem;
61 |   background-color: #56a5eb;
62 |   width: 0%;
63 | }
64 | 


--------------------------------------------------------------------------------
/9. Load and Display High Scores from Local Storage/game.css:
--------------------------------------------------------------------------------
 1 | .choice-container {
 2 |   display: flex;
 3 |   margin-bottom: 0.5rem;
 4 |   width: 100%;
 5 |   font-size: 1.8rem;
 6 |   border: 0.1rem solid rgb(86, 165, 235, 0.25);
 7 |   background-color: white;
 8 | }
 9 | 
10 | .choice-container:hover {
11 |   cursor: pointer;
12 |   box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
13 |   transform: translateY(-0.1rem);
14 |   transition: transform 150ms;
15 | }
16 | 
17 | .choice-prefix {
18 |   padding: 1.5rem 2.5rem;
19 |   background-color: #56a5eb;
20 |   color: white;
21 | }
22 | 
23 | .choice-text {
24 |   padding: 1.5rem;
25 |   width: 100%;
26 | }
27 | 
28 | .correct {
29 |   background-color: #28a745;
30 | }
31 | 
32 | .incorrect {
33 |   background-color: #dc3545;
34 | }
35 | 
36 | /* HUD */
37 | 
38 | #hud {
39 |   display: flex;
40 |   justify-content: space-between;
41 | }
42 | 
43 | .hud-prefix {
44 |   text-align: center;
45 |   font-size: 2rem;
46 | }
47 | 
48 | .hud-main-text {
49 |   text-align: center;
50 | }
51 | 
52 | #progressBar {
53 |   width: 20rem;
54 |   height: 4rem;
55 |   border: 0.3rem solid #56a5eb;
56 |   margin-top: 1.5rem;
57 | }
58 | 
59 | #progressBarFull {
60 |   height: 3.4rem;
61 |   background-color: #56a5eb;
62 |   width: 0%;
63 | }
64 | 


--------------------------------------------------------------------------------
/2. Create and Style the Game Page/game.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Quick Quiz - Play</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |     <link rel="stylesheet" href="game.css" />
10 |   </head>
11 |   <body>
12 |     <div class="container">
13 |       <div id="game" class="justify-center flex-column">
14 |         <h2 id="quesiton">What is the answer to this questions?</h2>
15 |         <div class="choice-container">
16 |           <p class="choice-prefix">A</p>
17 |           <p class="choice-text">Choice 1</p>
18 |         </div>
19 |         <div class="choice-container">
20 |           <p class="choice-prefix">B</p>
21 |           <p class="choice-text">Choice 2</p>
22 |         </div>
23 |         <div class="choice-container">
24 |           <p class="choice-prefix">C</p>
25 |           <p class="choice-text">Choice 3</p>
26 |         </div>
27 |         <div class="choice-container">
28 |           <p class="choice-prefix">D</p>
29 |           <p class="choice-text">Choice 4</p>
30 |         </div>
31 |       </div>
32 |     </div>
33 |   </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/3. Display Hard Coded Question and Answers/game.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Quick Quiz - Play</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |     <link rel="stylesheet" href="game.css" />
10 |   </head>
11 |   <body>
12 |     <div class="container">
13 |       <div id="game" class="justify-center flex-column">
14 |         <h2 id="question">What is the answer to this questions?</h2>
15 |         <div class="choice-container">
16 |           <p class="choice-prefix">A</p>
17 |           <p class="choice-text" data-number="1">Choice 1</p>
18 |         </div>
19 |         <div class="choice-container">
20 |           <p class="choice-prefix">B</p>
21 |           <p class="choice-text" data-number="2">Choice 2</p>
22 |         </div>
23 |         <div class="choice-container">
24 |           <p class="choice-prefix">C</p>
25 |           <p class="choice-text" data-number="3">Choice 3</p>
26 |         </div>
27 |         <div class="choice-container">
28 |           <p class="choice-prefix">D</p>
29 |           <p class="choice-text" data-number="4">Choice 4</p>
30 |         </div>
31 |       </div>
32 |     </div>
33 |     <script src="game.js"></script>
34 |   </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/4. Display Feedback for Correct and Incorrect Answers/game.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Quick Quiz - Play</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |     <link rel="stylesheet" href="game.css" />
10 |   </head>
11 |   <body>
12 |     <div class="container">
13 |       <div id="game" class="justify-center flex-column">
14 |         <h2 id="question">What is the answer to this questions?</h2>
15 |         <div class="choice-container">
16 |           <p class="choice-prefix">A</p>
17 |           <p class="choice-text" data-number="1">Choice 1</p>
18 |         </div>
19 |         <div class="choice-container">
20 |           <p class="choice-prefix">B</p>
21 |           <p class="choice-text" data-number="2">Choice 2</p>
22 |         </div>
23 |         <div class="choice-container">
24 |           <p class="choice-prefix">C</p>
25 |           <p class="choice-text" data-number="3">Choice 3</p>
26 |         </div>
27 |         <div class="choice-container">
28 |           <p class="choice-prefix">D</p>
29 |           <p class="choice-text" data-number="4">Choice 4</p>
30 |         </div>
31 |       </div>
32 |     </div>
33 |     <script src="game.js"></script>
34 |   </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/Quiz App Master/game.css:
--------------------------------------------------------------------------------
 1 | .choice-container {
 2 |   display: flex;
 3 |   margin-bottom: 0.5rem;
 4 |   width: 100%;
 5 |   font-size: 1.8rem;
 6 |   border: 0.1rem solid rgb(86, 165, 235, 0.25);
 7 |   background-color: white;
 8 | }
 9 | 
10 | .choice-container:hover {
11 |   cursor: pointer;
12 |   box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
13 |   transform: translateY(-0.1rem);
14 |   transition: transform 150ms;
15 | }
16 | 
17 | .choice-prefix {
18 |   padding: 1.5rem 2.5rem;
19 |   background-color: #56a5eb;
20 |   color: white;
21 | }
22 | 
23 | .choice-text {
24 |   padding: 1.5rem;
25 |   width: 100%;
26 | }
27 | 
28 | .correct {
29 |   background-color: #28a745;
30 | }
31 | 
32 | .incorrect {
33 |   background-color: #dc3545;
34 | }
35 | 
36 | /* HUD */
37 | 
38 | #hud {
39 |   display: flex;
40 |   justify-content: space-between;
41 | }
42 | 
43 | .hud-prefix {
44 |   text-align: center;
45 |   font-size: 2rem;
46 | }
47 | 
48 | .hud-main-text {
49 |   text-align: center;
50 | }
51 | 
52 | #progressBar {
53 |   width: 20rem;
54 |   height: 4rem;
55 |   border: 0.3rem solid #56a5eb;
56 |   margin-top: 1.5rem;
57 | }
58 | 
59 | #progressBarFull {
60 |   height: 3.4rem;
61 |   background-color: #56a5eb;
62 |   width: 0%;
63 | }
64 | 
65 | /* LOADER */
66 | #loader {
67 |   border: 1.6rem solid white;
68 |   border-radius: 50%;
69 |   border-top: 1.6rem solid #56a5eb;
70 |   width: 12rem;
71 |   height: 12rem;
72 |   animation: spin 2s linear infinite;
73 | }
74 | 
75 | @keyframes spin {
76 |   0% {
77 |     transform: rotate(0deg);
78 |   }
79 |   100% {
80 |     transform: rotate(360deg);
81 |   }
82 | }
83 | 


--------------------------------------------------------------------------------
/12. Create a Spinning Loader/game.css:
--------------------------------------------------------------------------------
 1 | .choice-container {
 2 |   display: flex;
 3 |   margin-bottom: 0.5rem;
 4 |   width: 100%;
 5 |   font-size: 1.8rem;
 6 |   border: 0.1rem solid rgb(86, 165, 235, 0.25);
 7 |   background-color: white;
 8 | }
 9 | 
10 | .choice-container:hover {
11 |   cursor: pointer;
12 |   box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
13 |   transform: translateY(-0.1rem);
14 |   transition: transform 150ms;
15 | }
16 | 
17 | .choice-prefix {
18 |   padding: 1.5rem 2.5rem;
19 |   background-color: #56a5eb;
20 |   color: white;
21 | }
22 | 
23 | .choice-text {
24 |   padding: 1.5rem;
25 |   width: 100%;
26 | }
27 | 
28 | .correct {
29 |   background-color: #28a745;
30 | }
31 | 
32 | .incorrect {
33 |   background-color: #dc3545;
34 | }
35 | 
36 | /* HUD */
37 | 
38 | #hud {
39 |   display: flex;
40 |   justify-content: space-between;
41 | }
42 | 
43 | .hud-prefix {
44 |   text-align: center;
45 |   font-size: 2rem;
46 | }
47 | 
48 | .hud-main-text {
49 |   text-align: center;
50 | }
51 | 
52 | #progressBar {
53 |   width: 20rem;
54 |   height: 4rem;
55 |   border: 0.3rem solid #56a5eb;
56 |   margin-top: 1.5rem;
57 | }
58 | 
59 | #progressBarFull {
60 |   height: 3.4rem;
61 |   background-color: #56a5eb;
62 |   width: 0%;
63 | }
64 | 
65 | /* LOADER */
66 | #loader {
67 |   border: 1.6rem solid white;
68 |   border-radius: 50%;
69 |   border-top: 1.6rem solid #56a5eb;
70 |   width: 12rem;
71 |   height: 12rem;
72 |   animation: spin 2s linear infinite;
73 | }
74 | 
75 | @keyframes spin {
76 |   0% {
77 |     transform: rotate(0deg);
78 |   }
79 |   100% {
80 |     transform: rotate(360deg);
81 |   }
82 | }
83 | 


--------------------------------------------------------------------------------
/5. Create a Head's Up Display/game.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Quick Quiz - Play</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |     <link rel="stylesheet" href="game.css" />
10 |   </head>
11 |   <body>
12 |     <div class="container">
13 |       <div id="game" class="justify-center flex-column">
14 |         <div id="hud">
15 |           <div id="hud-item">
16 |             <p class="hud-prefix">
17 |               Question
18 |             </p>
19 |             <h1 class="hud-main-text" id="questionCounter"></h1>
20 |           </div>
21 |           <div id="hud-item">
22 |             <p class="hud-prefix">
23 |               Score
24 |             </p>
25 |             <h1 class="hud-main-text" id="score">
26 |               0
27 |             </h1>
28 |           </div>
29 |         </div>
30 |         <h2 id="question">What is the answer to this questions?</h2>
31 |         <div class="choice-container">
32 |           <p class="choice-prefix">A</p>
33 |           <p class="choice-text" data-number="1">Choice 1</p>
34 |         </div>
35 |         <div class="choice-container">
36 |           <p class="choice-prefix">B</p>
37 |           <p class="choice-text" data-number="2">Choice 2</p>
38 |         </div>
39 |         <div class="choice-container">
40 |           <p class="choice-prefix">C</p>
41 |           <p class="choice-text" data-number="3">Choice 3</p>
42 |         </div>
43 |         <div class="choice-container">
44 |           <p class="choice-prefix">D</p>
45 |           <p class="choice-text" data-number="4">Choice 4</p>
46 |         </div>
47 |       </div>
48 |     </div>
49 |     <script src="game.js"></script>
50 |   </body>
51 | </html>
52 | 


--------------------------------------------------------------------------------
/Quiz App Master/game.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Quick Quiz - Play</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |     <link rel="stylesheet" href="game.css" />
10 |   </head>
11 |   <body>
12 |     <div class="container">
13 |       <div id="loader"></div>
14 |       <div id="game" class="justify-center flex-column hidden">
15 |         <div id="hud">
16 |           <div id="hud-item">
17 |             <p id="progressText" class="hud-prefix">
18 |               Question
19 |             </p>
20 |             <div id="progressBar">
21 |               <div id="progressBarFull"></div>
22 |             </div>
23 |           </div>
24 |           <div id="hud-item">
25 |             <p class="hud-prefix">
26 |               Score
27 |             </p>
28 |             <h1 class="hud-main-text" id="score">
29 |               0
30 |             </h1>
31 |           </div>
32 |         </div>
33 |         <h2 id="question"></h2>
34 |         <div class="choice-container">
35 |           <p class="choice-prefix">A</p>
36 |           <p class="choice-text" data-number="1"></p>
37 |         </div>
38 |         <div class="choice-container">
39 |           <p class="choice-prefix">B</p>
40 |           <p class="choice-text" data-number="2"></p>
41 |         </div>
42 |         <div class="choice-container">
43 |           <p class="choice-prefix">C</p>
44 |           <p class="choice-text" data-number="3"></p>
45 |         </div>
46 |         <div class="choice-container">
47 |           <p class="choice-prefix">D</p>
48 |           <p class="choice-text" data-number="4"></p>
49 |         </div>
50 |       </div>
51 |     </div>
52 |     <script src="game.js"></script>
53 |   </body>
54 | </html>
55 | 


--------------------------------------------------------------------------------
/12. Create a Spinning Loader/game.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Quick Quiz - Play</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |     <link rel="stylesheet" href="game.css" />
10 |   </head>
11 |   <body>
12 |     <div class="container">
13 |       <div id="loader"></div>
14 |       <div id="game" class="justify-center flex-column hidden">
15 |         <div id="hud">
16 |           <div id="hud-item">
17 |             <p id="progressText" class="hud-prefix">
18 |               Question
19 |             </p>
20 |             <div id="progressBar">
21 |               <div id="progressBarFull"></div>
22 |             </div>
23 |           </div>
24 |           <div id="hud-item">
25 |             <p class="hud-prefix">
26 |               Score
27 |             </p>
28 |             <h1 class="hud-main-text" id="score">
29 |               0
30 |             </h1>
31 |           </div>
32 |         </div>
33 |         <h2 id="question"></h2>
34 |         <div class="choice-container">
35 |           <p class="choice-prefix">A</p>
36 |           <p class="choice-text" data-number="1"></p>
37 |         </div>
38 |         <div class="choice-container">
39 |           <p class="choice-prefix">B</p>
40 |           <p class="choice-text" data-number="2"></p>
41 |         </div>
42 |         <div class="choice-container">
43 |           <p class="choice-prefix">C</p>
44 |           <p class="choice-text" data-number="3"></p>
45 |         </div>
46 |         <div class="choice-container">
47 |           <p class="choice-prefix">D</p>
48 |           <p class="choice-text" data-number="4"></p>
49 |         </div>
50 |       </div>
51 |     </div>
52 |     <script src="game.js"></script>
53 |   </body>
54 | </html>
55 | 


--------------------------------------------------------------------------------
/6. Create a Progress Bar/game.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Quick Quiz - Play</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |     <link rel="stylesheet" href="game.css" />
10 |   </head>
11 |   <body>
12 |     <div class="container">
13 |       <div id="game" class="justify-center flex-column">
14 |         <div id="hud">
15 |           <div id="hud-item">
16 |             <p id="progressText" class="hud-prefix">
17 |               Question
18 |             </p>
19 |             <div id="progressBar">
20 |               <div id="progressBarFull"></div>
21 |             </div>
22 |           </div>
23 |           <div id="hud-item">
24 |             <p class="hud-prefix">
25 |               Score
26 |             </p>
27 |             <h1 class="hud-main-text" id="score">
28 |               0
29 |             </h1>
30 |           </div>
31 |         </div>
32 |         <h2 id="question">What is the answer to this questions?</h2>
33 |         <div class="choice-container">
34 |           <p class="choice-prefix">A</p>
35 |           <p class="choice-text" data-number="1">Choice 1</p>
36 |         </div>
37 |         <div class="choice-container">
38 |           <p class="choice-prefix">B</p>
39 |           <p class="choice-text" data-number="2">Choice 2</p>
40 |         </div>
41 |         <div class="choice-container">
42 |           <p class="choice-prefix">C</p>
43 |           <p class="choice-text" data-number="3">Choice 3</p>
44 |         </div>
45 |         <div class="choice-container">
46 |           <p class="choice-prefix">D</p>
47 |           <p class="choice-text" data-number="4">Choice 4</p>
48 |         </div>
49 |       </div>
50 |     </div>
51 |     <script src="game.js"></script>
52 |   </body>
53 | </html>
54 | 


--------------------------------------------------------------------------------
/7. Create and Style the End Page/game.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Quick Quiz - Play</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |     <link rel="stylesheet" href="game.css" />
10 |   </head>
11 |   <body>
12 |     <div class="container">
13 |       <div id="game" class="justify-center flex-column">
14 |         <div id="hud">
15 |           <div id="hud-item">
16 |             <p id="progressText" class="hud-prefix">
17 |               Question
18 |             </p>
19 |             <div id="progressBar">
20 |               <div id="progressBarFull"></div>
21 |             </div>
22 |           </div>
23 |           <div id="hud-item">
24 |             <p class="hud-prefix">
25 |               Score
26 |             </p>
27 |             <h1 class="hud-main-text" id="score">
28 |               0
29 |             </h1>
30 |           </div>
31 |         </div>
32 |         <h2 id="question">What is the answer to this questions?</h2>
33 |         <div class="choice-container">
34 |           <p class="choice-prefix">A</p>
35 |           <p class="choice-text" data-number="1">Choice 1</p>
36 |         </div>
37 |         <div class="choice-container">
38 |           <p class="choice-prefix">B</p>
39 |           <p class="choice-text" data-number="2">Choice 2</p>
40 |         </div>
41 |         <div class="choice-container">
42 |           <p class="choice-prefix">C</p>
43 |           <p class="choice-text" data-number="3">Choice 3</p>
44 |         </div>
45 |         <div class="choice-container">
46 |           <p class="choice-prefix">D</p>
47 |           <p class="choice-text" data-number="4">Choice 4</p>
48 |         </div>
49 |       </div>
50 |     </div>
51 |     <script src="game.js"></script>
52 |   </body>
53 | </html>
54 | 


--------------------------------------------------------------------------------
/10. Fetch Questions from Local JSON File/game.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Quick Quiz - Play</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |     <link rel="stylesheet" href="game.css" />
10 |   </head>
11 |   <body>
12 |     <div class="container">
13 |       <div id="game" class="justify-center flex-column">
14 |         <div id="hud">
15 |           <div id="hud-item">
16 |             <p id="progressText" class="hud-prefix">
17 |               Question
18 |             </p>
19 |             <div id="progressBar">
20 |               <div id="progressBarFull"></div>
21 |             </div>
22 |           </div>
23 |           <div id="hud-item">
24 |             <p class="hud-prefix">
25 |               Score
26 |             </p>
27 |             <h1 class="hud-main-text" id="score">
28 |               0
29 |             </h1>
30 |           </div>
31 |         </div>
32 |         <h2 id="question">What is the answer to this questions?</h2>
33 |         <div class="choice-container">
34 |           <p class="choice-prefix">A</p>
35 |           <p class="choice-text" data-number="1">Choice 1</p>
36 |         </div>
37 |         <div class="choice-container">
38 |           <p class="choice-prefix">B</p>
39 |           <p class="choice-text" data-number="2">Choice 2</p>
40 |         </div>
41 |         <div class="choice-container">
42 |           <p class="choice-prefix">C</p>
43 |           <p class="choice-text" data-number="3">Choice 3</p>
44 |         </div>
45 |         <div class="choice-container">
46 |           <p class="choice-prefix">D</p>
47 |           <p class="choice-text" data-number="4">Choice 4</p>
48 |         </div>
49 |       </div>
50 |     </div>
51 |     <script src="game.js"></script>
52 |   </body>
53 | </html>
54 | 


--------------------------------------------------------------------------------
/8. Save High Scores in Local Storage/game.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Quick Quiz - Play</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |     <link rel="stylesheet" href="game.css" />
10 |   </head>
11 |   <body>
12 |     <div class="container">
13 |       <div id="game" class="justify-center flex-column">
14 |         <div id="hud">
15 |           <div id="hud-item">
16 |             <p id="progressText" class="hud-prefix">
17 |               Question
18 |             </p>
19 |             <div id="progressBar">
20 |               <div id="progressBarFull"></div>
21 |             </div>
22 |           </div>
23 |           <div id="hud-item">
24 |             <p class="hud-prefix">
25 |               Score
26 |             </p>
27 |             <h1 class="hud-main-text" id="score">
28 |               0
29 |             </h1>
30 |           </div>
31 |         </div>
32 |         <h2 id="question">What is the answer to this questions?</h2>
33 |         <div class="choice-container">
34 |           <p class="choice-prefix">A</p>
35 |           <p class="choice-text" data-number="1">Choice 1</p>
36 |         </div>
37 |         <div class="choice-container">
38 |           <p class="choice-prefix">B</p>
39 |           <p class="choice-text" data-number="2">Choice 2</p>
40 |         </div>
41 |         <div class="choice-container">
42 |           <p class="choice-prefix">C</p>
43 |           <p class="choice-text" data-number="3">Choice 3</p>
44 |         </div>
45 |         <div class="choice-container">
46 |           <p class="choice-prefix">D</p>
47 |           <p class="choice-text" data-number="4">Choice 4</p>
48 |         </div>
49 |       </div>
50 |     </div>
51 |     <script src="game.js"></script>
52 |   </body>
53 | </html>
54 | 


--------------------------------------------------------------------------------
/11. Fetch API Questions from Open Trivia API/game.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Quick Quiz - Play</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |     <link rel="stylesheet" href="game.css" />
10 |   </head>
11 |   <body>
12 |     <div class="container">
13 |       <div id="game" class="justify-center flex-column">
14 |         <div id="hud">
15 |           <div id="hud-item">
16 |             <p id="progressText" class="hud-prefix">
17 |               Question
18 |             </p>
19 |             <div id="progressBar">
20 |               <div id="progressBarFull"></div>
21 |             </div>
22 |           </div>
23 |           <div id="hud-item">
24 |             <p class="hud-prefix">
25 |               Score
26 |             </p>
27 |             <h1 class="hud-main-text" id="score">
28 |               0
29 |             </h1>
30 |           </div>
31 |         </div>
32 |         <h2 id="question">What is the answer to this questions?</h2>
33 |         <div class="choice-container">
34 |           <p class="choice-prefix">A</p>
35 |           <p class="choice-text" data-number="1">Choice 1</p>
36 |         </div>
37 |         <div class="choice-container">
38 |           <p class="choice-prefix">B</p>
39 |           <p class="choice-text" data-number="2">Choice 2</p>
40 |         </div>
41 |         <div class="choice-container">
42 |           <p class="choice-prefix">C</p>
43 |           <p class="choice-text" data-number="3">Choice 3</p>
44 |         </div>
45 |         <div class="choice-container">
46 |           <p class="choice-prefix">D</p>
47 |           <p class="choice-text" data-number="4">Choice 4</p>
48 |         </div>
49 |       </div>
50 |     </div>
51 |     <script src="game.js"></script>
52 |   </body>
53 | </html>
54 | 


--------------------------------------------------------------------------------
/9. Load and Display High Scores from Local Storage/game.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Quick Quiz - Play</title>
 8 |     <link rel="stylesheet" href="app.css" />
 9 |     <link rel="stylesheet" href="game.css" />
10 |   </head>
11 |   <body>
12 |     <div class="container">
13 |       <div id="game" class="justify-center flex-column">
14 |         <div id="hud">
15 |           <div id="hud-item">
16 |             <p id="progressText" class="hud-prefix">
17 |               Question
18 |             </p>
19 |             <div id="progressBar">
20 |               <div id="progressBarFull"></div>
21 |             </div>
22 |           </div>
23 |           <div id="hud-item">
24 |             <p class="hud-prefix">
25 |               Score
26 |             </p>
27 |             <h1 class="hud-main-text" id="score">
28 |               0
29 |             </h1>
30 |           </div>
31 |         </div>
32 |         <h2 id="question">What is the answer to this questions?</h2>
33 |         <div class="choice-container">
34 |           <p class="choice-prefix">A</p>
35 |           <p class="choice-text" data-number="1">Choice 1</p>
36 |         </div>
37 |         <div class="choice-container">
38 |           <p class="choice-prefix">B</p>
39 |           <p class="choice-text" data-number="2">Choice 2</p>
40 |         </div>
41 |         <div class="choice-container">
42 |           <p class="choice-prefix">C</p>
43 |           <p class="choice-text" data-number="3">Choice 3</p>
44 |         </div>
45 |         <div class="choice-container">
46 |           <p class="choice-prefix">D</p>
47 |           <p class="choice-text" data-number="4">Choice 4</p>
48 |         </div>
49 |       </div>
50 |     </div>
51 |     <script src="game.js"></script>
52 |   </body>
53 | </html>
54 | 


--------------------------------------------------------------------------------
/2. Create and Style the Game Page/app.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   background-color: #ecf5ff;
  3 |   font-size: 62.5%;
  4 | }
  5 | 
  6 | * {
  7 |   box-sizing: border-box;
  8 |   font-family: Arial, Helvetica, sans-serif;
  9 |   margin: 0;
 10 |   padding: 0;
 11 |   color: #333;
 12 | }
 13 | 
 14 | h1,
 15 | h2,
 16 | h3,
 17 | h4 {
 18 |   margin-bottom: 1rem;
 19 | }
 20 | 
 21 | h1 {
 22 |   font-size: 5.4rem;
 23 |   color: #56a5eb;
 24 |   margin-bottom: 5rem;
 25 | }
 26 | 
 27 | h1 > span {
 28 |   font-size: 2.4rem;
 29 |   font-weight: 500;
 30 | }
 31 | 
 32 | h2 {
 33 |   font-size: 4.2rem;
 34 |   margin-bottom: 4rem;
 35 |   font-weight: 700;
 36 | }
 37 | 
 38 | h3 {
 39 |   font-size: 2.8rem;
 40 |   font-weight: 500;
 41 | }
 42 | 
 43 | /* UTILITIES */
 44 | 
 45 | .container {
 46 |   width: 100vw;
 47 |   height: 100vh;
 48 |   display: flex;
 49 |   justify-content: center;
 50 |   align-items: center;
 51 |   max-width: 80rem;
 52 |   margin: 0 auto;
 53 | }
 54 | 
 55 | .container > * {
 56 |   width: 100%;
 57 | }
 58 | 
 59 | .flex-column {
 60 |   display: flex;
 61 |   flex-direction: column;
 62 | }
 63 | 
 64 | .flex-center {
 65 |   justify-content: center;
 66 |   align-items: center;
 67 | }
 68 | 
 69 | .justify-center {
 70 |   justify-content: center;
 71 | }
 72 | 
 73 | .text-center {
 74 |   text-align: center;
 75 | }
 76 | 
 77 | .hidden {
 78 |   display: none;
 79 | }
 80 | 
 81 | /* BUTTONS */
 82 | .btn {
 83 |   font-size: 1.8rem;
 84 |   padding: 1rem 0;
 85 |   width: 20rem;
 86 |   text-align: center;
 87 |   border: 0.1rem solid #56a5eb;
 88 |   margin-bottom: 1rem;
 89 |   text-decoration: none;
 90 |   color: #56a5eb;
 91 |   background-color: white;
 92 | }
 93 | 
 94 | .btn:hover {
 95 |   cursor: pointer;
 96 |   box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
 97 |   transform: translateY(-0.1rem);
 98 |   transition: transform 150ms;
 99 | }
100 | 
101 | .btn[disabled]:hover {
102 |   cursor: not-allowed;
103 |   box-shadow: none;
104 |   transform: none;
105 | }
106 | 


--------------------------------------------------------------------------------
/1. Create Home Page and Application Styling/app.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   background-color: #ecf5ff;
  3 |   font-size: 62.5%;
  4 | }
  5 | 
  6 | * {
  7 |   box-sizing: border-box;
  8 |   font-family: Arial, Helvetica, sans-serif;
  9 |   margin: 0;
 10 |   padding: 0;
 11 |   color: #333;
 12 | }
 13 | 
 14 | h1,
 15 | h2,
 16 | h3,
 17 | h4 {
 18 |   margin-bottom: 1rem;
 19 | }
 20 | 
 21 | h1 {
 22 |   font-size: 5.4rem;
 23 |   color: #56a5eb;
 24 |   margin-bottom: 5rem;
 25 | }
 26 | 
 27 | h1 > span {
 28 |   font-size: 2.4rem;
 29 |   font-weight: 500;
 30 | }
 31 | 
 32 | h2 {
 33 |   font-size: 4.2rem;
 34 |   margin-bottom: 4rem;
 35 |   font-weight: 700;
 36 | }
 37 | 
 38 | h3 {
 39 |   font-size: 2.8rem;
 40 |   font-weight: 500;
 41 | }
 42 | 
 43 | /* UTILITIES */
 44 | 
 45 | .container {
 46 |   width: 100vw;
 47 |   height: 100vh;
 48 |   display: flex;
 49 |   justify-content: center;
 50 |   align-items: center;
 51 |   max-width: 80rem;
 52 |   margin: 0 auto;
 53 | }
 54 | 
 55 | .container > * {
 56 |   width: 100%;
 57 | }
 58 | 
 59 | .flex-column {
 60 |   display: flex;
 61 |   flex-direction: column;
 62 | }
 63 | 
 64 | .flex-center {
 65 |   justify-content: center;
 66 |   align-items: center;
 67 | }
 68 | 
 69 | .justify-center {
 70 |   justify-content: center;
 71 | }
 72 | 
 73 | .text-center {
 74 |   text-align: center;
 75 | }
 76 | 
 77 | .hidden {
 78 |   display: none;
 79 | }
 80 | 
 81 | /* BUTTONS */
 82 | .btn {
 83 |   font-size: 1.8rem;
 84 |   padding: 1rem 0;
 85 |   width: 20rem;
 86 |   text-align: center;
 87 |   border: 0.1rem solid #56a5eb;
 88 |   margin-bottom: 1rem;
 89 |   text-decoration: none;
 90 |   color: #56a5eb;
 91 |   background-color: white;
 92 | }
 93 | 
 94 | .btn:hover {
 95 |   cursor: pointer;
 96 |   box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
 97 |   transform: translateY(-0.1rem);
 98 |   transition: transform 150ms;
 99 | }
100 | 
101 | .btn[disabled]:hover {
102 |   cursor: not-allowed;
103 |   box-shadow: none;
104 |   transform: none;
105 | }
106 | 


--------------------------------------------------------------------------------
/6. Create a Progress Bar/app.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   background-color: #ecf5ff;
  3 |   font-size: 62.5%;
  4 | }
  5 | 
  6 | * {
  7 |   box-sizing: border-box;
  8 |   font-family: Arial, Helvetica, sans-serif;
  9 |   margin: 0;
 10 |   padding: 0;
 11 |   color: #333;
 12 | }
 13 | 
 14 | h1,
 15 | h2,
 16 | h3,
 17 | h4 {
 18 |   margin-bottom: 1rem;
 19 | }
 20 | 
 21 | h1 {
 22 |   font-size: 5.4rem;
 23 |   color: #56a5eb;
 24 |   margin-bottom: 5rem;
 25 | }
 26 | 
 27 | h1 > span {
 28 |   font-size: 2.4rem;
 29 |   font-weight: 500;
 30 | }
 31 | 
 32 | h2 {
 33 |   font-size: 4.2rem;
 34 |   margin-bottom: 4rem;
 35 |   font-weight: 700;
 36 | }
 37 | 
 38 | h3 {
 39 |   font-size: 2.8rem;
 40 |   font-weight: 500;
 41 | }
 42 | 
 43 | /* UTILITIES */
 44 | 
 45 | .container {
 46 |   width: 100vw;
 47 |   height: 100vh;
 48 |   display: flex;
 49 |   justify-content: center;
 50 |   align-items: center;
 51 |   max-width: 80rem;
 52 |   margin: 0 auto;
 53 |   padding: 2rem;
 54 | }
 55 | 
 56 | .container > * {
 57 |   width: 100%;
 58 | }
 59 | 
 60 | .flex-column {
 61 |   display: flex;
 62 |   flex-direction: column;
 63 | }
 64 | 
 65 | .flex-center {
 66 |   justify-content: center;
 67 |   align-items: center;
 68 | }
 69 | 
 70 | .justify-center {
 71 |   justify-content: center;
 72 | }
 73 | 
 74 | .text-center {
 75 |   text-align: center;
 76 | }
 77 | 
 78 | .hidden {
 79 |   display: none;
 80 | }
 81 | 
 82 | /* BUTTONS */
 83 | .btn {
 84 |   font-size: 1.8rem;
 85 |   padding: 1rem 0;
 86 |   width: 20rem;
 87 |   text-align: center;
 88 |   border: 0.1rem solid #56a5eb;
 89 |   margin-bottom: 1rem;
 90 |   text-decoration: none;
 91 |   color: #56a5eb;
 92 |   background-color: white;
 93 | }
 94 | 
 95 | .btn:hover {
 96 |   cursor: pointer;
 97 |   box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
 98 |   transform: translateY(-0.1rem);
 99 |   transition: transform 150ms;
100 | }
101 | 
102 | .btn[disabled]:hover {
103 |   cursor: not-allowed;
104 |   box-shadow: none;
105 |   transform: none;
106 | }
107 | 


--------------------------------------------------------------------------------
/5. Create a Head's Up Display/app.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   background-color: #ecf5ff;
  3 |   font-size: 62.5%;
  4 | }
  5 | 
  6 | * {
  7 |   box-sizing: border-box;
  8 |   font-family: Arial, Helvetica, sans-serif;
  9 |   margin: 0;
 10 |   padding: 0;
 11 |   color: #333;
 12 | }
 13 | 
 14 | h1,
 15 | h2,
 16 | h3,
 17 | h4 {
 18 |   margin-bottom: 1rem;
 19 | }
 20 | 
 21 | h1 {
 22 |   font-size: 5.4rem;
 23 |   color: #56a5eb;
 24 |   margin-bottom: 5rem;
 25 | }
 26 | 
 27 | h1 > span {
 28 |   font-size: 2.4rem;
 29 |   font-weight: 500;
 30 | }
 31 | 
 32 | h2 {
 33 |   font-size: 4.2rem;
 34 |   margin-bottom: 4rem;
 35 |   font-weight: 700;
 36 | }
 37 | 
 38 | h3 {
 39 |   font-size: 2.8rem;
 40 |   font-weight: 500;
 41 | }
 42 | 
 43 | /* UTILITIES */
 44 | 
 45 | .container {
 46 |   width: 100vw;
 47 |   height: 100vh;
 48 |   display: flex;
 49 |   justify-content: center;
 50 |   align-items: center;
 51 |   max-width: 80rem;
 52 |   margin: 0 auto;
 53 |   padding: 2rem;
 54 | }
 55 | 
 56 | .container > * {
 57 |   width: 100%;
 58 | }
 59 | 
 60 | .flex-column {
 61 |   display: flex;
 62 |   flex-direction: column;
 63 | }
 64 | 
 65 | .flex-center {
 66 |   justify-content: center;
 67 |   align-items: center;
 68 | }
 69 | 
 70 | .justify-center {
 71 |   justify-content: center;
 72 | }
 73 | 
 74 | .text-center {
 75 |   text-align: center;
 76 | }
 77 | 
 78 | .hidden {
 79 |   display: none;
 80 | }
 81 | 
 82 | /* BUTTONS */
 83 | .btn {
 84 |   font-size: 1.8rem;
 85 |   padding: 1rem 0;
 86 |   width: 20rem;
 87 |   text-align: center;
 88 |   border: 0.1rem solid #56a5eb;
 89 |   margin-bottom: 1rem;
 90 |   text-decoration: none;
 91 |   color: #56a5eb;
 92 |   background-color: white;
 93 | }
 94 | 
 95 | .btn:hover {
 96 |   cursor: pointer;
 97 |   box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
 98 |   transform: translateY(-0.1rem);
 99 |   transition: transform 150ms;
100 | }
101 | 
102 | .btn[disabled]:hover {
103 |   cursor: not-allowed;
104 |   box-shadow: none;
105 |   transform: none;
106 | }
107 | 


--------------------------------------------------------------------------------
/3. Display Hard Coded Question and Answers/app.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   background-color: #ecf5ff;
  3 |   font-size: 62.5%;
  4 | }
  5 | 
  6 | * {
  7 |   box-sizing: border-box;
  8 |   font-family: Arial, Helvetica, sans-serif;
  9 |   margin: 0;
 10 |   padding: 0;
 11 |   color: #333;
 12 | }
 13 | 
 14 | h1,
 15 | h2,
 16 | h3,
 17 | h4 {
 18 |   margin-bottom: 1rem;
 19 | }
 20 | 
 21 | h1 {
 22 |   font-size: 5.4rem;
 23 |   color: #56a5eb;
 24 |   margin-bottom: 5rem;
 25 | }
 26 | 
 27 | h1 > span {
 28 |   font-size: 2.4rem;
 29 |   font-weight: 500;
 30 | }
 31 | 
 32 | h2 {
 33 |   font-size: 4.2rem;
 34 |   margin-bottom: 4rem;
 35 |   font-weight: 700;
 36 | }
 37 | 
 38 | h3 {
 39 |   font-size: 2.8rem;
 40 |   font-weight: 500;
 41 | }
 42 | 
 43 | /* UTILITIES */
 44 | 
 45 | .container {
 46 |   width: 100vw;
 47 |   height: 100vh;
 48 |   display: flex;
 49 |   justify-content: center;
 50 |   align-items: center;
 51 |   max-width: 80rem;
 52 |   margin: 0 auto;
 53 |   padding: 2rem;
 54 | }
 55 | 
 56 | .container > * {
 57 |   width: 100%;
 58 | }
 59 | 
 60 | .flex-column {
 61 |   display: flex;
 62 |   flex-direction: column;
 63 | }
 64 | 
 65 | .flex-center {
 66 |   justify-content: center;
 67 |   align-items: center;
 68 | }
 69 | 
 70 | .justify-center {
 71 |   justify-content: center;
 72 | }
 73 | 
 74 | .text-center {
 75 |   text-align: center;
 76 | }
 77 | 
 78 | .hidden {
 79 |   display: none;
 80 | }
 81 | 
 82 | /* BUTTONS */
 83 | .btn {
 84 |   font-size: 1.8rem;
 85 |   padding: 1rem 0;
 86 |   width: 20rem;
 87 |   text-align: center;
 88 |   border: 0.1rem solid #56a5eb;
 89 |   margin-bottom: 1rem;
 90 |   text-decoration: none;
 91 |   color: #56a5eb;
 92 |   background-color: white;
 93 | }
 94 | 
 95 | .btn:hover {
 96 |   cursor: pointer;
 97 |   box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
 98 |   transform: translateY(-0.1rem);
 99 |   transition: transform 150ms;
100 | }
101 | 
102 | .btn[disabled]:hover {
103 |   cursor: not-allowed;
104 |   box-shadow: none;
105 |   transform: none;
106 | }
107 | 


--------------------------------------------------------------------------------
/4. Display Feedback for Correct and Incorrect Answers/app.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   background-color: #ecf5ff;
  3 |   font-size: 62.5%;
  4 | }
  5 | 
  6 | * {
  7 |   box-sizing: border-box;
  8 |   font-family: Arial, Helvetica, sans-serif;
  9 |   margin: 0;
 10 |   padding: 0;
 11 |   color: #333;
 12 | }
 13 | 
 14 | h1,
 15 | h2,
 16 | h3,
 17 | h4 {
 18 |   margin-bottom: 1rem;
 19 | }
 20 | 
 21 | h1 {
 22 |   font-size: 5.4rem;
 23 |   color: #56a5eb;
 24 |   margin-bottom: 5rem;
 25 | }
 26 | 
 27 | h1 > span {
 28 |   font-size: 2.4rem;
 29 |   font-weight: 500;
 30 | }
 31 | 
 32 | h2 {
 33 |   font-size: 4.2rem;
 34 |   margin-bottom: 4rem;
 35 |   font-weight: 700;
 36 | }
 37 | 
 38 | h3 {
 39 |   font-size: 2.8rem;
 40 |   font-weight: 500;
 41 | }
 42 | 
 43 | /* UTILITIES */
 44 | 
 45 | .container {
 46 |   width: 100vw;
 47 |   height: 100vh;
 48 |   display: flex;
 49 |   justify-content: center;
 50 |   align-items: center;
 51 |   max-width: 80rem;
 52 |   margin: 0 auto;
 53 |   padding: 2rem;
 54 | }
 55 | 
 56 | .container > * {
 57 |   width: 100%;
 58 | }
 59 | 
 60 | .flex-column {
 61 |   display: flex;
 62 |   flex-direction: column;
 63 | }
 64 | 
 65 | .flex-center {
 66 |   justify-content: center;
 67 |   align-items: center;
 68 | }
 69 | 
 70 | .justify-center {
 71 |   justify-content: center;
 72 | }
 73 | 
 74 | .text-center {
 75 |   text-align: center;
 76 | }
 77 | 
 78 | .hidden {
 79 |   display: none;
 80 | }
 81 | 
 82 | /* BUTTONS */
 83 | .btn {
 84 |   font-size: 1.8rem;
 85 |   padding: 1rem 0;
 86 |   width: 20rem;
 87 |   text-align: center;
 88 |   border: 0.1rem solid #56a5eb;
 89 |   margin-bottom: 1rem;
 90 |   text-decoration: none;
 91 |   color: #56a5eb;
 92 |   background-color: white;
 93 | }
 94 | 
 95 | .btn:hover {
 96 |   cursor: pointer;
 97 |   box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
 98 |   transform: translateY(-0.1rem);
 99 |   transition: transform 150ms;
100 | }
101 | 
102 | .btn[disabled]:hover {
103 |   cursor: not-allowed;
104 |   box-shadow: none;
105 |   transform: none;
106 | }
107 | 


--------------------------------------------------------------------------------
/Quiz App Master/app.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   background-color: #ecf5ff;
  3 |   font-size: 62.5%;
  4 | }
  5 | 
  6 | * {
  7 |   box-sizing: border-box;
  8 |   font-family: Arial, Helvetica, sans-serif;
  9 |   margin: 0;
 10 |   padding: 0;
 11 |   color: #333;
 12 | }
 13 | 
 14 | h1,
 15 | h2,
 16 | h3,
 17 | h4 {
 18 |   margin-bottom: 1rem;
 19 | }
 20 | 
 21 | h1 {
 22 |   font-size: 5.4rem;
 23 |   color: #56a5eb;
 24 |   margin-bottom: 5rem;
 25 | }
 26 | 
 27 | h1 > span {
 28 |   font-size: 2.4rem;
 29 |   font-weight: 500;
 30 | }
 31 | 
 32 | h2 {
 33 |   font-size: 4.2rem;
 34 |   margin-bottom: 4rem;
 35 |   font-weight: 700;
 36 | }
 37 | 
 38 | h3 {
 39 |   font-size: 2.8rem;
 40 |   font-weight: 500;
 41 | }
 42 | 
 43 | /* UTILITIES */
 44 | 
 45 | .container {
 46 |   width: 100vw;
 47 |   height: 100vh;
 48 |   display: flex;
 49 |   justify-content: center;
 50 |   align-items: center;
 51 |   max-width: 80rem;
 52 |   margin: 0 auto;
 53 |   padding: 2rem;
 54 | }
 55 | 
 56 | .container > * {
 57 |   width: 100%;
 58 | }
 59 | 
 60 | .flex-column {
 61 |   display: flex;
 62 |   flex-direction: column;
 63 | }
 64 | 
 65 | .flex-center {
 66 |   justify-content: center;
 67 |   align-items: center;
 68 | }
 69 | 
 70 | .justify-center {
 71 |   justify-content: center;
 72 | }
 73 | 
 74 | .text-center {
 75 |   text-align: center;
 76 | }
 77 | 
 78 | .hidden {
 79 |   display: none;
 80 | }
 81 | 
 82 | /* BUTTONS */
 83 | .btn {
 84 |   font-size: 1.8rem;
 85 |   padding: 1rem 0;
 86 |   width: 20rem;
 87 |   text-align: center;
 88 |   border: 0.1rem solid #56a5eb;
 89 |   margin-bottom: 1rem;
 90 |   text-decoration: none;
 91 |   color: #56a5eb;
 92 |   background-color: white;
 93 | }
 94 | 
 95 | .btn:hover {
 96 |   cursor: pointer;
 97 |   box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
 98 |   transform: translateY(-0.1rem);
 99 |   transition: transform 150ms;
100 | }
101 | 
102 | .btn[disabled]:hover {
103 |   cursor: not-allowed;
104 |   box-shadow: none;
105 |   transform: none;
106 | }
107 | 
108 | /* FORMS */
109 | form {
110 |   width: 100%;
111 |   display: flex;
112 |   flex-direction: column;
113 |   align-items: center;
114 | }
115 | 
116 | input {
117 |   margin-bottom: 1rem;
118 |   width: 20rem;
119 |   padding: 1.5rem;
120 |   font-size: 1.8rem;
121 |   border: none;
122 |   box-shadow: 0 0.1rem 1.4rem 0 rgba(86, 185, 235, 0.5);
123 | }
124 | 
125 | input::placeholder {
126 |   color: #aaa;
127 | }
128 | 


--------------------------------------------------------------------------------
/12. Create a Spinning Loader/app.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   background-color: #ecf5ff;
  3 |   font-size: 62.5%;
  4 | }
  5 | 
  6 | * {
  7 |   box-sizing: border-box;
  8 |   font-family: Arial, Helvetica, sans-serif;
  9 |   margin: 0;
 10 |   padding: 0;
 11 |   color: #333;
 12 | }
 13 | 
 14 | h1,
 15 | h2,
 16 | h3,
 17 | h4 {
 18 |   margin-bottom: 1rem;
 19 | }
 20 | 
 21 | h1 {
 22 |   font-size: 5.4rem;
 23 |   color: #56a5eb;
 24 |   margin-bottom: 5rem;
 25 | }
 26 | 
 27 | h1 > span {
 28 |   font-size: 2.4rem;
 29 |   font-weight: 500;
 30 | }
 31 | 
 32 | h2 {
 33 |   font-size: 4.2rem;
 34 |   margin-bottom: 4rem;
 35 |   font-weight: 700;
 36 | }
 37 | 
 38 | h3 {
 39 |   font-size: 2.8rem;
 40 |   font-weight: 500;
 41 | }
 42 | 
 43 | /* UTILITIES */
 44 | 
 45 | .container {
 46 |   width: 100vw;
 47 |   height: 100vh;
 48 |   display: flex;
 49 |   justify-content: center;
 50 |   align-items: center;
 51 |   max-width: 80rem;
 52 |   margin: 0 auto;
 53 |   padding: 2rem;
 54 | }
 55 | 
 56 | .container > * {
 57 |   width: 100%;
 58 | }
 59 | 
 60 | .flex-column {
 61 |   display: flex;
 62 |   flex-direction: column;
 63 | }
 64 | 
 65 | .flex-center {
 66 |   justify-content: center;
 67 |   align-items: center;
 68 | }
 69 | 
 70 | .justify-center {
 71 |   justify-content: center;
 72 | }
 73 | 
 74 | .text-center {
 75 |   text-align: center;
 76 | }
 77 | 
 78 | .hidden {
 79 |   display: none;
 80 | }
 81 | 
 82 | /* BUTTONS */
 83 | .btn {
 84 |   font-size: 1.8rem;
 85 |   padding: 1rem 0;
 86 |   width: 20rem;
 87 |   text-align: center;
 88 |   border: 0.1rem solid #56a5eb;
 89 |   margin-bottom: 1rem;
 90 |   text-decoration: none;
 91 |   color: #56a5eb;
 92 |   background-color: white;
 93 | }
 94 | 
 95 | .btn:hover {
 96 |   cursor: pointer;
 97 |   box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
 98 |   transform: translateY(-0.1rem);
 99 |   transition: transform 150ms;
100 | }
101 | 
102 | .btn[disabled]:hover {
103 |   cursor: not-allowed;
104 |   box-shadow: none;
105 |   transform: none;
106 | }
107 | 
108 | /* FORMS */
109 | form {
110 |   width: 100%;
111 |   display: flex;
112 |   flex-direction: column;
113 |   align-items: center;
114 | }
115 | 
116 | input {
117 |   margin-bottom: 1rem;
118 |   width: 20rem;
119 |   padding: 1.5rem;
120 |   font-size: 1.8rem;
121 |   border: none;
122 |   box-shadow: 0 0.1rem 1.4rem 0 rgba(86, 185, 235, 0.5);
123 | }
124 | 
125 | input::placeholder {
126 |   color: #aaa;
127 | }
128 | 


--------------------------------------------------------------------------------
/7. Create and Style the End Page/app.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   background-color: #ecf5ff;
  3 |   font-size: 62.5%;
  4 | }
  5 | 
  6 | * {
  7 |   box-sizing: border-box;
  8 |   font-family: Arial, Helvetica, sans-serif;
  9 |   margin: 0;
 10 |   padding: 0;
 11 |   color: #333;
 12 | }
 13 | 
 14 | h1,
 15 | h2,
 16 | h3,
 17 | h4 {
 18 |   margin-bottom: 1rem;
 19 | }
 20 | 
 21 | h1 {
 22 |   font-size: 5.4rem;
 23 |   color: #56a5eb;
 24 |   margin-bottom: 5rem;
 25 | }
 26 | 
 27 | h1 > span {
 28 |   font-size: 2.4rem;
 29 |   font-weight: 500;
 30 | }
 31 | 
 32 | h2 {
 33 |   font-size: 4.2rem;
 34 |   margin-bottom: 4rem;
 35 |   font-weight: 700;
 36 | }
 37 | 
 38 | h3 {
 39 |   font-size: 2.8rem;
 40 |   font-weight: 500;
 41 | }
 42 | 
 43 | /* UTILITIES */
 44 | 
 45 | .container {
 46 |   width: 100vw;
 47 |   height: 100vh;
 48 |   display: flex;
 49 |   justify-content: center;
 50 |   align-items: center;
 51 |   max-width: 80rem;
 52 |   margin: 0 auto;
 53 |   padding: 2rem;
 54 | }
 55 | 
 56 | .container > * {
 57 |   width: 100%;
 58 | }
 59 | 
 60 | .flex-column {
 61 |   display: flex;
 62 |   flex-direction: column;
 63 | }
 64 | 
 65 | .flex-center {
 66 |   justify-content: center;
 67 |   align-items: center;
 68 | }
 69 | 
 70 | .justify-center {
 71 |   justify-content: center;
 72 | }
 73 | 
 74 | .text-center {
 75 |   text-align: center;
 76 | }
 77 | 
 78 | .hidden {
 79 |   display: none;
 80 | }
 81 | 
 82 | /* BUTTONS */
 83 | .btn {
 84 |   font-size: 1.8rem;
 85 |   padding: 1rem 0;
 86 |   width: 20rem;
 87 |   text-align: center;
 88 |   border: 0.1rem solid #56a5eb;
 89 |   margin-bottom: 1rem;
 90 |   text-decoration: none;
 91 |   color: #56a5eb;
 92 |   background-color: white;
 93 | }
 94 | 
 95 | .btn:hover {
 96 |   cursor: pointer;
 97 |   box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
 98 |   transform: translateY(-0.1rem);
 99 |   transition: transform 150ms;
100 | }
101 | 
102 | .btn[disabled]:hover {
103 |   cursor: not-allowed;
104 |   box-shadow: none;
105 |   transform: none;
106 | }
107 | 
108 | /* FORMS */
109 | form {
110 |   width: 100%;
111 |   display: flex;
112 |   flex-direction: column;
113 |   align-items: center;
114 | }
115 | 
116 | input {
117 |   margin-bottom: 1rem;
118 |   width: 20rem;
119 |   padding: 1.5rem;
120 |   font-size: 1.8rem;
121 |   border: none;
122 |   box-shadow: 0 0.1rem 1.4rem 0 rgba(86, 185, 235, 0.5);
123 | }
124 | 
125 | input::placeholder {
126 |   color: #aaa;
127 | }
128 | 


--------------------------------------------------------------------------------
/10. Fetch Questions from Local JSON File/app.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   background-color: #ecf5ff;
  3 |   font-size: 62.5%;
  4 | }
  5 | 
  6 | * {
  7 |   box-sizing: border-box;
  8 |   font-family: Arial, Helvetica, sans-serif;
  9 |   margin: 0;
 10 |   padding: 0;
 11 |   color: #333;
 12 | }
 13 | 
 14 | h1,
 15 | h2,
 16 | h3,
 17 | h4 {
 18 |   margin-bottom: 1rem;
 19 | }
 20 | 
 21 | h1 {
 22 |   font-size: 5.4rem;
 23 |   color: #56a5eb;
 24 |   margin-bottom: 5rem;
 25 | }
 26 | 
 27 | h1 > span {
 28 |   font-size: 2.4rem;
 29 |   font-weight: 500;
 30 | }
 31 | 
 32 | h2 {
 33 |   font-size: 4.2rem;
 34 |   margin-bottom: 4rem;
 35 |   font-weight: 700;
 36 | }
 37 | 
 38 | h3 {
 39 |   font-size: 2.8rem;
 40 |   font-weight: 500;
 41 | }
 42 | 
 43 | /* UTILITIES */
 44 | 
 45 | .container {
 46 |   width: 100vw;
 47 |   height: 100vh;
 48 |   display: flex;
 49 |   justify-content: center;
 50 |   align-items: center;
 51 |   max-width: 80rem;
 52 |   margin: 0 auto;
 53 |   padding: 2rem;
 54 | }
 55 | 
 56 | .container > * {
 57 |   width: 100%;
 58 | }
 59 | 
 60 | .flex-column {
 61 |   display: flex;
 62 |   flex-direction: column;
 63 | }
 64 | 
 65 | .flex-center {
 66 |   justify-content: center;
 67 |   align-items: center;
 68 | }
 69 | 
 70 | .justify-center {
 71 |   justify-content: center;
 72 | }
 73 | 
 74 | .text-center {
 75 |   text-align: center;
 76 | }
 77 | 
 78 | .hidden {
 79 |   display: none;
 80 | }
 81 | 
 82 | /* BUTTONS */
 83 | .btn {
 84 |   font-size: 1.8rem;
 85 |   padding: 1rem 0;
 86 |   width: 20rem;
 87 |   text-align: center;
 88 |   border: 0.1rem solid #56a5eb;
 89 |   margin-bottom: 1rem;
 90 |   text-decoration: none;
 91 |   color: #56a5eb;
 92 |   background-color: white;
 93 | }
 94 | 
 95 | .btn:hover {
 96 |   cursor: pointer;
 97 |   box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
 98 |   transform: translateY(-0.1rem);
 99 |   transition: transform 150ms;
100 | }
101 | 
102 | .btn[disabled]:hover {
103 |   cursor: not-allowed;
104 |   box-shadow: none;
105 |   transform: none;
106 | }
107 | 
108 | /* FORMS */
109 | form {
110 |   width: 100%;
111 |   display: flex;
112 |   flex-direction: column;
113 |   align-items: center;
114 | }
115 | 
116 | input {
117 |   margin-bottom: 1rem;
118 |   width: 20rem;
119 |   padding: 1.5rem;
120 |   font-size: 1.8rem;
121 |   border: none;
122 |   box-shadow: 0 0.1rem 1.4rem 0 rgba(86, 185, 235, 0.5);
123 | }
124 | 
125 | input::placeholder {
126 |   color: #aaa;
127 | }
128 | 


--------------------------------------------------------------------------------
/8. Save High Scores in Local Storage/app.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   background-color: #ecf5ff;
  3 |   font-size: 62.5%;
  4 | }
  5 | 
  6 | * {
  7 |   box-sizing: border-box;
  8 |   font-family: Arial, Helvetica, sans-serif;
  9 |   margin: 0;
 10 |   padding: 0;
 11 |   color: #333;
 12 | }
 13 | 
 14 | h1,
 15 | h2,
 16 | h3,
 17 | h4 {
 18 |   margin-bottom: 1rem;
 19 | }
 20 | 
 21 | h1 {
 22 |   font-size: 5.4rem;
 23 |   color: #56a5eb;
 24 |   margin-bottom: 5rem;
 25 | }
 26 | 
 27 | h1 > span {
 28 |   font-size: 2.4rem;
 29 |   font-weight: 500;
 30 | }
 31 | 
 32 | h2 {
 33 |   font-size: 4.2rem;
 34 |   margin-bottom: 4rem;
 35 |   font-weight: 700;
 36 | }
 37 | 
 38 | h3 {
 39 |   font-size: 2.8rem;
 40 |   font-weight: 500;
 41 | }
 42 | 
 43 | /* UTILITIES */
 44 | 
 45 | .container {
 46 |   width: 100vw;
 47 |   height: 100vh;
 48 |   display: flex;
 49 |   justify-content: center;
 50 |   align-items: center;
 51 |   max-width: 80rem;
 52 |   margin: 0 auto;
 53 |   padding: 2rem;
 54 | }
 55 | 
 56 | .container > * {
 57 |   width: 100%;
 58 | }
 59 | 
 60 | .flex-column {
 61 |   display: flex;
 62 |   flex-direction: column;
 63 | }
 64 | 
 65 | .flex-center {
 66 |   justify-content: center;
 67 |   align-items: center;
 68 | }
 69 | 
 70 | .justify-center {
 71 |   justify-content: center;
 72 | }
 73 | 
 74 | .text-center {
 75 |   text-align: center;
 76 | }
 77 | 
 78 | .hidden {
 79 |   display: none;
 80 | }
 81 | 
 82 | /* BUTTONS */
 83 | .btn {
 84 |   font-size: 1.8rem;
 85 |   padding: 1rem 0;
 86 |   width: 20rem;
 87 |   text-align: center;
 88 |   border: 0.1rem solid #56a5eb;
 89 |   margin-bottom: 1rem;
 90 |   text-decoration: none;
 91 |   color: #56a5eb;
 92 |   background-color: white;
 93 | }
 94 | 
 95 | .btn:hover {
 96 |   cursor: pointer;
 97 |   box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
 98 |   transform: translateY(-0.1rem);
 99 |   transition: transform 150ms;
100 | }
101 | 
102 | .btn[disabled]:hover {
103 |   cursor: not-allowed;
104 |   box-shadow: none;
105 |   transform: none;
106 | }
107 | 
108 | /* FORMS */
109 | form {
110 |   width: 100%;
111 |   display: flex;
112 |   flex-direction: column;
113 |   align-items: center;
114 | }
115 | 
116 | input {
117 |   margin-bottom: 1rem;
118 |   width: 20rem;
119 |   padding: 1.5rem;
120 |   font-size: 1.8rem;
121 |   border: none;
122 |   box-shadow: 0 0.1rem 1.4rem 0 rgba(86, 185, 235, 0.5);
123 | }
124 | 
125 | input::placeholder {
126 |   color: #aaa;
127 | }
128 | 


--------------------------------------------------------------------------------
/11. Fetch API Questions from Open Trivia API/app.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   background-color: #ecf5ff;
  3 |   font-size: 62.5%;
  4 | }
  5 | 
  6 | * {
  7 |   box-sizing: border-box;
  8 |   font-family: Arial, Helvetica, sans-serif;
  9 |   margin: 0;
 10 |   padding: 0;
 11 |   color: #333;
 12 | }
 13 | 
 14 | h1,
 15 | h2,
 16 | h3,
 17 | h4 {
 18 |   margin-bottom: 1rem;
 19 | }
 20 | 
 21 | h1 {
 22 |   font-size: 5.4rem;
 23 |   color: #56a5eb;
 24 |   margin-bottom: 5rem;
 25 | }
 26 | 
 27 | h1 > span {
 28 |   font-size: 2.4rem;
 29 |   font-weight: 500;
 30 | }
 31 | 
 32 | h2 {
 33 |   font-size: 4.2rem;
 34 |   margin-bottom: 4rem;
 35 |   font-weight: 700;
 36 | }
 37 | 
 38 | h3 {
 39 |   font-size: 2.8rem;
 40 |   font-weight: 500;
 41 | }
 42 | 
 43 | /* UTILITIES */
 44 | 
 45 | .container {
 46 |   width: 100vw;
 47 |   height: 100vh;
 48 |   display: flex;
 49 |   justify-content: center;
 50 |   align-items: center;
 51 |   max-width: 80rem;
 52 |   margin: 0 auto;
 53 |   padding: 2rem;
 54 | }
 55 | 
 56 | .container > * {
 57 |   width: 100%;
 58 | }
 59 | 
 60 | .flex-column {
 61 |   display: flex;
 62 |   flex-direction: column;
 63 | }
 64 | 
 65 | .flex-center {
 66 |   justify-content: center;
 67 |   align-items: center;
 68 | }
 69 | 
 70 | .justify-center {
 71 |   justify-content: center;
 72 | }
 73 | 
 74 | .text-center {
 75 |   text-align: center;
 76 | }
 77 | 
 78 | .hidden {
 79 |   display: none;
 80 | }
 81 | 
 82 | /* BUTTONS */
 83 | .btn {
 84 |   font-size: 1.8rem;
 85 |   padding: 1rem 0;
 86 |   width: 20rem;
 87 |   text-align: center;
 88 |   border: 0.1rem solid #56a5eb;
 89 |   margin-bottom: 1rem;
 90 |   text-decoration: none;
 91 |   color: #56a5eb;
 92 |   background-color: white;
 93 | }
 94 | 
 95 | .btn:hover {
 96 |   cursor: pointer;
 97 |   box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
 98 |   transform: translateY(-0.1rem);
 99 |   transition: transform 150ms;
100 | }
101 | 
102 | .btn[disabled]:hover {
103 |   cursor: not-allowed;
104 |   box-shadow: none;
105 |   transform: none;
106 | }
107 | 
108 | /* FORMS */
109 | form {
110 |   width: 100%;
111 |   display: flex;
112 |   flex-direction: column;
113 |   align-items: center;
114 | }
115 | 
116 | input {
117 |   margin-bottom: 1rem;
118 |   width: 20rem;
119 |   padding: 1.5rem;
120 |   font-size: 1.8rem;
121 |   border: none;
122 |   box-shadow: 0 0.1rem 1.4rem 0 rgba(86, 185, 235, 0.5);
123 | }
124 | 
125 | input::placeholder {
126 |   color: #aaa;
127 | }
128 | 


--------------------------------------------------------------------------------
/9. Load and Display High Scores from Local Storage/app.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   background-color: #ecf5ff;
  3 |   font-size: 62.5%;
  4 | }
  5 | 
  6 | * {
  7 |   box-sizing: border-box;
  8 |   font-family: Arial, Helvetica, sans-serif;
  9 |   margin: 0;
 10 |   padding: 0;
 11 |   color: #333;
 12 | }
 13 | 
 14 | h1,
 15 | h2,
 16 | h3,
 17 | h4 {
 18 |   margin-bottom: 1rem;
 19 | }
 20 | 
 21 | h1 {
 22 |   font-size: 5.4rem;
 23 |   color: #56a5eb;
 24 |   margin-bottom: 5rem;
 25 | }
 26 | 
 27 | h1 > span {
 28 |   font-size: 2.4rem;
 29 |   font-weight: 500;
 30 | }
 31 | 
 32 | h2 {
 33 |   font-size: 4.2rem;
 34 |   margin-bottom: 4rem;
 35 |   font-weight: 700;
 36 | }
 37 | 
 38 | h3 {
 39 |   font-size: 2.8rem;
 40 |   font-weight: 500;
 41 | }
 42 | 
 43 | /* UTILITIES */
 44 | 
 45 | .container {
 46 |   width: 100vw;
 47 |   height: 100vh;
 48 |   display: flex;
 49 |   justify-content: center;
 50 |   align-items: center;
 51 |   max-width: 80rem;
 52 |   margin: 0 auto;
 53 |   padding: 2rem;
 54 | }
 55 | 
 56 | .container > * {
 57 |   width: 100%;
 58 | }
 59 | 
 60 | .flex-column {
 61 |   display: flex;
 62 |   flex-direction: column;
 63 | }
 64 | 
 65 | .flex-center {
 66 |   justify-content: center;
 67 |   align-items: center;
 68 | }
 69 | 
 70 | .justify-center {
 71 |   justify-content: center;
 72 | }
 73 | 
 74 | .text-center {
 75 |   text-align: center;
 76 | }
 77 | 
 78 | .hidden {
 79 |   display: none;
 80 | }
 81 | 
 82 | /* BUTTONS */
 83 | .btn {
 84 |   font-size: 1.8rem;
 85 |   padding: 1rem 0;
 86 |   width: 20rem;
 87 |   text-align: center;
 88 |   border: 0.1rem solid #56a5eb;
 89 |   margin-bottom: 1rem;
 90 |   text-decoration: none;
 91 |   color: #56a5eb;
 92 |   background-color: white;
 93 | }
 94 | 
 95 | .btn:hover {
 96 |   cursor: pointer;
 97 |   box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
 98 |   transform: translateY(-0.1rem);
 99 |   transition: transform 150ms;
100 | }
101 | 
102 | .btn[disabled]:hover {
103 |   cursor: not-allowed;
104 |   box-shadow: none;
105 |   transform: none;
106 | }
107 | 
108 | /* FORMS */
109 | form {
110 |   width: 100%;
111 |   display: flex;
112 |   flex-direction: column;
113 |   align-items: center;
114 | }
115 | 
116 | input {
117 |   margin-bottom: 1rem;
118 |   width: 20rem;
119 |   padding: 1.5rem;
120 |   font-size: 1.8rem;
121 |   border: none;
122 |   box-shadow: 0 0.1rem 1.4rem 0 rgba(86, 185, 235, 0.5);
123 | }
124 | 
125 | input::placeholder {
126 |   color: #aaa;
127 | }
128 | 


--------------------------------------------------------------------------------
/3. Display Hard Coded Question and Answers/game.js:
--------------------------------------------------------------------------------
 1 | const question = document.getElementById('question');
 2 | const choices = Array.from(document.getElementsByClassName('choice-text'));
 3 | 
 4 | let currentQuestion = {};
 5 | let acceptingAnswers = false;
 6 | let score = 0;
 7 | let questionCounter = 0;
 8 | let availableQuesions = [];
 9 | 
10 | let questions = [
11 |     {
12 |         question: 'Inside which HTML element do we put the JavaScript??',
13 |         choice1: '<script>',
14 |         choice2: '<javascript>',
15 |         choice3: '<js>',
16 |         choice4: '<scripting>',
17 |         answer: 1,
18 |     },
19 |     {
20 |         question:
21 |             "What is the correct syntax for referring to an external script called 'xxx.js'?",
22 |         choice1: "<script href='xxx.js'>",
23 |         choice2: "<script name='xxx.js'>",
24 |         choice3: "<script src='xxx.js'>",
25 |         choice4: "<script file='xxx.js'>",
26 |         answer: 3,
27 |     },
28 |     {
29 |         question: " How do you write 'Hello World' in an alert box?",
30 |         choice1: "msgBox('Hello World');",
31 |         choice2: "alertBox('Hello World');",
32 |         choice3: "msg('Hello World');",
33 |         choice4: "alert('Hello World');",
34 |         answer: 4,
35 |     },
36 | ];
37 | 
38 | //CONSTANTS
39 | const CORRECT_BONUS = 10;
40 | const MAX_QUESTIONS = 3;
41 | 
42 | startGame = () => {
43 |     questionCounter = 0;
44 |     score = 0;
45 |     availableQuesions = [...questions];
46 |     getNewQuestion();
47 | };
48 | 
49 | getNewQuestion = () => {
50 |     if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) {
51 |         //go to the end page
52 |         return window.location.assign('/end.html');
53 |     }
54 |     questionCounter++;
55 |     const questionIndex = Math.floor(Math.random() * availableQuesions.length);
56 |     currentQuestion = availableQuesions[questionIndex];
57 |     question.innerText = currentQuestion.question;
58 | 
59 |     choices.forEach((choice) => {
60 |         const number = choice.dataset['number'];
61 |         choice.innerText = currentQuestion['choice' + number];
62 |     });
63 | 
64 |     availableQuesions.splice(questionIndex, 1);
65 |     acceptingAnswers = true;
66 | };
67 | 
68 | choices.forEach((choice) => {
69 |     choice.addEventListener('click', (e) => {
70 |         if (!acceptingAnswers) return;
71 | 
72 |         acceptingAnswers = false;
73 |         const selectedChoice = e.target;
74 |         const selectedAnswer = selectedChoice.dataset['number'];
75 |         getNewQuestion();
76 |     });
77 | });
78 | 
79 | startGame();
80 | 


--------------------------------------------------------------------------------
/4. Display Feedback for Correct and Incorrect Answers/game.js:
--------------------------------------------------------------------------------
 1 | const question = document.getElementById("question");
 2 | const choices = Array.from(document.getElementsByClassName("choice-text"));
 3 | 
 4 | let currentQuestion = {};
 5 | let acceptingAnswers = false;
 6 | let score = 0;
 7 | let questionCounter = 0;
 8 | let availableQuesions = [];
 9 | 
10 | let questions = [
11 |   {
12 |     question: "Inside which HTML element do we put the JavaScript??",
13 |     choice1: "<script>",
14 |     choice2: "<javascript>",
15 |     choice3: "<js>",
16 |     choice4: "<scripting>",
17 |     answer: 1
18 |   },
19 |   {
20 |     question:
21 |       "What is the correct syntax for referring to an external script called 'xxx.js'?",
22 |     choice1: "<script href='xxx.js'>",
23 |     choice2: "<script name='xxx.js'>",
24 |     choice3: "<script src='xxx.js'>",
25 |     choice4: "<script file='xxx.js'>",
26 |     answer: 3
27 |   },
28 |   {
29 |     question: " How do you write 'Hello World' in an alert box?",
30 |     choice1: "msgBox('Hello World');",
31 |     choice2: "alertBox('Hello World');",
32 |     choice3: "msg('Hello World');",
33 |     choice4: "alert('Hello World');",
34 |     answer: 4
35 |   }
36 | ];
37 | 
38 | //CONSTANTS
39 | const CORRECT_BONUS = 10;
40 | const MAX_QUESTIONS = 3;
41 | 
42 | startGame = () => {
43 |   questionCounter = 0;
44 |   score = 0;
45 |   availableQuesions = [...questions];
46 |   getNewQuestion();
47 | };
48 | 
49 | getNewQuestion = () => {
50 |   if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) {
51 |     //go to the end page
52 |     return window.location.assign("/end.html");
53 |   }
54 |   questionCounter++;
55 |   const questionIndex = Math.floor(Math.random() * availableQuesions.length);
56 |   currentQuestion = availableQuesions[questionIndex];
57 |   question.innerText = currentQuestion.question;
58 | 
59 |   choices.forEach(choice => {
60 |     const number = choice.dataset["number"];
61 |     choice.innerText = currentQuestion["choice" + number];
62 |   });
63 | 
64 |   availableQuesions.splice(questionIndex, 1);
65 |   acceptingAnswers = true;
66 | };
67 | 
68 | choices.forEach(choice => {
69 |   choice.addEventListener("click", e => {
70 |     if (!acceptingAnswers) return;
71 | 
72 |     acceptingAnswers = false;
73 |     const selectedChoice = e.target;
74 |     const selectedAnswer = selectedChoice.dataset["number"];
75 | 
76 |     const classToApply =
77 |       selectedAnswer == currentQuestion.answer ? "correct" : "incorrect";
78 | 
79 |     selectedChoice.parentElement.classList.add(classToApply);
80 | 
81 |     setTimeout(() => {
82 |       selectedChoice.parentElement.classList.remove(classToApply);
83 |       getNewQuestion();
84 |     }, 1000);
85 |   });
86 | });
87 | 
88 | startGame();
89 | 


--------------------------------------------------------------------------------
/10. Fetch Questions from Local JSON File/game.js:
--------------------------------------------------------------------------------
 1 | const question = document.getElementById('question');
 2 | const choices = Array.from(document.getElementsByClassName('choice-text'));
 3 | const progressText = document.getElementById('progressText');
 4 | const scoreText = document.getElementById('score');
 5 | const progressBarFull = document.getElementById('progressBarFull');
 6 | let currentQuestion = {};
 7 | let acceptingAnswers = false;
 8 | let score = 0;
 9 | let questionCounter = 0;
10 | let availableQuesions = [];
11 | 
12 | let questions = [];
13 | 
14 | fetch('questions.json')
15 |     .then((res) => {
16 |         return res.json();
17 |     })
18 |     .then((loadedQuestions) => {
19 |         questions = loadedQuestions;
20 |         startGame();
21 |     })
22 |     .catch((err) => {
23 |         console.error(err);
24 |     });
25 | 
26 | //CONSTANTS
27 | const CORRECT_BONUS = 10;
28 | const MAX_QUESTIONS = 3;
29 | 
30 | startGame = () => {
31 |     questionCounter = 0;
32 |     score = 0;
33 |     availableQuesions = [...questions];
34 |     getNewQuestion();
35 | };
36 | 
37 | getNewQuestion = () => {
38 |     if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) {
39 |         localStorage.setItem('mostRecentScore', score);
40 |         //go to the end page
41 |         return window.location.assign('/end.html');
42 |     }
43 |     questionCounter++;
44 |     progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`;
45 |     //Update the progress bar
46 |     progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`;
47 | 
48 |     const questionIndex = Math.floor(Math.random() * availableQuesions.length);
49 |     currentQuestion = availableQuesions[questionIndex];
50 |     question.innerText = currentQuestion.question;
51 | 
52 |     choices.forEach((choice) => {
53 |         const number = choice.dataset['number'];
54 |         choice.innerText = currentQuestion['choice' + number];
55 |     });
56 | 
57 |     availableQuesions.splice(questionIndex, 1);
58 |     acceptingAnswers = true;
59 | };
60 | 
61 | choices.forEach((choice) => {
62 |     choice.addEventListener('click', (e) => {
63 |         if (!acceptingAnswers) return;
64 | 
65 |         acceptingAnswers = false;
66 |         const selectedChoice = e.target;
67 |         const selectedAnswer = selectedChoice.dataset['number'];
68 | 
69 |         const classToApply =
70 |             selectedAnswer == currentQuestion.answer ? 'correct' : 'incorrect';
71 | 
72 |         if (classToApply === 'correct') {
73 |             incrementScore(CORRECT_BONUS);
74 |         }
75 | 
76 |         selectedChoice.parentElement.classList.add(classToApply);
77 | 
78 |         setTimeout(() => {
79 |             selectedChoice.parentElement.classList.remove(classToApply);
80 |             getNewQuestion();
81 |         }, 1000);
82 |     });
83 | });
84 | 
85 | incrementScore = (num) => {
86 |     score += num;
87 |     scoreText.innerText = score;
88 | };
89 | 


--------------------------------------------------------------------------------
/5. Create a Head's Up Display/game.js:
--------------------------------------------------------------------------------
  1 | const question = document.getElementById("question");
  2 | const choices = Array.from(document.getElementsByClassName("choice-text"));
  3 | const questionCounterText = document.getElementById("questionCounter");
  4 | const scoreText = document.getElementById("score");
  5 | 
  6 | let currentQuestion = {};
  7 | let acceptingAnswers = false;
  8 | let score = 0;
  9 | let questionCounter = 0;
 10 | let availableQuesions = [];
 11 | 
 12 | let questions = [
 13 |   {
 14 |     question: "Inside which HTML element do we put the JavaScript??",
 15 |     choice1: "<script>",
 16 |     choice2: "<javascript>",
 17 |     choice3: "<js>",
 18 |     choice4: "<scripting>",
 19 |     answer: 1
 20 |   },
 21 |   {
 22 |     question:
 23 |       "What is the correct syntax for referring to an external script called 'xxx.js'?",
 24 |     choice1: "<script href='xxx.js'>",
 25 |     choice2: "<script name='xxx.js'>",
 26 |     choice3: "<script src='xxx.js'>",
 27 |     choice4: "<script file='xxx.js'>",
 28 |     answer: 3
 29 |   },
 30 |   {
 31 |     question: " How do you write 'Hello World' in an alert box?",
 32 |     choice1: "msgBox('Hello World');",
 33 |     choice2: "alertBox('Hello World');",
 34 |     choice3: "msg('Hello World');",
 35 |     choice4: "alert('Hello World');",
 36 |     answer: 4
 37 |   }
 38 | ];
 39 | 
 40 | //CONSTANTS
 41 | const CORRECT_BONUS = 10;
 42 | const MAX_QUESTIONS = 3;
 43 | 
 44 | startGame = () => {
 45 |   questionCounter = 0;
 46 |   score = 0;
 47 |   availableQuesions = [...questions];
 48 |   getNewQuestion();
 49 | };
 50 | 
 51 | getNewQuestion = () => {
 52 |   if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) {
 53 |     //go to the end page
 54 |     return window.location.assign("/end.html");
 55 |   }
 56 |   questionCounter++;
 57 |   questionCounterText.innerText = `${questionCounter}/${MAX_QUESTIONS}`;
 58 | 
 59 |   const questionIndex = Math.floor(Math.random() * availableQuesions.length);
 60 |   currentQuestion = availableQuesions[questionIndex];
 61 |   question.innerText = currentQuestion.question;
 62 | 
 63 |   choices.forEach(choice => {
 64 |     const number = choice.dataset["number"];
 65 |     choice.innerText = currentQuestion["choice" + number];
 66 |   });
 67 | 
 68 |   availableQuesions.splice(questionIndex, 1);
 69 |   acceptingAnswers = true;
 70 | };
 71 | 
 72 | choices.forEach(choice => {
 73 |   choice.addEventListener("click", e => {
 74 |     if (!acceptingAnswers) return;
 75 | 
 76 |     acceptingAnswers = false;
 77 |     const selectedChoice = e.target;
 78 |     const selectedAnswer = selectedChoice.dataset["number"];
 79 | 
 80 |     const classToApply =
 81 |       selectedAnswer == currentQuestion.answer ? "correct" : "incorrect";
 82 | 
 83 |     if (classToApply === "correct") {
 84 |       incrementScore(CORRECT_BONUS);
 85 |     }
 86 | 
 87 |     selectedChoice.parentElement.classList.add(classToApply);
 88 | 
 89 |     setTimeout(() => {
 90 |       selectedChoice.parentElement.classList.remove(classToApply);
 91 |       getNewQuestion();
 92 |     }, 1000);
 93 |   });
 94 | });
 95 | 
 96 | incrementScore = num => {
 97 |   score += num;
 98 |   scoreText.innerText = score;
 99 | };
100 | 
101 | startGame();
102 | 


--------------------------------------------------------------------------------
/6. Create a Progress Bar/game.js:
--------------------------------------------------------------------------------
  1 | const question = document.getElementById("question");
  2 | const choices = Array.from(document.getElementsByClassName("choice-text"));
  3 | const progressText = document.getElementById("progressText");
  4 | const scoreText = document.getElementById("score");
  5 | const progressBarFull = document.getElementById("progressBarFull");
  6 | let currentQuestion = {};
  7 | let acceptingAnswers = false;
  8 | let score = 0;
  9 | let questionCounter = 0;
 10 | let availableQuesions = [];
 11 | 
 12 | let questions = [
 13 |   {
 14 |     question: "Inside which HTML element do we put the JavaScript??",
 15 |     choice1: "<script>",
 16 |     choice2: "<javascript>",
 17 |     choice3: "<js>",
 18 |     choice4: "<scripting>",
 19 |     answer: 1
 20 |   },
 21 |   {
 22 |     question:
 23 |       "What is the correct syntax for referring to an external script called 'xxx.js'?",
 24 |     choice1: "<script href='xxx.js'>",
 25 |     choice2: "<script name='xxx.js'>",
 26 |     choice3: "<script src='xxx.js'>",
 27 |     choice4: "<script file='xxx.js'>",
 28 |     answer: 3
 29 |   },
 30 |   {
 31 |     question: " How do you write 'Hello World' in an alert box?",
 32 |     choice1: "msgBox('Hello World');",
 33 |     choice2: "alertBox('Hello World');",
 34 |     choice3: "msg('Hello World');",
 35 |     choice4: "alert('Hello World');",
 36 |     answer: 4
 37 |   }
 38 | ];
 39 | 
 40 | //CONSTANTS
 41 | const CORRECT_BONUS = 10;
 42 | const MAX_QUESTIONS = 3;
 43 | 
 44 | startGame = () => {
 45 |   questionCounter = 0;
 46 |   score = 0;
 47 |   availableQuesions = [...questions];
 48 |   getNewQuestion();
 49 | };
 50 | 
 51 | getNewQuestion = () => {
 52 |   if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) {
 53 |     //go to the end page
 54 |     return window.location.assign("/end.html");
 55 |   }
 56 |   questionCounter++;
 57 |   progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`;
 58 |   //Update the progress bar
 59 |   progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`;
 60 | 
 61 |   const questionIndex = Math.floor(Math.random() * availableQuesions.length);
 62 |   currentQuestion = availableQuesions[questionIndex];
 63 |   question.innerText = currentQuestion.question;
 64 | 
 65 |   choices.forEach(choice => {
 66 |     const number = choice.dataset["number"];
 67 |     choice.innerText = currentQuestion["choice" + number];
 68 |   });
 69 | 
 70 |   availableQuesions.splice(questionIndex, 1);
 71 |   acceptingAnswers = true;
 72 | };
 73 | 
 74 | choices.forEach(choice => {
 75 |   choice.addEventListener("click", e => {
 76 |     if (!acceptingAnswers) return;
 77 | 
 78 |     acceptingAnswers = false;
 79 |     const selectedChoice = e.target;
 80 |     const selectedAnswer = selectedChoice.dataset["number"];
 81 | 
 82 |     const classToApply =
 83 |       selectedAnswer == currentQuestion.answer ? "correct" : "incorrect";
 84 | 
 85 |     if (classToApply === "correct") {
 86 |       incrementScore(CORRECT_BONUS);
 87 |     }
 88 | 
 89 |     selectedChoice.parentElement.classList.add(classToApply);
 90 | 
 91 |     setTimeout(() => {
 92 |       selectedChoice.parentElement.classList.remove(classToApply);
 93 |       getNewQuestion();
 94 |     }, 1000);
 95 |   });
 96 | });
 97 | 
 98 | incrementScore = num => {
 99 |   score += num;
100 |   scoreText.innerText = score;
101 | };
102 | 
103 | startGame();
104 | 


--------------------------------------------------------------------------------
/7. Create and Style the End Page/game.js:
--------------------------------------------------------------------------------
  1 | const question = document.getElementById("question");
  2 | const choices = Array.from(document.getElementsByClassName("choice-text"));
  3 | const progressText = document.getElementById("progressText");
  4 | const scoreText = document.getElementById("score");
  5 | const progressBarFull = document.getElementById("progressBarFull");
  6 | let currentQuestion = {};
  7 | let acceptingAnswers = false;
  8 | let score = 0;
  9 | let questionCounter = 0;
 10 | let availableQuesions = [];
 11 | 
 12 | let questions = [
 13 |   {
 14 |     question: "Inside which HTML element do we put the JavaScript??",
 15 |     choice1: "<script>",
 16 |     choice2: "<javascript>",
 17 |     choice3: "<js>",
 18 |     choice4: "<scripting>",
 19 |     answer: 1
 20 |   },
 21 |   {
 22 |     question:
 23 |       "What is the correct syntax for referring to an external script called 'xxx.js'?",
 24 |     choice1: "<script href='xxx.js'>",
 25 |     choice2: "<script name='xxx.js'>",
 26 |     choice3: "<script src='xxx.js'>",
 27 |     choice4: "<script file='xxx.js'>",
 28 |     answer: 3
 29 |   },
 30 |   {
 31 |     question: " How do you write 'Hello World' in an alert box?",
 32 |     choice1: "msgBox('Hello World');",
 33 |     choice2: "alertBox('Hello World');",
 34 |     choice3: "msg('Hello World');",
 35 |     choice4: "alert('Hello World');",
 36 |     answer: 4
 37 |   }
 38 | ];
 39 | 
 40 | //CONSTANTS
 41 | const CORRECT_BONUS = 10;
 42 | const MAX_QUESTIONS = 3;
 43 | 
 44 | startGame = () => {
 45 |   questionCounter = 0;
 46 |   score = 0;
 47 |   availableQuesions = [...questions];
 48 |   getNewQuestion();
 49 | };
 50 | 
 51 | getNewQuestion = () => {
 52 |   if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) {
 53 |     localStorage.setItem("mostRecentScore", score);
 54 |     //go to the end page
 55 |     return window.location.assign("/end.html");
 56 |   }
 57 |   questionCounter++;
 58 |   progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`;
 59 |   //Update the progress bar
 60 |   progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`;
 61 | 
 62 |   const questionIndex = Math.floor(Math.random() * availableQuesions.length);
 63 |   currentQuestion = availableQuesions[questionIndex];
 64 |   question.innerText = currentQuestion.question;
 65 | 
 66 |   choices.forEach(choice => {
 67 |     const number = choice.dataset["number"];
 68 |     choice.innerText = currentQuestion["choice" + number];
 69 |   });
 70 | 
 71 |   availableQuesions.splice(questionIndex, 1);
 72 |   acceptingAnswers = true;
 73 | };
 74 | 
 75 | choices.forEach(choice => {
 76 |   choice.addEventListener("click", e => {
 77 |     if (!acceptingAnswers) return;
 78 | 
 79 |     acceptingAnswers = false;
 80 |     const selectedChoice = e.target;
 81 |     const selectedAnswer = selectedChoice.dataset["number"];
 82 | 
 83 |     const classToApply =
 84 |       selectedAnswer == currentQuestion.answer ? "correct" : "incorrect";
 85 | 
 86 |     if (classToApply === "correct") {
 87 |       incrementScore(CORRECT_BONUS);
 88 |     }
 89 | 
 90 |     selectedChoice.parentElement.classList.add(classToApply);
 91 | 
 92 |     setTimeout(() => {
 93 |       selectedChoice.parentElement.classList.remove(classToApply);
 94 |       getNewQuestion();
 95 |     }, 1000);
 96 |   });
 97 | });
 98 | 
 99 | incrementScore = num => {
100 |   score += num;
101 |   scoreText.innerText = score;
102 | };
103 | 
104 | startGame();
105 | 


--------------------------------------------------------------------------------
/8. Save High Scores in Local Storage/game.js:
--------------------------------------------------------------------------------
  1 | const question = document.getElementById("question");
  2 | const choices = Array.from(document.getElementsByClassName("choice-text"));
  3 | const progressText = document.getElementById("progressText");
  4 | const scoreText = document.getElementById("score");
  5 | const progressBarFull = document.getElementById("progressBarFull");
  6 | let currentQuestion = {};
  7 | let acceptingAnswers = false;
  8 | let score = 0;
  9 | let questionCounter = 0;
 10 | let availableQuesions = [];
 11 | 
 12 | let questions = [
 13 |   {
 14 |     question: "Inside which HTML element do we put the JavaScript??",
 15 |     choice1: "<script>",
 16 |     choice2: "<javascript>",
 17 |     choice3: "<js>",
 18 |     choice4: "<scripting>",
 19 |     answer: 1
 20 |   },
 21 |   {
 22 |     question:
 23 |       "What is the correct syntax for referring to an external script called 'xxx.js'?",
 24 |     choice1: "<script href='xxx.js'>",
 25 |     choice2: "<script name='xxx.js'>",
 26 |     choice3: "<script src='xxx.js'>",
 27 |     choice4: "<script file='xxx.js'>",
 28 |     answer: 3
 29 |   },
 30 |   {
 31 |     question: " How do you write 'Hello World' in an alert box?",
 32 |     choice1: "msgBox('Hello World');",
 33 |     choice2: "alertBox('Hello World');",
 34 |     choice3: "msg('Hello World');",
 35 |     choice4: "alert('Hello World');",
 36 |     answer: 4
 37 |   }
 38 | ];
 39 | 
 40 | //CONSTANTS
 41 | const CORRECT_BONUS = 10;
 42 | const MAX_QUESTIONS = 3;
 43 | 
 44 | startGame = () => {
 45 |   questionCounter = 0;
 46 |   score = 0;
 47 |   availableQuesions = [...questions];
 48 |   getNewQuestion();
 49 | };
 50 | 
 51 | getNewQuestion = () => {
 52 |   if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) {
 53 |     localStorage.setItem("mostRecentScore", score);
 54 |     //go to the end page
 55 |     return window.location.assign("/end.html");
 56 |   }
 57 |   questionCounter++;
 58 |   progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`;
 59 |   //Update the progress bar
 60 |   progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`;
 61 | 
 62 |   const questionIndex = Math.floor(Math.random() * availableQuesions.length);
 63 |   currentQuestion = availableQuesions[questionIndex];
 64 |   question.innerText = currentQuestion.question;
 65 | 
 66 |   choices.forEach(choice => {
 67 |     const number = choice.dataset["number"];
 68 |     choice.innerText = currentQuestion["choice" + number];
 69 |   });
 70 | 
 71 |   availableQuesions.splice(questionIndex, 1);
 72 |   acceptingAnswers = true;
 73 | };
 74 | 
 75 | choices.forEach(choice => {
 76 |   choice.addEventListener("click", e => {
 77 |     if (!acceptingAnswers) return;
 78 | 
 79 |     acceptingAnswers = false;
 80 |     const selectedChoice = e.target;
 81 |     const selectedAnswer = selectedChoice.dataset["number"];
 82 | 
 83 |     const classToApply =
 84 |       selectedAnswer == currentQuestion.answer ? "correct" : "incorrect";
 85 | 
 86 |     if (classToApply === "correct") {
 87 |       incrementScore(CORRECT_BONUS);
 88 |     }
 89 | 
 90 |     selectedChoice.parentElement.classList.add(classToApply);
 91 | 
 92 |     setTimeout(() => {
 93 |       selectedChoice.parentElement.classList.remove(classToApply);
 94 |       getNewQuestion();
 95 |     }, 1000);
 96 |   });
 97 | });
 98 | 
 99 | incrementScore = num => {
100 |   score += num;
101 |   scoreText.innerText = score;
102 | };
103 | 
104 | startGame();
105 | 


--------------------------------------------------------------------------------
/9. Load and Display High Scores from Local Storage/game.js:
--------------------------------------------------------------------------------
  1 | const question = document.getElementById("question");
  2 | const choices = Array.from(document.getElementsByClassName("choice-text"));
  3 | const progressText = document.getElementById("progressText");
  4 | const scoreText = document.getElementById("score");
  5 | const progressBarFull = document.getElementById("progressBarFull");
  6 | let currentQuestion = {};
  7 | let acceptingAnswers = false;
  8 | let score = 0;
  9 | let questionCounter = 0;
 10 | let availableQuesions = [];
 11 | 
 12 | let questions = [
 13 |   {
 14 |     question: "Inside which HTML element do we put the JavaScript??",
 15 |     choice1: "<script>",
 16 |     choice2: "<javascript>",
 17 |     choice3: "<js>",
 18 |     choice4: "<scripting>",
 19 |     answer: 1
 20 |   },
 21 |   {
 22 |     question:
 23 |       "What is the correct syntax for referring to an external script called 'xxx.js'?",
 24 |     choice1: "<script href='xxx.js'>",
 25 |     choice2: "<script name='xxx.js'>",
 26 |     choice3: "<script src='xxx.js'>",
 27 |     choice4: "<script file='xxx.js'>",
 28 |     answer: 3
 29 |   },
 30 |   {
 31 |     question: " How do you write 'Hello World' in an alert box?",
 32 |     choice1: "msgBox('Hello World');",
 33 |     choice2: "alertBox('Hello World');",
 34 |     choice3: "msg('Hello World');",
 35 |     choice4: "alert('Hello World');",
 36 |     answer: 4
 37 |   }
 38 | ];
 39 | 
 40 | //CONSTANTS
 41 | const CORRECT_BONUS = 10;
 42 | const MAX_QUESTIONS = 3;
 43 | 
 44 | startGame = () => {
 45 |   questionCounter = 0;
 46 |   score = 0;
 47 |   availableQuesions = [...questions];
 48 |   getNewQuestion();
 49 | };
 50 | 
 51 | getNewQuestion = () => {
 52 |   if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) {
 53 |     localStorage.setItem("mostRecentScore", score);
 54 |     //go to the end page
 55 |     return window.location.assign("/end.html");
 56 |   }
 57 |   questionCounter++;
 58 |   progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`;
 59 |   //Update the progress bar
 60 |   progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`;
 61 | 
 62 |   const questionIndex = Math.floor(Math.random() * availableQuesions.length);
 63 |   currentQuestion = availableQuesions[questionIndex];
 64 |   question.innerText = currentQuestion.question;
 65 | 
 66 |   choices.forEach(choice => {
 67 |     const number = choice.dataset["number"];
 68 |     choice.innerText = currentQuestion["choice" + number];
 69 |   });
 70 | 
 71 |   availableQuesions.splice(questionIndex, 1);
 72 |   acceptingAnswers = true;
 73 | };
 74 | 
 75 | choices.forEach(choice => {
 76 |   choice.addEventListener("click", e => {
 77 |     if (!acceptingAnswers) return;
 78 | 
 79 |     acceptingAnswers = false;
 80 |     const selectedChoice = e.target;
 81 |     const selectedAnswer = selectedChoice.dataset["number"];
 82 | 
 83 |     const classToApply =
 84 |       selectedAnswer == currentQuestion.answer ? "correct" : "incorrect";
 85 | 
 86 |     if (classToApply === "correct") {
 87 |       incrementScore(CORRECT_BONUS);
 88 |     }
 89 | 
 90 |     selectedChoice.parentElement.classList.add(classToApply);
 91 | 
 92 |     setTimeout(() => {
 93 |       selectedChoice.parentElement.classList.remove(classToApply);
 94 |       getNewQuestion();
 95 |     }, 1000);
 96 |   });
 97 | });
 98 | 
 99 | incrementScore = num => {
100 |   score += num;
101 |   scoreText.innerText = score;
102 | };
103 | 
104 | startGame();
105 | 


--------------------------------------------------------------------------------
/11. Fetch API Questions from Open Trivia API/game.js:
--------------------------------------------------------------------------------
  1 | const question = document.getElementById('question');
  2 | const choices = Array.from(document.getElementsByClassName('choice-text'));
  3 | const progressText = document.getElementById('progressText');
  4 | const scoreText = document.getElementById('score');
  5 | const progressBarFull = document.getElementById('progressBarFull');
  6 | let currentQuestion = {};
  7 | let acceptingAnswers = false;
  8 | let score = 0;
  9 | let questionCounter = 0;
 10 | let availableQuesions = [];
 11 | 
 12 | let questions = [];
 13 | 
 14 | fetch(
 15 |     'https://opentdb.com/api.php?amount=10&category=9&difficulty=easy&type=multiple'
 16 | )
 17 |     .then((res) => {
 18 |         return res.json();
 19 |     })
 20 |     .then((loadedQuestions) => {
 21 |         questions = loadedQuestions.results.map((loadedQuestion) => {
 22 |             const formattedQuestion = {
 23 |                 question: loadedQuestion.question,
 24 |             };
 25 | 
 26 |             const answerChoices = [...loadedQuestion.incorrect_answers];
 27 |             formattedQuestion.answer = Math.floor(Math.random() * 4) + 1;
 28 |             answerChoices.splice(
 29 |                 formattedQuestion.answer - 1,
 30 |                 0,
 31 |                 loadedQuestion.correct_answer
 32 |             );
 33 | 
 34 |             answerChoices.forEach((choice, index) => {
 35 |                 formattedQuestion['choice' + (index + 1)] = choice;
 36 |             });
 37 | 
 38 |             return formattedQuestion;
 39 |         });
 40 |         startGame();
 41 |     })
 42 |     .catch((err) => {
 43 |         console.error(err);
 44 |     });
 45 | 
 46 | //CONSTANTS
 47 | const CORRECT_BONUS = 10;
 48 | const MAX_QUESTIONS = 3;
 49 | 
 50 | startGame = () => {
 51 |     questionCounter = 0;
 52 |     score = 0;
 53 |     availableQuesions = [...questions];
 54 |     getNewQuestion();
 55 | };
 56 | 
 57 | getNewQuestion = () => {
 58 |     if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) {
 59 |         localStorage.setItem('mostRecentScore', score);
 60 |         //go to the end page
 61 |         return window.location.assign('/end.html');
 62 |     }
 63 |     questionCounter++;
 64 |     progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`;
 65 |     //Update the progress bar
 66 |     progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`;
 67 | 
 68 |     const questionIndex = Math.floor(Math.random() * availableQuesions.length);
 69 |     currentQuestion = availableQuesions[questionIndex];
 70 |     question.innerText = currentQuestion.question;
 71 | 
 72 |     choices.forEach((choice) => {
 73 |         const number = choice.dataset['number'];
 74 |         choice.innerText = currentQuestion['choice' + number];
 75 |     });
 76 | 
 77 |     availableQuesions.splice(questionIndex, 1);
 78 |     acceptingAnswers = true;
 79 | };
 80 | 
 81 | choices.forEach((choice) => {
 82 |     choice.addEventListener('click', (e) => {
 83 |         if (!acceptingAnswers) return;
 84 | 
 85 |         acceptingAnswers = false;
 86 |         const selectedChoice = e.target;
 87 |         const selectedAnswer = selectedChoice.dataset['number'];
 88 | 
 89 |         const classToApply =
 90 |             selectedAnswer == currentQuestion.answer ? 'correct' : 'incorrect';
 91 | 
 92 |         if (classToApply === 'correct') {
 93 |             incrementScore(CORRECT_BONUS);
 94 |         }
 95 | 
 96 |         selectedChoice.parentElement.classList.add(classToApply);
 97 | 
 98 |         setTimeout(() => {
 99 |             selectedChoice.parentElement.classList.remove(classToApply);
100 |             getNewQuestion();
101 |         }, 1000);
102 |     });
103 | });
104 | 
105 | incrementScore = (num) => {
106 |     score += num;
107 |     scoreText.innerText = score;
108 | };
109 | 


--------------------------------------------------------------------------------
/Quiz App Master/game.js:
--------------------------------------------------------------------------------
  1 | const question = document.getElementById('question');
  2 | const choices = Array.from(document.getElementsByClassName('choice-text'));
  3 | const progressText = document.getElementById('progressText');
  4 | const scoreText = document.getElementById('score');
  5 | const progressBarFull = document.getElementById('progressBarFull');
  6 | const loader = document.getElementById('loader');
  7 | const game = document.getElementById('game');
  8 | let currentQuestion = {};
  9 | let acceptingAnswers = false;
 10 | let score = 0;
 11 | let questionCounter = 0;
 12 | let availableQuesions = [];
 13 | 
 14 | let questions = [];
 15 | 
 16 | fetch(
 17 |     'https://opentdb.com/api.php?amount=10&category=9&difficulty=easy&type=multiple'
 18 | )
 19 |     .then((res) => {
 20 |         return res.json();
 21 |     })
 22 |     .then((loadedQuestions) => {
 23 |         questions = loadedQuestions.results.map((loadedQuestion) => {
 24 |             const formattedQuestion = {
 25 |                 question: loadedQuestion.question,
 26 |             };
 27 | 
 28 |             const answerChoices = [...loadedQuestion.incorrect_answers];
 29 |             formattedQuestion.answer = Math.floor(Math.random() * 4) + 1;
 30 |             answerChoices.splice(
 31 |                 formattedQuestion.answer - 1,
 32 |                 0,
 33 |                 loadedQuestion.correct_answer
 34 |             );
 35 | 
 36 |             answerChoices.forEach((choice, index) => {
 37 |                 formattedQuestion['choice' + (index + 1)] = choice;
 38 |             });
 39 | 
 40 |             return formattedQuestion;
 41 |         });
 42 | 
 43 |         startGame();
 44 |     })
 45 |     .catch((err) => {
 46 |         console.error(err);
 47 |     });
 48 | 
 49 | //CONSTANTS
 50 | const CORRECT_BONUS = 10;
 51 | const MAX_QUESTIONS = 3;
 52 | 
 53 | startGame = () => {
 54 |     questionCounter = 0;
 55 |     score = 0;
 56 |     availableQuesions = [...questions];
 57 |     getNewQuestion();
 58 |     game.classList.remove('hidden');
 59 |     loader.classList.add('hidden');
 60 | };
 61 | 
 62 | getNewQuestion = () => {
 63 |     if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) {
 64 |         localStorage.setItem('mostRecentScore', score);
 65 |         //go to the end page
 66 |         return window.location.assign('/end.html');
 67 |     }
 68 |     questionCounter++;
 69 |     progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`;
 70 |     //Update the progress bar
 71 |     progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`;
 72 | 
 73 |     const questionIndex = Math.floor(Math.random() * availableQuesions.length);
 74 |     currentQuestion = availableQuesions[questionIndex];
 75 |     question.innerHTML = currentQuestion.question;
 76 | 
 77 |     choices.forEach((choice) => {
 78 |         const number = choice.dataset['number'];
 79 |         choice.innerHTML = currentQuestion['choice' + number];
 80 |     });
 81 | 
 82 |     availableQuesions.splice(questionIndex, 1);
 83 |     acceptingAnswers = true;
 84 | };
 85 | 
 86 | choices.forEach((choice) => {
 87 |     choice.addEventListener('click', (e) => {
 88 |         if (!acceptingAnswers) return;
 89 | 
 90 |         acceptingAnswers = false;
 91 |         const selectedChoice = e.target;
 92 |         const selectedAnswer = selectedChoice.dataset['number'];
 93 | 
 94 |         const classToApply =
 95 |             selectedAnswer == currentQuestion.answer ? 'correct' : 'incorrect';
 96 | 
 97 |         if (classToApply === 'correct') {
 98 |             incrementScore(CORRECT_BONUS);
 99 |         }
100 | 
101 |         selectedChoice.parentElement.classList.add(classToApply);
102 | 
103 |         setTimeout(() => {
104 |             selectedChoice.parentElement.classList.remove(classToApply);
105 |             getNewQuestion();
106 |         }, 1000);
107 |     });
108 | });
109 | 
110 | incrementScore = (num) => {
111 |     score += num;
112 |     scoreText.innerText = score;
113 | };
114 | 


--------------------------------------------------------------------------------
/12. Create a Spinning Loader/game.js:
--------------------------------------------------------------------------------
  1 | const question = document.getElementById('question');
  2 | const choices = Array.from(document.getElementsByClassName('choice-text'));
  3 | const progressText = document.getElementById('progressText');
  4 | const scoreText = document.getElementById('score');
  5 | const progressBarFull = document.getElementById('progressBarFull');
  6 | const loader = document.getElementById('loader');
  7 | const game = document.getElementById('game');
  8 | let currentQuestion = {};
  9 | let acceptingAnswers = false;
 10 | let score = 0;
 11 | let questionCounter = 0;
 12 | let availableQuesions = [];
 13 | 
 14 | let questions = [];
 15 | 
 16 | fetch(
 17 |     'https://opentdb.com/api.php?amount=10&category=9&difficulty=easy&type=multiple'
 18 | )
 19 |     .then((res) => {
 20 |         return res.json();
 21 |     })
 22 |     .then((loadedQuestions) => {
 23 |         questions = loadedQuestions.results.map((loadedQuestion) => {
 24 |             const formattedQuestion = {
 25 |                 question: loadedQuestion.question,
 26 |             };
 27 | 
 28 |             const answerChoices = [...loadedQuestion.incorrect_answers];
 29 |             formattedQuestion.answer = Math.floor(Math.random() * 4) + 1;
 30 |             answerChoices.splice(
 31 |                 formattedQuestion.answer - 1,
 32 |                 0,
 33 |                 loadedQuestion.correct_answer
 34 |             );
 35 | 
 36 |             answerChoices.forEach((choice, index) => {
 37 |                 formattedQuestion['choice' + (index + 1)] = choice;
 38 |             });
 39 | 
 40 |             return formattedQuestion;
 41 |         });
 42 | 
 43 |         startGame();
 44 |     })
 45 |     .catch((err) => {
 46 |         console.error(err);
 47 |     });
 48 | 
 49 | //CONSTANTS
 50 | const CORRECT_BONUS = 10;
 51 | const MAX_QUESTIONS = 3;
 52 | 
 53 | startGame = () => {
 54 |     questionCounter = 0;
 55 |     score = 0;
 56 |     availableQuesions = [...questions];
 57 |     getNewQuestion();
 58 |     game.classList.remove('hidden');
 59 |     loader.classList.add('hidden');
 60 | };
 61 | 
 62 | getNewQuestion = () => {
 63 |     if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) {
 64 |         localStorage.setItem('mostRecentScore', score);
 65 |         //go to the end page
 66 |         return window.location.assign('/end.html');
 67 |     }
 68 |     questionCounter++;
 69 |     progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`;
 70 |     //Update the progress bar
 71 |     progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`;
 72 | 
 73 |     const questionIndex = Math.floor(Math.random() * availableQuesions.length);
 74 |     currentQuestion = availableQuesions[questionIndex];
 75 |     question.innerText = currentQuestion.question;
 76 | 
 77 |     choices.forEach((choice) => {
 78 |         const number = choice.dataset['number'];
 79 |         choice.innerText = currentQuestion['choice' + number];
 80 |     });
 81 | 
 82 |     availableQuesions.splice(questionIndex, 1);
 83 |     acceptingAnswers = true;
 84 | };
 85 | 
 86 | choices.forEach((choice) => {
 87 |     choice.addEventListener('click', (e) => {
 88 |         if (!acceptingAnswers) return;
 89 | 
 90 |         acceptingAnswers = false;
 91 |         const selectedChoice = e.target;
 92 |         const selectedAnswer = selectedChoice.dataset['number'];
 93 | 
 94 |         const classToApply =
 95 |             selectedAnswer == currentQuestion.answer ? 'correct' : 'incorrect';
 96 | 
 97 |         if (classToApply === 'correct') {
 98 |             incrementScore(CORRECT_BONUS);
 99 |         }
100 | 
101 |         selectedChoice.parentElement.classList.add(classToApply);
102 | 
103 |         setTimeout(() => {
104 |             selectedChoice.parentElement.classList.remove(classToApply);
105 |             getNewQuestion();
106 |         }, 1000);
107 |     });
108 | });
109 | 
110 | incrementScore = (num) => {
111 |     score += num;
112 |     scoreText.innerText = score;
113 | };
114 | 


--------------------------------------------------------------------------------
/ReadMe.md:
--------------------------------------------------------------------------------
  1 | # Build a Quiz App with HTML, CSS, and JavaScript
  2 | 
  3 | ![Home Screen](./images/cover.png)
  4 | 
  5 | Video Playlist: https://www.youtube.com/playlist?list=PLB6wlEeCDJ5Yyh6P2N6Q_9JijB6v4UejF
  6 | 
  7 | Build a Quiz App with HTML, CSS, and JavaScript to improve your Core Web Development
  8 | 
  9 | > If you have questions, please ask them in the [Learn Build Teach Discord.](https://learnbuildteach.com/)
 10 | 
 11 | 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!
 12 | 
 13 | -   Save high scores in Local Storage
 14 | -   Create a progress bar
 15 | -   Create a spinning loader icon
 16 | -   Dynamically generate HTML in JavaScript
 17 | -   Fetch trivia questions from Open Trivia DB API
 18 | 
 19 | -   JavaScript - Array Functions (splice, map, sort), Local Storage, Fetch API
 20 | -   ES6 JavaScript Features - Arrow Functions, the Spread Operator, Const and Let, Template Literals
 21 | -   CSS - Flexbox, Animtations, and REM units
 22 | 
 23 | ## Course Intro and Resources
 24 | 
 25 | Welcome to "Build a Quiz App with HTML, CSS, and JS". I'm so excited you decided to take the initiative to improve your core Web Development skills!
 26 | 
 27 | In this course, we are going to use fundamental HTML, CSS, and JavaScript skills to build a quiz application. This application will be able to load questions from a 3rd party API, track and display high scores, and so much more! You'll learn how to use Local Storage, create animations, use modern ES6 JavaScript features, and more.
 28 | 
 29 | Resources
 30 | 
 31 | -   [Course Source Code](https://github.com/jamesqquick/Design-And-Build-A-Quiz-App)
 32 | -   [Learn Build Teach Discord](https://learnbuildteach.com/)
 33 | 
 34 | ## 1. Create and Style the Home Page
 35 | 
 36 | In this video, we are going to create the home page along with a good chunk of the necessary CSS. The home page will consist of a few links for the Game and High Scores pages. We will also create helper CSS classes for Flexbox, buttons, and hiding elements.
 37 | 
 38 | I encourage you all to take a look at Emmet snippets for generating HTML and CSS.
 39 | 
 40 | Resources
 41 | 
 42 | -   [Emmet in Visual Studio Code](https://www.youtube.com/watch?v=5guZjNDcVnA)
 43 | -   [Understanding REM Units](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/)
 44 | -   [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
 45 | 
 46 | ## 2. Create and Style the Game Page
 47 | 
 48 | In this video, we will create the Game Page and display static question and answer information. Eventually, we will load questions from an API, but for now, we will hard code one question so to establish styling.
 49 | 
 50 | ## 3. Display Hard Coded Question and Answers
 51 | 
 52 | In this video, we will load questions from a hard coded array and iterate through available questions as the user answers them. We will use custom data attributes, the ES6 spread operator, and JavaScript arrow functions.
 53 | 
 54 | Resources
 55 | 
 56 | -   [Creating Code Snippets in Visual Studio Code](https://www.youtube.com/watch?v=K3gLlZm-m_8)
 57 | -   [Using Data Attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes)
 58 | -   [Document Query Selector](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)
 59 | -   [Document Get by ID](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)
 60 | -   [Spread Operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)
 61 | -   [Arrow Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
 62 | 
 63 | ## 4. Display Feedback for Correct/Incorrect Answers
 64 | 
 65 | In this video, we check the user's answer for correctness and display feedback to the user before loading the next question.
 66 | 
 67 | Resources
 68 | 
 69 | -   [Bootstrap 4 Colors](https://www.w3schools.com/bootstrap4/bootstrap_colors.asp)
 70 | -   [Triple vs Double Equals](https://codeburst.io/javascript-double-equals-vs-triple-equals-61d4ce5a121a)
 71 | 
 72 | ## 5. Create Head's Up Display (HUD)
 73 | 
 74 | In this video, we will create a Heads Up Display (HUD) for our quiz app. This will display the user's score and current question number.
 75 | 
 76 | Resources
 77 | 
 78 | -   [ES6 Template Literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
 79 | 
 80 | ## 6. Create a Progress Bar
 81 | 
 82 | In this video, we will take our HUD one step further by creating a visual progress bar to track the user's progress through the questions.
 83 | 
 84 | ## 7. Create and Style the End Page
 85 | 
 86 | In this video, we will create our End page where we will display the user's achieved score. This screen will provide a form for saving the score and links for playing again or going home.
 87 | 
 88 | Resources
 89 | 
 90 | -   [Local Storage](https://www.w3schools.com/jsref/prop_win_localstorage.asp)
 91 | 
 92 | ## 8. Save High Scores in Local Storage
 93 | 
 94 | In this video, we will save and maintain a high scores array in Local Storage. To do this, we will need to JSON.stringify() and JSON.parse() to convert our high score array to a string and visa versa.
 95 | 
 96 | Resources
 97 | 
 98 | -   [Local Storage](https://www.w3schools.com/jsref/prop_win_localstorage.asp)
 99 | 
100 | ## 9. Load and Display High Scores from Local Storage
101 | 
102 | In this video, we will create our High Scores page. We will have to load the high scores from Local Storage, iterate through them, and display them on the screen.
103 | 
104 | Resources
105 | 
106 | -   [JSON Parse and Stringify](https://alligator.io/js/json-parse-stringify/)
107 | -   [Array Sort](https://www.w3schools.com/js/js_array_sort.asp)
108 | -   [Array Map](https://www.w3schools.com/jsref/jsref_map.asp)
109 | -   [Array Join](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join)
110 | 
111 | ## 10. Fetch API to Load Questions From Local JSON File
112 | 
113 | In this video, we will move our sample questions from a hard coded array to an external .json file. This will help clean up our Game.js file and set ourselves up to request questions from an API in the next video.
114 | 
115 | Resources
116 | 
117 | -   [How to Use the Fetch API](https://scotch.io/tutorials/how-to-use-the-javascript-fetch-api-to-get-data)
118 | -   [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise_)
119 | 
120 | ## 11. Fetch API to Load Questions from Open Trivia API
121 | 
122 | In this video, we will use Fetch to request a list of questions from the Open Trivia DB API.
123 | 
124 | Reources
125 | 
126 | -   [How to Use the Fetch API](https://scotch.io/tutorials/how-to-use-the-javascript-fetch-api-to-get-data)
127 | -   [Open Trivia DB](https://opentdb.com/)
128 | -   [Array Map](https://www.w3schools.com/jsref/jsref_map.asp)
129 | -   [Array For Each](https://www.w3schools.com/jsref/jsref_foreach.asp)
130 | 
131 | ## 12. Create a Spinning Loader
132 | 
133 | In this video, we will create a simple spinning loader in CSS that will be displayed until we are finished requesting/loading questions from the API.
134 | 
135 | Resources
136 | 
137 | -   [Create a CSS Loader](https://www.w3schools.com/howto/howto_css_loader.asp)
138 | 
139 | ## 13. Closing
140 | 
141 | Thank you so much for going through this course. I truly hope that you enjoyed it and that you have improved your core Web Development skills!!
142 | 


--------------------------------------------------------------------------------