├── Age - Wizard
    ├── assets
    │   └── AgeWizard.jpg
    ├── index.html
    └── style.css
├── Calculator_Wizard
    ├── favicon_io
    │   ├── about.txt
    │   ├── android-chrome-192x192.png
    │   ├── android-chrome-512x512.png
    │   ├── apple-touch-icon.png
    │   ├── favicon-16x16.png
    │   ├── favicon-32x32.png
    │   ├── favicon.ico
    │   └── site.webmanifest
    ├── index.html
    ├── script.js
    └── style.css
├── LICENSE
├── Quiz Web App
    ├── 1. Create Home Page and Application Styling
    │   ├── app.css
    │   └── index.html
    ├── 10. Fetch Questions from Local JSON File
    │   ├── app.css
    │   ├── end.html
    │   ├── end.js
    │   ├── game.css
    │   ├── game.html
    │   ├── game.js
    │   ├── highscores.css
    │   ├── highscores.html
    │   ├── highscores.js
    │   ├── index.html
    │   └── questions.json
    ├── 11. Fetch API Questions from Open Trivia API
    │   ├── app.css
    │   ├── end.html
    │   ├── end.js
    │   ├── game.css
    │   ├── game.html
    │   ├── game.js
    │   ├── highscores.css
    │   ├── highscores.html
    │   ├── highscores.js
    │   ├── index.html
    │   └── questions.json
    ├── 12. Create a Spinning Loader
    │   ├── app.css
    │   ├── end.html
    │   ├── end.js
    │   ├── game.css
    │   ├── game.html
    │   ├── game.js
    │   ├── highscores.css
    │   ├── highscores.html
    │   ├── highscores.js
    │   ├── index.html
    │   └── questions.json
    ├── 2. Create and Style the Game Page
    │   ├── app.css
    │   ├── game.css
    │   ├── game.html
    │   └── index.html
    ├── 3. Display Hard Coded Question and Answers
    │   ├── app.css
    │   ├── game.css
    │   ├── game.html
    │   ├── game.js
    │   └── index.html
    ├── 4. Display Feedback for Correct and Incorrect Answers
    │   ├── app.css
    │   ├── game.css
    │   ├── game.html
    │   ├── game.js
    │   └── index.html
    ├── 5. Create a Head's Up Display
    │   ├── app.css
    │   ├── game.css
    │   ├── game.html
    │   ├── game.js
    │   └── index.html
    ├── 6. Create a Progress Bar
    │   ├── app.css
    │   ├── game.css
    │   ├── game.html
    │   ├── game.js
    │   └── index.html
    ├── 7. Create and Style the End Page
    │   ├── app.css
    │   ├── end.html
    │   ├── end.js
    │   ├── game.css
    │   ├── game.html
    │   ├── game.js
    │   └── index.html
    ├── 8. Save High Scores in Local Storage
    │   ├── app.css
    │   ├── end.html
    │   ├── end.js
    │   ├── game.css
    │   ├── game.html
    │   ├── game.js
    │   └── index.html
    ├── 9. Load and Display High Scores from Local Storage
    │   ├── app.css
    │   ├── end.html
    │   ├── end.js
    │   ├── game.css
    │   ├── game.html
    │   ├── game.js
    │   ├── highscores.css
    │   ├── highscores.html
    │   ├── highscores.js
    │   └── index.html
    ├── LICENSE
    ├── Quiz Qhiz Master
    │   ├── app.css
    │   ├── assets
    │   │   ├── Congo.jpg
    │   │   ├── logo.jpg
    │   │   └── play.jpg
    │   ├── end.html
    │   ├── end.js
    │   ├── game.css
    │   ├── game.html
    │   ├── game.js
    │   ├── highscores.css
    │   ├── highscores.html
    │   ├── highscores.js
    │   ├── index.html
    │   └── questions.json
    ├── README.md
    └── images
    │   └── quizzify.png
├── ReadMe.md
├── Resume_Wizard
    ├── assets
    │   ├── android-chrome-192x192.png
    │   ├── android-chrome-512x512.png
    │   ├── apple-touch-icon.png
    │   ├── default-logo.png
    │   ├── favicon-16x16.png
    │   ├── favicon-32x32.png
    │   └── favicon.ico
    ├── index.html
    ├── index.js
    ├── index.php
    ├── myfile.pdf
    └── styles.css
├── Starbucks_Landing_Page
    ├── assets
    │   ├── Favicon.png
    │   ├── facebook.png
    │   ├── img1.png
    │   ├── img2.png
    │   ├── img3.png
    │   ├── instagram.png
    │   ├── logo.png
    │   ├── thumb1.png
    │   ├── thumb2.png
    │   ├── thumb3.png
    │   └── twitter.png
    ├── index.html
    ├── script.js
    └── style.css
├── Temperature Wizard
    ├── images
    │   └── favicon.ico
    ├── index.html
    ├── script.js
    └── style.css
├── To_Do_Express
    ├── 4697260.png
    ├── android-chrome-192x192.png
    ├── android-chrome-512x512.png
    ├── apple-touch-icon.png
    ├── favicon-16x16.png
    ├── favicon-32x32.png
    ├── favicon.ico
    ├── index.html
    ├── script.js
    ├── site.webmanifest
    └── style.css
└── Tribute_Page_For_Atal_Bihar_Vajpaayee
    ├── favicon
        ├── android-chrome-192x192.png
        ├── android-chrome-512x512.png
        ├── apple-touch-icon.png
        ├── favicon-16x16.png
        ├── favicon-32x32.png
        ├── favicon.ico
        └── site.webmanifest
    ├── images
        ├── atal-bihari-vajpayee-png-images-thumbnail-1640366759-removebg-preview.png
        └── atal-bihari-vajpayee-png-images-thumbnail-1640366759.jpg
    ├── index.html
    └── style.css


/Age - Wizard/assets/AgeWizard.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Age - Wizard/assets/AgeWizard.jpg


--------------------------------------------------------------------------------
/Age - Wizard/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Age Wizard - An Age Calculator</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <link rel="icon" type="image/x-icon" href="/assets/AgeWizard.jpg">
10 | </head>
11 | <body>
12 | <div class="container">
13 |     <div class="calculator">
14 |         <h1><span> Age Wizard </span></h1>
15 |         
16 |         
17 |         <div class="input-box">
18 |             <input type="date" id="date">
19 |             <button onclick="calculateAge()">Calculate Age</button>
20 |         </div>
21 |         <p id="result"></p>
22 |     </div>
23 | </div>
24 | 
25 | <script>
26 | let userInput = document.getElementById("date") 
27 | userInput.max = new Date().toISOString().split("T")[0];
28 | let result = document.getElementById("result");
29 | 
30 |    
31 |     function calculateAge(){
32 |         let birthDate = new Date(userInput.value);
33 |         let d1 = birthDate.getDate();
34 |         let m1 = birthDate.getMonth() +  1;
35 |         let y1 = birthDate.getFullYear();
36 | 
37 |         let today = new Date();
38 |         let d2 = today.getDate();
39 |         let m2 = today.getMonth() + 1;
40 |         let y2 = today.getFullYear();
41 | 
42 |         let d3,m3,y3;
43 |         y3 = y2 - y1;
44 | 
45 |         if(m2 >= m1){
46 |             m3 = m2 - m1;
47 | 
48 |         }else{
49 | 
50 |             y3--;
51 |             m3 = 12 + m2 - m1;
52 |         }
53 | 
54 |         if(d2 >= d1){
55 |             d3 = d2 - d1;
56 |         }else{
57 |             m3--;
58 |             d3 = getDaysInMonth(y1, m1) + d2 - d1;
59 |         }
60 |         if(m3<0){
61 |             m3 = 11;
62 |             y3--;
63 |         }
64 |         result.innerHTML=`You are <span>${y3}</span> Years, <span>${m3}</span> Months, <span>${d3}</span> Days Old`;
65 |         
66 |     }
67 |     
68 | 
69 |     function getDaysInMonth(year, month){
70 |         return new Date(year, month, 0).getDate();
71 |     }
72 | 
73 | 
74 | </script>
75 | </body>
76 | </html>


--------------------------------------------------------------------------------
/Age - Wizard/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     margin: 0;
  3 |     padding: 0;
  4 |     font-family: 'Poppins', sans-serif;
  5 |     box-sizing: border-box;
  6 | }
  7 | 
  8 | .container {
  9 |     width: 100%;
 10 |     min-height: 100vh;
 11 |     background: linear-gradient(135deg, #4203a9, #90bafc);
 12 |     color: #ffff76;
 13 |     padding: 10px;
 14 | }
 15 | 
 16 | .calculator {
 17 |     width: 100%;
 18 |     max-width: 600px;
 19 |     margin: 10% auto;
 20 | }
 21 | 
 22 | .calculator h1 {
 23 |     font-size: 60px;
 24 | }
 25 | 
 26 | .input-box {
 27 |     background: rgba(255, 255, 255, 0.3);
 28 |     border-radius: 10px;
 29 |     margin: 40px 0;
 30 |     padding: 35px;
 31 |     display: flex;
 32 |     align-items: center;
 33 | }
 34 | 
 35 | .input-box input {
 36 |     flex: 1;
 37 |     margin-right: 20px;
 38 |     padding: 14px 20px;
 39 |     border: 0;
 40 |     outline: 0;
 41 |     font-size: 18px;
 42 |     border-radius: 5px;
 43 |     position: relative;
 44 | }
 45 | 
 46 | .input-box button {
 47 |     background: #ffff76;
 48 |     border: 0;
 49 |     outline: 0;
 50 |     padding: 15px 30px;
 51 |     border-radius: 5px;
 52 |     font-weight: bold;
 53 |     color: #333;
 54 |     cursor: pointer;
 55 |     transition: background-color 0.3s;
 56 | }
 57 | 
 58 | .input-box button:hover {
 59 |     background-color: #ffd700;
 60 | }
 61 | 
 62 | .input-box input::-webkit-calendar-picker-indicator {
 63 |     top: 0;
 64 |     left: 0;
 65 |     right: 0;
 66 |     bottom: 0;
 67 |     width: auto;
 68 |     height: auto;
 69 |     position: absolute;
 70 |     background-position: calc(100% - 10px);
 71 |     background-size: 30px;
 72 |     cursor: pointer;
 73 | }
 74 | 
 75 | #result {
 76 |     font: 20px;
 77 | }
 78 | 
 79 | #result span {
 80 |     color: #ffff76;
 81 | }
 82 | 
 83 | /* Media Queries */
 84 | 
 85 | @media only screen and (max-width: 600px) {
 86 |     .calculator {
 87 |         margin: 20% auto;
 88 |     }
 89 | 
 90 |     .calculator h1 {
 91 |         font-size: 40px;
 92 |     }
 93 | 
 94 |     .input-box {
 95 |         flex-direction: column;
 96 |         align-items: flex-start;
 97 |         padding: 20px;
 98 |     }
 99 | 
100 |     .input-box input {
101 |         margin-bottom: 20px;
102 |     }
103 | 
104 |     .input-box button {
105 |         width: 100%;
106 |     }
107 | }
108 | 


--------------------------------------------------------------------------------
/Calculator_Wizard/favicon_io/about.txt:
--------------------------------------------------------------------------------
1 | This favicon was generated using the following font:
2 | 
3 | - Font Title: Laila
4 | - Font Author: Copyright (c) 2014 Indian Type Foundry (info@indiantypefoundry.com)
5 | - Font Source: http://fonts.gstatic.com/s/laila/v13/LYjMdG_8nE8jDIRdiidIrEIu.ttf
6 | - Font License: SIL Open Font License, 1.1 (http://scripts.sil.org/OFL))
7 | 


--------------------------------------------------------------------------------
/Calculator_Wizard/favicon_io/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Calculator_Wizard/favicon_io/android-chrome-192x192.png


--------------------------------------------------------------------------------
/Calculator_Wizard/favicon_io/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Calculator_Wizard/favicon_io/android-chrome-512x512.png


--------------------------------------------------------------------------------
/Calculator_Wizard/favicon_io/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Calculator_Wizard/favicon_io/apple-touch-icon.png


--------------------------------------------------------------------------------
/Calculator_Wizard/favicon_io/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Calculator_Wizard/favicon_io/favicon-16x16.png


--------------------------------------------------------------------------------
/Calculator_Wizard/favicon_io/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Calculator_Wizard/favicon_io/favicon-32x32.png


--------------------------------------------------------------------------------
/Calculator_Wizard/favicon_io/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Calculator_Wizard/favicon_io/favicon.ico


--------------------------------------------------------------------------------
/Calculator_Wizard/favicon_io/site.webmanifest:
--------------------------------------------------------------------------------
1 | {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}


--------------------------------------------------------------------------------
/Calculator_Wizard/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 |     <title>Calculator-Wizard</title>
 7 |     <link rel="stylesheet" href="./style.css">
 8 |     <link rel="icon" type="image/x-icon" href="./favicon_io/favicon.ico">
 9 | </head>
10 | <body>
11 |     <div class="container">
12 |         <div class="calculator">
13 |             <input type="text" placeholder="0" id="output-Screen">
14 |             <button onclick="Clear()" >C</button>
15 |             <button onclick="del()">Del</button>
16 |             <button onclick="display('%')">%</button>
17 |             <button onclick="display('/')">/</button>
18 |             <button onclick="display('7')">7</button>
19 |             <button onclick="display('8')">8</button>
20 |             <button onclick="display('9')">9</button>
21 |             <button onclick="display('*')">*</button>
22 |             <button onclick="display('4')">4</button>
23 |             <button onclick="display('5')">5</button>
24 |             <button onclick="display('6')">6</button>
25 |             <button onclick="display('-')">-</button>
26 |             <button onclick="display('1')">1</button>
27 |             <button onclick="display('2')">2</button>
28 |             <button onclick="display('3')">3</button>
29 |             <button onclick="display('+')">+</button>
30 |             <button onclick="display('.')">.</button>
31 |             <button onclick="display('0')">0</button>
32 |             <button onclick="Calculate()" class="equal">=</button>
33 |         </div>
34 |     </div>
35 |     <script src="./script.js"></script>
36 | </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/Calculator_Wizard/script.js:
--------------------------------------------------------------------------------
 1 | let outputScreen = document.getElementById('output-Screen')
 2 | 
 3 | function display(num){
 4 |     outputScreen.value += num;
 5 | }
 6 | 
 7 | function Calculate(){
 8 |     try{
 9 |         outputScreen.value =eval(outputScreen.value);
10 |     }
11 |     catch(err)
12 |     {
13 |         alert('Invalid')
14 |     }
15 | }
16 | 
17 | function Clear(){
18 |     outputScreen.value = "";
19 | }
20 | 
21 | function del(){
22 |     outputScreen.value = outputScreen.value.slice(0, -1);
23 | }


--------------------------------------------------------------------------------
/Calculator_Wizard/style.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 |     background-color: #ecf0f3;
 6 |     font-family: sans-serif;
 7 |     outline: none;
 8 | 
 9 | }
10 | 
11 | .container{
12 |     height: 100vh;
13 |     display: flex;
14 |     justify-content: center;
15 |     align-items: center;
16 | 
17 | }
18 | 
19 | .calculator{
20 |    background-color: #ecf0f3;
21 |    padding: 15px;
22 |    border-radius: 30px;
23 |    box-shadow: inset 5px 5px 12px #ffffff, 5px 5px 12px rgba(0, 0, 0,.16);
24 |    display: grid;
25 |    grid-template-columns: repeat(4, 68px);
26 | }
27 | 
28 | input{
29 |     grid-column: span 4;
30 |     height: 70px;
31 |     width: 260px;
32 |     background-color: #ecf0f3;
33 |     box-shadow: inset -5px -5px 12px #ffffff,
34 |     inset 5px 5px 12px rgba(0, 0, 0,.16);
35 |     border:none;
36 |     border-radius:30px;
37 |     color: rgb(70, 70, 70);
38 |     font-size: 50px;
39 |     text-align: end;
40 |     margin: auto;
41 |     margin-top: 40px;
42 |     margin-bottom: 30px;
43 |     padding: 20px;
44 | }
45 | 
46 | button{
47 |     height: 48px;
48 |     width: 48px;
49 |     background-color: #ecf0f3;
50 |     box-shadow: -5px -5px 12px #ffffff,
51 |                     5px 5px 12px rgba(0, 0, 0,.16);
52 |     border: none;
53 |     border-radius: 50%;
54 |     margin: 8px;
55 |     font-size: 16px;
56 | }
57 | 
58 | .equal{
59 |     width: 115px;
60 |     border-radius: 40px;
61 |     background-color: #ecf0f3;
62 |     box-shadow: -5px -5px 12px #ffffff,
63 |     5px 5px 12px rgba(0, 0, 0,.16);;
64 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Alok Sharma
 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 Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 Web App/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 Web App/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 | 


--------------------------------------------------------------------------------
/Quiz Web App/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 Web App/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Alok Sharma
 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 Web App/Quiz Qhiz 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 | }


--------------------------------------------------------------------------------
/Quiz Web App/Quiz Qhiz Master/assets/Congo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Quiz Web App/Quiz Qhiz Master/assets/Congo.jpg


--------------------------------------------------------------------------------
/Quiz Web App/Quiz Qhiz Master/assets/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Quiz Web App/Quiz Qhiz Master/assets/logo.jpg


--------------------------------------------------------------------------------
/Quiz Web App/Quiz Qhiz Master/assets/play.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Quiz Web App/Quiz Qhiz Master/assets/play.jpg


--------------------------------------------------------------------------------
/Quiz Web App/Quiz Qhiz 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>Congratulations!</title>
 8 |     <link rel="stylesheet" href="./app.css" />
 9 |     <link rel="icon" type="image/jpg" href="./assets/Congo.jpg">
10 |   </head>
11 |   <body>
12 |     <div class="container">
13 |       <div id="end" class="flex-center flex-column">
14 |         <h1 id="finalScore"></h1>
15 |         <form>
16 |           <input
17 |             type="text"
18 |             name="username"
19 |             id="username"
20 |             placeholder="username"
21 |           />
22 |           <button
23 |             type="submit"
24 |             class="btn"
25 |             id="saveScoreBtn"
26 |             onclick="saveHighScore(event)"
27 |             disabled
28 |           >
29 |             Save
30 |           </button>
31 |         </form>
32 |         <a class="btn" href="./game.html">Play Again</a>
33 |         <a class="btn" href="./">Go Home</a>
34 |       </div>
35 |     </div>
36 |     <script src="./end.js"></script>
37 |   </body>
38 | </html>


--------------------------------------------------------------------------------
/Quiz Web App/Quiz Qhiz 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 | };


--------------------------------------------------------------------------------
/Quiz Web App/Quiz Qhiz 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.6rem;
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 | }


--------------------------------------------------------------------------------
/Quiz Web App/Quiz Qhiz 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>Quizzify - Play</title>
 8 |     <link rel="stylesheet" href="./app.css" />
 9 |     <link rel="stylesheet" href="./game.css" />
10 |     <link rel="icon" type="image/jpg" href="./assets/play.jpg">
11 |   </head>
12 |   <body>
13 |     <div class="container">
14 |       <div id="loader"></div>
15 |       <div id="game" class="justify-center flex-column hidden">
16 |         <div id="hud">
17 |           <div id="hud-item">
18 |             <p id="progressText" class="hud-prefix">
19 |               Question
20 |             </p>
21 |             <div id="progressBar">
22 |               <div id="progressBarFull"></div>
23 |             </div>
24 |           </div>
25 |           <div id="hud-item">
26 |             <p class="hud-prefix">
27 |               Score
28 |             </p>
29 |             <h1 class="hud-main-text" id="score">
30 |               0
31 |             </h1>
32 |           </div>
33 |         </div>
34 |         <h2 id="question"></h2>
35 |         <div class="choice-container">
36 |           <p class="choice-prefix">A</p>
37 |           <p class="choice-text" data-number="1"></p>
38 |         </div>
39 |         <div class="choice-container">
40 |           <p class="choice-prefix">B</p>
41 |           <p class="choice-text" data-number="2"></p>
42 |         </div>
43 |         <div class="choice-container">
44 |           <p class="choice-prefix">C</p>
45 |           <p class="choice-text" data-number="3"></p>
46 |         </div>
47 |         <div class="choice-container">
48 |           <p class="choice-prefix">D</p>
49 |           <p class="choice-text" data-number="4"></p>
50 |         </div>
51 |       </div>
52 |     </div>
53 |     <script src="./game.js"></script>
54 |   </body>
55 | </html>


--------------------------------------------------------------------------------
/Quiz Web App/Quiz Qhiz 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=20&category=22&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 = 20;
 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 | };


--------------------------------------------------------------------------------
/Quiz Web App/Quiz Qhiz 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 | }


--------------------------------------------------------------------------------
/Quiz Web App/Quiz Qhiz 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 |     <link rel="icon" href="icon_path" type="image/x-icon">
11 |   </head>
12 |   <body>
13 |     <div class="container">
14 |       <div id="highScores" class="flex-center flex-column">
15 |         <h1 id="finalScore">High Scores</h1>
16 |         <ul id="highScoresList"></ul>
17 |         <a class="btn" href="/">Go Home</a>
18 |       </div>
19 |     </div>
20 |     <script src="./highscores.js"></script>
21 |   </body>
22 | </html>


--------------------------------------------------------------------------------
/Quiz Web App/Quiz Qhiz 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("");


--------------------------------------------------------------------------------
/Quiz Web App/Quiz Qhiz 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>Quizzify</title>
 8 |     <link rel="stylesheet" href="./app.css" />
 9 |     <link rel="icon" type="image/jpg" href="./assets/logo.jpg">
10 |   </head>
11 |   <body>
12 |     <div class="container">
13 |       <div id="home" class="flex-center flex-column">
14 |         <h1>The Quizzify Game</h1>
15 |         <a class="btn" href="./game.html">Play</a>
16 |         <a class="btn" href="./highscores.html">High Scores</a>
17 |       </div>
18 |     </div>
19 |   </body>
20 | </html>


--------------------------------------------------------------------------------
/Quiz Web App/Quiz Qhiz Master/questions.json:
--------------------------------------------------------------------------------
  1 | [
  2 |     {
  3 |         "question" : "The International Literacy Day is observed on ?",
  4 |         "choice1" : "Sep 8",
  5 |         "choice2" : "Nov 28",
  6 |         "choice3" : "May 2",
  7 |         "choice4" : "Sep 22",
  8 |         "answer" : 1
  9 | 
 10 |     },
 11 |     {
 12 |         "question" : "The language of Lakshadweep. a Union Territory of India, is ?",
 13 |         "choice1" : "Hindi",
 14 |         "choice2" : "Tamil",
 15 |         "choice3" : "Telugu",
 16 |         "choice4" : "Malayalam",
 17 |         "answer" : 4
 18 | 
 19 |     },
 20 |     {
 21 |         "question" : "In which group of places the Kumbha Mela is held every twelve years ?",
 22 |         "choice1" : "Ujjain. Purl; Prayag. Haridwar",
 23 |         "choice2" : "Prayag. Haridwar, Ujjain,. Nasik",
 24 |         "choice3" : "Rameshwaram. Purl, Badrinath. Dwarika",
 25 |         "choice4" : "Chittakoot, Ujjain, Prayag,'Haridwar",
 26 |         "answer" : 2
 27 | 
 28 |     },
 29 |     {
 30 |         "question" : "Bahubali festival is related to ?",
 31 |         "choice1" : "Islam",
 32 |         "choice2" : "Hinduism",
 33 |         "choice3" : "Buddhism",
 34 |         "choice4" : "Jainism",
 35 |         "answer" : 4
 36 | 
 37 |     },
 38 |     {
 39 |         "question" : "Which day is observed as the World Standards  Day ?",
 40 |         "choice1" : "Jun 26",
 41 |         "choice2" : "Oct 14",
 42 |         "choice3" : "Nov 15",
 43 |         "choice4" : "Dec 2",
 44 |         "answer" : 2
 45 | 
 46 |     },
 47 |     {
 48 |         "question" : "Who is the current Prime Minister Of India ?",
 49 |         "choice1" : "Shri.Naremdra Modi",
 50 |         "choice2" : "Rahul Gandhi",
 51 |         "choice3" : "Dr. Manmohan Singh",
 52 |         "choice4" : "Jawahar Lal Nehru",
 53 |         "answer" : 1
 54 | 
 55 |     },
 56 |     {
 57 |         "question" : "Who is the current President Of India ?",
 58 |         "choice1" : "Pranab Mukharjee",
 59 |         "choice2" : "Narendra Modi",
 60 |         "choice3" : "Druapadi Murmur",
 61 |         "choice4" : "Rahul Gandhi",
 62 |         "answer" : 3
 63 | 
 64 |     },
 65 |     {
 66 |         "question" : " Where is Taj Mahal located ?",
 67 |         "choice1" : "Agra",
 68 |         "choice2" : "Delhi",
 69 |         "choice3" : "Mumbai",
 70 |         "choice4" : "Mathura",
 71 |         "answer" : 1
 72 | 
 73 |     },
 74 |     {
 75 |         "question" : "On Which Day Independence Day is Celebrated ?",
 76 |         "choice1" : "14 Nov",
 77 |         "choice2" : "15 Aug",
 78 |         "choice3" : "26 jan",
 79 |         "choice4" : "2 Oct",
 80 |         "answer" : 2
 81 | 
 82 |     },
 83 |     {
 84 |         "question" : "Who was the First President of India ?",
 85 |         "choice1" : "A.P.J Abdul Kalam",
 86 |         "choice2" : "Dr. Rajendra Prasad",
 87 |         "choice3" : "Sarvepalli Radhakrishnan",
 88 |         "choice4" : "Zakir Hussain",
 89 |         "answer" : 2
 90 | 
 91 |     },
 92 |     {
 93 |         "question" : "On Which Day Childrens Day is Celebrated ?",
 94 |         "choice1" : "2 Oct",
 95 |         "choice2" : "14 Nov",
 96 |         "choice3" : "06 Jun",
 97 |         "choice4" : "11 Mar",
 98 |         "answer" : 2
 99 | 
100 |     },
101 |     {
102 |         "question" : "Who was the First Prime Minister Of India ?",
103 |         "choice1" : "Swami Vivekanda",
104 |         "choice2" : "Pandit Jawaharlal Nehru",
105 |         "choice3" : "Lal Bahadur Shastri",
106 |         "choice4" : "Indira Gandhi",
107 |         "answer" : 2
108 | 
109 |     },
110 |     {
111 |         "question" : "Who is the Chief Of Defence Staff ?",
112 |         "choice1" : "Lt General Anil Chauhan",
113 |         "choice2" : "General Manoj Pandey",
114 |         "choice3" : "General Manoj Mukund",
115 |         "choice4" : "General Bipin Rawat",
116 |         "answer" : 1
117 | 
118 |     },
119 |     {
120 |         "question" : "Which one is a Union Territory of the following ?",
121 |         "choice1" : "Daman & Diu",
122 |         "choice2" : "New Delhi",
123 |         "choice3" : "Mumbai",
124 |         "choice4" : "Hyderabad",
125 |         "answer" : 1
126 | 
127 |     },
128 |     {
129 |         "question" : "Who is the Parent Company Of Google ?",
130 |         "choice1" : "Alphabet",
131 |         "choice2" : "Microsoft",
132 |         "choice3" : "Apple",
133 |         "choice4" : "Amazon",
134 |         "answer" : 1
135 | 
136 |     },
137 |     {
138 |         "question" : "Who is the Richest Person In the World ?",
139 |         "choice1" : "Bill Gates",
140 |         "choice2" : "Elon Musk",
141 |         "choice3" : "Bernard Arnault & Family",
142 |         "choice4" : "Jeff Bezos",
143 |         "answer" : 3
144 | 
145 |     },
146 |     {
147 |         "question" : " What is Full form of C.B.I ?",
148 |         "choice1" : "Central Bank Of India",
149 |         "choice2" : "Crime Branch Of India",
150 |         "choice3" : "Central Bureau Of Investigation",
151 |         "choice4" : "Corporate Bussiness Intelligence",
152 |         "answer" : 3
153 | 
154 |     },
155 |     {
156 |         "question" : " What is Full form of RBI ?",
157 |         "choice1" : "Reserve Bank of India",
158 |         "choice2" : "Royal Bank of India",
159 |         "choice3" : "Regional Bank of India",
160 |         "choice4" : "Reliance Bank of India",
161 |         "answer" : 1
162 | 
163 |     },
164 |     {
165 |         "question" : " WWhich of the following is the highest mountain peak in India ?",
166 |         "choice1" : "Mount Everest",
167 |         "choice2" : "Kanchenjunga",
168 |         "choice3" : "Nanda Devi",
169 |         "choice4" : "Annapurna",
170 |         "answer" : 2
171 | 
172 |     },
173 |     {
174 |         "question" : " Where is Mount Everest located ?",
175 |         "choice1" : "Nepal",
176 |         "choice2" : "India",
177 |         "choice3" : "China",
178 |         "choice4" : "Bhutan",
179 |         "answer" : 1
180 | 
181 |     }
182 | ]


--------------------------------------------------------------------------------
/Quiz Web App/README.md:
--------------------------------------------------------------------------------
 1 | # Quiz_Web_App_Using_HTML_CSS_And_Javascript
 2 | # Quiz Web App
 3 | 
 4 | This repository contains a Quiz Web App built using HTML, CSS, JavaScript, and the Open Trivia Database. The app allows users to test their knowledge by answering quiz questions from various categories.
 5 | 
 6 | ## Features
 7 | 
 8 | - User-friendly interface for a seamless quiz-taking experience.
 9 | - Randomly generated questions from the Open Trivia Database API.
10 | - Multiple-choice questions with instant feedback on answer selection.
11 | - Scoring system to track and display the user's progress.
12 | - Different categories of quizzes to choose from.
13 | 
14 | ## Technologies Used
15 | 
16 | - HTML: Used to structure the web pages and content.
17 | - CSS: Used for styling and enhancing the visual appearance of the app.
18 | - JavaScript: Implemented the logic and interactivity of the quiz app.
19 | - Open Trivia Database API: Used to fetch quiz questions and categories.
20 | 
21 | ## Getting Started
22 | 
23 | To get started with the Quiz Web App, follow these steps:
24 | 
25 | 1. Clone the repository:
26 | 
27 |    ```
28 |    git clone https://github.com/Alok-2002/web_development_project
29 |    ```
30 | 
31 | 2. Open the project folder:
32 | 
33 |    ```
34 |    cd Quiz Web App
35 |    ```
36 | 
37 | 3. Launch the app by opening the `index.html` file in your preferred web browser.
38 | 
39 | ## Usage
40 | 
41 | 1. Select a category for the quiz from the available options.
42 | 2. Click the "Start Quiz" button to begin the quiz.
43 | 3. Read each question carefully and select the answer you think is correct.
44 | 4. Instant feedback will be provided after each answer.
45 | 5. Continue answering questions until you reach the end of the quiz.
46 | 6. At the end of the quiz, you will be presented with your score and the option to restart or choose a different category.
47 | 
48 | ## Customization
49 | 
50 | If you wish to customize the app, you can modify the following files:
51 | 
52 | - `index.html`: Edit the HTML structure of the app and update the UI elements.
53 | - `app.css`: Modify the CSS styles to change the visual appearance.
54 | - `game.js`: Update the JavaScript logic and functionality according to your requirements.
55 | - `game.html`: Edit the HTML structure of the app and update the UI elements.
56 | - `game.css`: Modify the CSS styles to change the visual appearance.
57 | - `end.js`: Update the JavaScript logic and functionality according to your requirements.
58 | - `end.html`: Edit the HTML structure of the app and update the UI elements.
59 | - `highscores.css`: Modify the CSS styles to change the visual appearance.
60 | - `highscores.js`: Update the JavaScript logic and functionality according to your requirements.
61 | - `highscores.html`: Edit the HTML structure of the app and update the UI elements.
62 | 
63 | 
64 | ## Contributions
65 | 
66 | Contributions to this Quiz Web App are welcome! If you have any improvements or feature suggestions, feel free to open an issue or submit a pull request. Please make sure to follow the existing code style and guidelines.
67 | 
68 | ## License
69 | 
70 | This project is licensed under the [MIT License](LICENSE). Feel free to use and modify the code according to the terms of this license.
71 | 
72 | ## Acknowledgements
73 | 
74 | - The Quiz Web App utilizes the [Open Trivia Database API](https://opentdb.com) for fetching quiz questions.
75 | - Special thanks to the developers and contributors of the libraries and frameworks used in this project.
76 | 
77 | ---
78 | 
79 | Enjoy using the Quiz Web App! Test your knowledge, challenge your friends, and have fun!
80 | 


--------------------------------------------------------------------------------
/Quiz Web App/images/quizzify.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Quiz Web App/images/quizzify.png


--------------------------------------------------------------------------------
/ReadMe.md:
--------------------------------------------------------------------------------
 1 | # Web Development Projects
 2 | 
 3 | Welcome to the **Web Development Projects** repository! This repository contains a collection of web development projects built using HTML, CSS, JavaScript, React.js, Node.js, and other MERN stack (MongoDB, Express.js, React.js, Node.js) and full-stack technologies. Whether you are a beginner looking to explore web development or an experienced developer seeking inspiration, you'll find a variety of projects to enhance your skills and knowledge.
 4 | 
 5 | ## Project List
 6 | 
 7 | 1. **Quizzify - An Web App**
 8 |    - Description: The Quiz Web App is an interactive application that allows users to test their knowledge by answering multiple-choice questions. It fetches questions from the Open Trivia API and provides a score at the end of the quiz. The app has a responsive design and features a timer to add excitement.
 9 |    - Technologies: HTML, CSS, JavaScript, Open Trivia API
10 |    - Demo: [Quizzify App Demo](https://quizwhiz.vercel.app)
11 | 
12 | 2. **Age Wizard - Age Calculator**
13 |    - Description: The Age Wizard is an age calculator built using HTML, CSS, and JavaScript. It allows users to calculate their age by entering their birth date. The app dynamically calculates the age and displays it in years, months, and days. It provides a visually appealing user interface with smooth animations.
14 |    - Technologies: HTML, CSS, JavaScript
15 |    - Demo: [Age Wizard Demo](https://age-wizard.vercel.app)
16 | 
17 | 3. **Project 3**: [Project Name]
18 |    - Description: [Briefly describe the project, its purpose, and features.]
19 |    - Technologies: [List the technologies used, such as HTML, CSS, JavaScript, etc.]
20 |    - Demo: [If available, provide a link to the live demo or a video showcasing the project.]
21 | 
22 | ...
23 | 
24 | ## Contributing
25 | 
26 | If you would like to contribute to this repository, feel free to follow these steps:
27 | 
28 | 1. Fork the repository.
29 | 2. Create a new branch for your feature or bug fix.
30 | 3. Implement your changes.
31 | 4. Test thoroughly.
32 | 5. Commit your changes and push the branch to your forked repository.
33 | 6. Open a pull request in this repository, providing a detailed description of your changes.
34 | 
35 | Please ensure that your contributions align with the repository's purpose of showcasing web development projects using HTML, CSS, JavaScript, React.js, Node.js, and other MERN stack or full-stack technologies.
36 | 
37 | ## License
38 | 
39 | The Projects in this repository are available under the [MIT License](LICENSE). You are free to use, modify, and distribute the code as long as the license terms are followed.
40 | 
41 | ## Acknowledgments
42 | 
43 | We would like to express our gratitude to the open-source community for their valuable contributions and inspiration. Without their efforts, this repository would not have been possible.
44 | 
45 | If you have any questions, suggestions, or feedback, please feel free to open an issue or contact us. We hope you find these web development projects helpful and inspiring! Happy coding!
46 | 


--------------------------------------------------------------------------------
/Resume_Wizard/assets/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Resume_Wizard/assets/android-chrome-192x192.png


--------------------------------------------------------------------------------
/Resume_Wizard/assets/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Resume_Wizard/assets/android-chrome-512x512.png


--------------------------------------------------------------------------------
/Resume_Wizard/assets/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Resume_Wizard/assets/apple-touch-icon.png


--------------------------------------------------------------------------------
/Resume_Wizard/assets/default-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Resume_Wizard/assets/default-logo.png


--------------------------------------------------------------------------------
/Resume_Wizard/assets/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Resume_Wizard/assets/favicon-16x16.png


--------------------------------------------------------------------------------
/Resume_Wizard/assets/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Resume_Wizard/assets/favicon-32x32.png


--------------------------------------------------------------------------------
/Resume_Wizard/assets/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Resume_Wizard/assets/favicon.ico


--------------------------------------------------------------------------------
/Resume_Wizard/index.js:
--------------------------------------------------------------------------------
  1 | /* console.log('hello'); */
  2 | 
  3 | function addNewField1() {
  4 |     let newNode = document.createElement('textarea');
  5 |     newNode.classList.add('form-control');
  6 |     newNode.classList.add('weField');
  7 |     newNode.setAttribute('rows', 3);
  8 |     newNode.classList.add('mt-2')
  9 | 
 10 |     let weOb = document.getElementById('we');
 11 |     let weAddButtonOb = document.getElementById('weAddButton');
 12 | 
 13 |     weOb.insertBefore(newNode, weAddButtonOb);
 14 | }
 15 | 
 16 | function addNewField2() {
 17 |     let newNode = document.createElement('textarea');
 18 |     newNode.classList.add('form-control');
 19 |     newNode.classList.add('edField');
 20 |     newNode.setAttribute('rows', 3);
 21 |     newNode.classList.add('mt-2')
 22 | 
 23 |     let edOb = document.getElementById('ed');
 24 |     let edAddButtonOb = document.getElementById('edAddButton');
 25 | 
 26 |     edOb.insertBefore(newNode, edAddButtonOb);
 27 | }
 28 | 
 29 | function addNewField3() {
 30 |     let newNode = document.createElement('textarea');
 31 |     newNode.classList.add('form-control');
 32 |     newNode.classList.add('ceField');
 33 |     newNode.setAttribute('rows', 3);
 34 |     newNode.classList.add('mt-2')
 35 | 
 36 |     let ceOb = document.getElementById('ce');
 37 |     let ceAddButtonOb = document.getElementById('ceAddButton');
 38 | 
 39 |     ceOb.insertBefore(newNode, ceAddButtonOb);
 40 | }
 41 | 
 42 | function generateCv() {
 43 | 
 44 |     //name field
 45 |     let nameField = document.getElementById('nameField').value;
 46 |     let nameT1 = document.getElementById('nameT1');
 47 | 
 48 |     nameT1.innerHTML = nameField;
 49 |     document.getElementById('nameT2').innerHTML= nameField;
 50 | 
 51 |     //contact field
 52 |     document.getElementById('contactT').innerHTML = document.getElementById('contactField').value;
 53 | 
 54 |     //email field
 55 |     document.getElementById('emailT').innerHTML = document.getElementById('emailField').value;
 56 | 
 57 |     //address field
 58 |     document.getElementById('addT1').innerHTML = document.getElementById('addressField').value;
 59 | 
 60 |     //linkedin field
 61 |     document.getElementById('lkT').innerHTML = document.getElementById('linkedinField').value;
 62 | 
 63 |     //github field
 64 |     document.getElementById('gitT').innerHTML = document.getElementById('gitField').value;
 65 | 
 66 |     //fb field
 67 |     document.getElementById('fbT').innerHTML = document.getElementById('fbField').value;
 68 | 
 69 |     //stack field
 70 |     document.getElementById('stT').innerHTML = document.getElementById('stField').value;
 71 | 
 72 |     //objective field
 73 |     document.getElementById('objectiveT').innerHTML = document.getElementById('objField').value;
 74 | 
 75 |     //work exp
 76 |     let workExps = document.getElementsByClassName('weField'); //getting obj of weField
 77 |     let str = ''
 78 | 
 79 |     for(let e of workExps) {
 80 |         str = str + `<li> ${e.value} </li>`
 81 |     }
 82 |     document.getElementById('weT').innerHTML = str;
 83 | 
 84 |     //education exp
 85 |     let eduQua = document.getElementsByClassName('edField'); //getting obj of weField
 86 |     let str1 = ''
 87 | 
 88 |     for(let e of eduQua) {
 89 |         str1 = str1 + `<li> ${e.value} </li>`
 90 |     }
 91 |     document.getElementById('edT').innerHTML = str1;
 92 | 
 93 |     
 94 | 
 95 |     //cert 
 96 |     let cerT = document.getElementsByClassName('ceField'); //getting obj of weField
 97 |     let str2 = ''
 98 | 
 99 |     for(let e of cerT) {
100 |         str2 = str2 + `<li> ${e.value} </li>`
101 |     }
102 |     document.getElementById('cerT').innerHTML = str2;
103 | 
104 |     document.getElementById('resume-form').style.display = 'none';
105 |     document.getElementById('footer').style.display = 'none';
106 |     document.getElementById('resume-template').style.display = 'block';
107 | 
108 |     //Image field
109 |     let file = document.getElementById('imgField').files[0]; //getting first(index at 0) file
110 |     console.log(file);
111 |     let reader = new FileReader();
112 | 
113 |     reader.readAsDataURL(file);
114 |     
115 |     console.log(reader.result);
116 |     
117 |     //set the image to template
118 |     reader.onloadend = function () {
119 |         document.getElementById('imgT').src = reader.result;
120 |     };
121 | }
122 | //printCv function
123 | //for printing the pdf we have used CDN from here- https://cdnjs.com/libraries/html2pdf.js
124 | 
125 | window.onload = function() {
126 |     document.getElementById('downloadCV').addEventListener("click", ()=>{
127 |         const resumePDF = this.document.getElementById("resume-template");
128 |         console.log(resumePDF);
129 |         console.log(window);
130 |         var opt = {
131 |             top:       1,
132 |             bottom:     0,
133 |             filename:     'myfile.pdf',
134 |             image:        { type: 'jpeg', quality: 1 },
135 |             html2canvas:  { scale: 1 },
136 |             jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' },
137 |             pagebreak: { mode: 'css', before: '#resume-template' }
138 |           };
139 |         html2pdf().from(resumePDF).set(opt).save();
140 |     })
141 | }
142 | 
143 | 


--------------------------------------------------------------------------------
/Resume_Wizard/index.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 
3 | include_once("index.html");
4 | 
5 | ?>
6 | 


--------------------------------------------------------------------------------
/Resume_Wizard/myfile.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Resume_Wizard/myfile.pdf


--------------------------------------------------------------------------------
/Resume_Wizard/styles.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
  2 | 
  3 | * {
  4 |   font-family: "Open Sans";
  5 | }
  6 | 
  7 | /* #resume-form {
  8 |     display: none;
  9 | } */
 10 | 
 11 | #resume-template {
 12 |   display: none;
 13 | }
 14 | 
 15 | .background {
 16 |   background-color: #3a9aff;
 17 | }
 18 | 
 19 | .img-logo {
 20 |   margin-top: 20px;
 21 |   margin-bottom: 10px;
 22 |   width: 200px;
 23 |   height: 200px;
 24 |   border-radius: 50%;
 25 | }
 26 | p {
 27 |   color: white;
 28 | }
 29 | 
 30 | .name1,
 31 | .address1 {
 32 |   font-size: 20px;
 33 | }
 34 | .email1,
 35 | .phn1 {
 36 |   font-size: 18px;
 37 | }
 38 | .personal {
 39 |   padding-bottom: 10px;
 40 | }
 41 | 
 42 | .hr-row {
 43 |   color: white;
 44 | }
 45 | a {
 46 |   color: white;
 47 |   text-decoration: none;
 48 |   max-width: fit-content;
 49 | }
 50 | .social-head {
 51 |   color: white;
 52 |   font-weight: bold;
 53 | }
 54 | .social {
 55 |   text-align: left;
 56 |   padding-top: 20px;
 57 | }
 58 | 
 59 | .btn-primary {
 60 |   color: #02040e;
 61 |   padding: 15px 0; /* Adjust the vertical padding as needed */
 62 |   border-radius: 100px;
 63 |   background-color: #6baef1;
 64 |   background-image: radial-gradient(
 65 |       93% 87% at 87% 89%,
 66 |       rgba(0, 0, 0, 0.23) 0%,
 67 |       transparent 86.18%
 68 |     ),
 69 |     radial-gradient(
 70 |       66% 87% at 26% 20%,
 71 |       rgba(255, 255, 255, 0.41) 0%,
 72 |       rgba(255, 255, 255, 0) 69.79%,
 73 |       rgba(255, 255, 255, 0) 100%
 74 |     );
 75 |   box-shadow: 2px 19px 31px rgba(0, 0, 0, 0.2);
 76 |   font-weight: bold;
 77 |   font-size: 16px;
 78 |   font-family: Arial, sans-serif;
 79 |   text-transform: uppercase;
 80 |   border: 0;
 81 |   user-select: none;
 82 |   -webkit-user-select: none;
 83 |   touch-action: manipulation;
 84 |   cursor: pointer;
 85 |   width: 150px;
 86 |   margin-left: -50px;
 87 |   margin-top: 25px;
 88 |   transition: background-color 0.3s ease, transform 0.3s ease;
 89 |   margin-bottom: 10px;
 90 |   justify-content: center;
 91 |   align-items: center;
 92 |   text-align: center;
 93 | }
 94 | 
 95 | .btn-primary:first-child {
 96 |   margin-top: 25px;
 97 | }
 98 | 
 99 | .btn-primary:last-child {
100 |   margin-top: 50px;
101 |   margin-left: 75px;
102 | }
103 | 
104 | .btn-primary:hover {
105 |   background-color: #1c2938;
106 |   transform: scale(1.05);
107 |   color: #6baef1;
108 | }
109 | 
110 | .text-center {
111 |   color: #000;
112 | }
113 | 
114 | .txt {
115 |   font: 2.5rem sans-serif;
116 | }
117 | 
118 | .btn-add {
119 |   color: #02040e;
120 |   padding: 15px 0; /* Adjust the vertical padding as needed */
121 |   border-radius: 100px;
122 |   background-color: #6baef1;
123 |   background-image: radial-gradient(
124 |       93% 87% at 87% 89%,
125 |       rgba(0, 0, 0, 0.23) 0%,
126 |       transparent 86.18%
127 |     ),
128 |     radial-gradient(
129 |       66% 87% at 26% 20%,
130 |       rgba(255, 255, 255, 0.41) 0%,
131 |       rgba(255, 255, 255, 0) 69.79%,
132 |       rgba(255, 255, 255, 0) 100%
133 |     );
134 |   box-shadow: 2px 19px 31px rgba(0, 0, 0, 0.2);
135 |   font-weight: bold;
136 |   font-size: 16px;
137 |   font-family: Arial, sans-serif;
138 |   text-transform: uppercase;
139 |   border: 0;
140 |   user-select: none;
141 |   -webkit-user-select: none;
142 |   touch-action: manipulation;
143 |   cursor: pointer;
144 |   width: 150px;
145 |   margin-left: -50px;
146 |   margin-top: 25px;
147 |   transition: background-color 0.3s ease, transform 0.3s ease;
148 |   margin-bottom: 10px;
149 |   justify-content: center;
150 |   align-items: center;
151 |   text-align: center;
152 |   margin-left: -10px;
153 | }
154 | 
155 | .btn-add:hover {
156 |   background-color: #1c2938;
157 |   transform: scale(1.05);
158 |   color: #6baef1;
159 | }
160 | 


--------------------------------------------------------------------------------
/Starbucks_Landing_Page/assets/Favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Starbucks_Landing_Page/assets/Favicon.png


--------------------------------------------------------------------------------
/Starbucks_Landing_Page/assets/facebook.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Starbucks_Landing_Page/assets/facebook.png


--------------------------------------------------------------------------------
/Starbucks_Landing_Page/assets/img1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Starbucks_Landing_Page/assets/img1.png


--------------------------------------------------------------------------------
/Starbucks_Landing_Page/assets/img2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Starbucks_Landing_Page/assets/img2.png


--------------------------------------------------------------------------------
/Starbucks_Landing_Page/assets/img3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Starbucks_Landing_Page/assets/img3.png


--------------------------------------------------------------------------------
/Starbucks_Landing_Page/assets/instagram.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Starbucks_Landing_Page/assets/instagram.png


--------------------------------------------------------------------------------
/Starbucks_Landing_Page/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Starbucks_Landing_Page/assets/logo.png


--------------------------------------------------------------------------------
/Starbucks_Landing_Page/assets/thumb1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Starbucks_Landing_Page/assets/thumb1.png


--------------------------------------------------------------------------------
/Starbucks_Landing_Page/assets/thumb2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Starbucks_Landing_Page/assets/thumb2.png


--------------------------------------------------------------------------------
/Starbucks_Landing_Page/assets/thumb3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Starbucks_Landing_Page/assets/thumb3.png


--------------------------------------------------------------------------------
/Starbucks_Landing_Page/assets/twitter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Starbucks_Landing_Page/assets/twitter.png


--------------------------------------------------------------------------------
/Starbucks_Landing_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 |     <title>Starbucks Coffee Company</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <link rel="icon" type="image/x-png" href="assets/Favicon.png">
 9 | </head>
10 | <body>
11 |     <section>
12 |         <div class="circle"></div>
13 |         <header>
14 |             <a href="https://www.starbucks.in/dashboard"><img src="/assets/logo.png"  class="logo"></a>
15 |             <ul>
16 |                 <li><a href="https://www.starbucks.in/dashboard">Home</a></li>
17 |                 <li><a href="https://www.starbucks.in/ordering">Menu</a></li>
18 |                 <li><a href="https://www.starbucks.in/profile/help-center">FAQs</a></li>
19 |                 <li><a href="https://www.starbucks.in/profile/help-center">Contact</a></li>
20 |             </ul>
21 |         </header>
22 |         <div class="content">
23 |             <div class="textBox">
24 |                 <h2>It's Not Just A Coffee <br> It's <span>Starbucks</span></h2>
25 |                 <p>Starbucks coffee: A symphony of taste and ethics.
26 |                     Crafted with care from sustainably sourced beans, their roasts offer a range of delightful flavors.
27 |                     Enter a warm, inspiring space where baristas create personalized cups of joy.
28 |                     Beyond coffee, Starbucks fosters positive change through community support.</p>
29 |                 <a href="https://www.starbucks.in/rewards">Know More</a>
30 |             </div>
31 |         </div>
32 |         <div class="imgBox">
33 |             <img src="./assets/img1.png" class="starbucks">
34 |         </div>
35 |         <ul class="thumb">
36 |             <li><img src="./assets/thumb1.png" onclick="imgSlider('./assets/img1.png')"></li>
37 |             <li><img src="./assets/thumb2.png" onclick="imgSlider('./assets/img2.png')"></li>
38 |             <li><img src="./assets/thumb3.png" onclick="imgSlider('./assets/img3.png')"></li>
39 |         </ul>
40 |         <ul class="sci">
41 |             <li><a href="https://www.facebook.com/starbucksindia"><img src="./assets/facebook.png"></a></li>
42 |             <li><a href="https://twitter.com/starbucksindia"><img src="./assets/twitter.png"></a></li>
43 |             <li><a href="https://www.instagram.com/starbucksindia/"><img src="./assets/instagram.png"></a></li>
44 |         </ul>
45 |     </section>
46 |     <script src="./script.js"></script>
47 | </body>
48 | </html>


--------------------------------------------------------------------------------
/Starbucks_Landing_Page/script.js:
--------------------------------------------------------------------------------
1 | function imgSlider(anything){
2 |     document.querySelector('.starbucks').src=anything;
3 | }
4 | 


--------------------------------------------------------------------------------
/Starbucks_Landing_Page/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
  2 | 
  3 | 
  4 | *{
  5 |     margin : 0;
  6 |     padding: 0;
  7 |     box-sizing: border-box;
  8 |     font-family: 'Poppins', sans-serif;
  9 | 
 10 | }
 11 | 
 12 | section{
 13 |     position: relative;
 14 |     width: 100%;
 15 |     min-height: 100vh;
 16 |     padding: 100px;
 17 |     display: flex;
 18 |     justify-content: space-between;
 19 |     align-items: center;
 20 |     background: #fff;
 21 | }
 22 | 
 23 | header {
 24 |     position: absolute;
 25 |     top: 0;
 26 |     left: 0;
 27 |     width: 100%;
 28 |     padding: 20px 100px;
 29 |     display: flex;
 30 |     justify-content: space-between;
 31 |     align-items: center;
 32 |     background-color: transparent;
 33 | }
 34 | 
 35 | header .logo {
 36 |     position: relative;
 37 |     max-width: 80px;
 38 | }
 39 | 
 40 | header ul{
 41 |     position: relative;
 42 |     display: flex;
 43 | 
 44 | }
 45 | 
 46 | header ul li{
 47 |     list-style: none;
 48 | }
 49 | 
 50 | header ul li a{
 51 |     display: inline-block;
 52 |     color: #333;
 53 |     font-weight: 400;
 54 |     margin-left: 40px;
 55 |     text-decoration: none;
 56 | }
 57 | 
 58 | .content{
 59 |     position: relative;
 60 |     width: 100%;
 61 |     display: flex;
 62 |     justify-content: space-between;
 63 |     align-items: center;
 64 | }
 65 | 
 66 | .content .textBox{
 67 |     position: relative;
 68 |     max-width: 600px;
 69 | }
 70 | 
 71 | .content .textBox h2{
 72 |     color: #333;
 73 |     font-size: 3.5em;
 74 |     line-height: 1.4em;
 75 |     font-weight: 500;
 76 | }
 77 | 
 78 | .content .textBox h2 span{
 79 |     color: #017143;
 80 |     font-size: 1.2em;
 81 |     font-weight: 900;
 82 | }
 83 | 
 84 | .content .textBox p{
 85 |     color: #333;
 86 | }
 87 | 
 88 | .content .textBox a{
 89 |     display: inline-block;
 90 |     margin-top: 20px;
 91 |     padding: 8px 20px;
 92 |     background: #017143;
 93 |     color: #fff;
 94 |     border-radius: 40px;
 95 |     font-weight: 500;
 96 |     letter-spacing: 1px;
 97 |     text-decoration: none;
 98 |     transition: color 0.3s ease;
 99 | }
100 | 
101 | .content .textBox a:hover{
102 |     color: yellow;
103 |     text-decoration: wavy;
104 |     transform: scale(1.05);
105 | }
106 | 
107 | .content .imgBox{
108 |     width: 600px;
109 |     display: flex; 
110 |     justify-content: flex-end;
111 |     padding-right: 50px;
112 |     margin-top: 50px;
113 | }
114 | 
115 | .content .imgBox img {
116 |     max-width: 340px;
117 | }
118 | 
119 | 
120 | .thumb{
121 |     position: absolute;
122 |     left: 50%;
123 |     bottom: 20px;
124 |     transform: translateX(-50%);
125 |     display: flex;
126 | }
127 | 
128 | .thumb li{
129 |     list-style: none;
130 |     display: inline-block;
131 |     margin: 0 20px;
132 |     cursor: pointer;
133 |     transition: 0.5s;
134 | }
135 | 
136 | .thumb li:hover{
137 |     transform: translateY(-15px);
138 | }
139 | 
140 | .thumb li img{
141 |     max-width: 60px;
142 | }
143 | 
144 | 
145 | .sci{
146 |     position: absolute;
147 |     top: 50%;
148 |     right: 30px;
149 |     transform: translateY(-50%);
150 |     display: flex;
151 |     justify-content: center;
152 |     align-items: center;
153 |     flex-direction: column;
154 | }
155 | 
156 | .sci li{
157 |     list-style: none;
158 | }
159 | 
160 | .sci li a {
161 |     display: inline-block;
162 |     margin: 5px 0;
163 |     transform: scale(0.6);
164 | }
165 | 
166 | .circle{
167 |     position: absolute;
168 |     top: 0;
169 |     left: 0;
170 |     width: 100%;
171 |     height: 100%;
172 | }
173 | 


--------------------------------------------------------------------------------
/Temperature Wizard/images/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Temperature Wizard/images/favicon.ico


--------------------------------------------------------------------------------
/Temperature Wizard/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 |     <title>Temperature Wizard</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <link rel="icon" type="image/x-icon" href="./images/favicon.ico">
 9 | </head>
10 | <body>
11 |     <div class="container">
12 |         <h1 class="heading">Temperature Wizard - A Temperature Converter </h1>
13 |         <div class="temp-container">
14 |             <label for="Celcius">Celcius</label>
15 |             <input 
16 |             onchange ="computeTemp(event)"
17 |             type="number" 
18 |             name="Celcius" 
19 |             id="Celcius" 
20 |             class="Celcius" 
21 |             placeholder="Enter Temperature in Celcius"/>    
22 |         </div>
23 |         <div class="temp-container">
24 |             <label for="fahre">Fahrenheit</label>
25 |             <input 
26 |             onchange="computeTemp(event)"
27 |             type="number" 
28 |             name="Fahrenheit" 
29 |             id="Fahrenheit" 
30 |             class="Fahrenheit" 
31 |             placeholder="Enter Temperature in Fahrenheit"/>    
32 |         </div>
33 |         <div class="temp-container">
34 |             <label for="Kelvin">Kelvin</label>
35 |             <input 
36 |             onchange="computeTemp(event)"
37 |             type="number" 
38 |             name="Kelvin" 
39 |             id="Kelvin" 
40 |             class="Kelvin" 
41 |             placeholder="Enter Temperature in Kelvin"/>    
42 |         </div>
43 |     </div>
44 |     
45 |     
46 |     <script src="./script.js"></script>
47 | </body>
48 | </html>


--------------------------------------------------------------------------------
/Temperature Wizard/script.js:
--------------------------------------------------------------------------------
 1 | const celciusEl = document.getElementById("Celcius");
 2 | const fahrenheitEl = document.getElementById("Fahrenheit");
 3 | const kelvinEl = document.getElementById("Kelvin");
 4 | 
 5 | function computeTemp(event) {
 6 |     const currentValue = event.target.value;
 7 | 
 8 |     switch (event.target.name) {
 9 |         case "Celcius":
10 |             fahrenheitEl.value = (currentValue * 9 / 5) + 32;
11 |             kelvinEl.value = parseFloat(currentValue) + 273.15;
12 |             break;
13 | 
14 |         case "Fahrenheit":
15 |             celciusEl.value = (currentValue - 32) * 5 / 9;
16 |             kelvinEl.value = (currentValue - 32) * 5 / 9 + 273.15;
17 |             break;
18 | 
19 |         case "Kelvin":
20 |             celciusEl.value = currentValue - 273.15;
21 |             fahrenheitEl.value = (currentValue - 273.15) * 9 / 5 + 32;
22 |             break;
23 | 
24 |         default:
25 |             break;
26 |     }
27 | }
28 | 


--------------------------------------------------------------------------------
/Temperature Wizard/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     margin: 0;
 3 |     display: flex;
 4 |     justify-content: center;
 5 |     align-items: center;
 6 |     min-height: 100vh;
 7 |     background: linear-gradient(90deg, rgba(93, 99, 204, 1) 0%, rgba(245, 240, 242, 1) 100%, rgba(0, 212, 255, 1) 100%);
 8 |     font-family: monospace, sans-serif;
 9 |     color: #0d5370;
10 | }
11 | 
12 | .container {
13 |     background: rgba(0, 212, 255, 0.3);
14 |     padding: 20px;
15 |     border-radius: 10px;
16 |     box-shadow: 0 0 4px 10px rgba(0, 0, 0, 0.3);
17 |     width: 85%;
18 |     max-width: 800px;
19 |     min-height: 300px;
20 |     display: flex;
21 |     flex-direction: column;
22 |     align-items: center;
23 | }
24 | 
25 | .heading {
26 |     font-size: 32px;
27 | }
28 | 
29 | .temp-container {
30 |     width: 100%;
31 |     padding: 15px;
32 |     font-weight: bold;
33 |     font-size: 18px;
34 |     display: flex;
35 |     flex-direction: row;
36 |     align-items: center;
37 |     justify-content: space-between;
38 | }
39 | 
40 | input {
41 |     width: 60%;
42 |     font-family: monospace;
43 |     padding: 5px;
44 |     outline: none;
45 |     background: rgba(0, 212, 255, 0.3);
46 |     border-color: rgba(255, 255, 255, 0.6);
47 |     color: darkblue;
48 |     font-size: 18px;
49 | }
50 | 
51 | input::placeholder {
52 |     color: crimson;
53 | }
54 | 
55 | /* Responsive CSS */
56 | @media (min-width: 600px) {
57 |     .container {
58 |         width: 70%;
59 |     }
60 | 
61 |     input {
62 |         width: 50%;
63 |     }
64 | }
65 | 
66 | @media (min-width: 900px) {
67 |     .container {
68 |         width: 60%;
69 |     }
70 | 
71 |     input {
72 |         width: 40%;
73 |     }
74 | }
75 | 


--------------------------------------------------------------------------------
/To_Do_Express/4697260.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/To_Do_Express/4697260.png


--------------------------------------------------------------------------------
/To_Do_Express/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/To_Do_Express/android-chrome-192x192.png


--------------------------------------------------------------------------------
/To_Do_Express/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/To_Do_Express/android-chrome-512x512.png


--------------------------------------------------------------------------------
/To_Do_Express/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/To_Do_Express/apple-touch-icon.png


--------------------------------------------------------------------------------
/To_Do_Express/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/To_Do_Express/favicon-16x16.png


--------------------------------------------------------------------------------
/To_Do_Express/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/To_Do_Express/favicon-32x32.png


--------------------------------------------------------------------------------
/To_Do_Express/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/To_Do_Express/favicon.ico


--------------------------------------------------------------------------------
/To_Do_Express/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>To Do Express</title>
 8 |     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
 9 |     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
10 |     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
11 |     <link rel="manifest" href="/site.webmanifest">
12 |     <meta name="theme-color" content="#ffffff">
13 |     <link
14 |       href="https://fonts.googleapis.com/icon?family=Material+Icons"
15 |       rel="stylesheet"
16 |     />
17 |     <link rel="stylesheet" href="./style.css" />
18 |   </head>
19 |   <body>
20 |     <main>
21 |       <div class="app">
22 |         <header>
23 |           <h1>Your To Do List</h1>
24 |           <button id="create">Add New Task</button>
25 |         </header>
26 |         <div class="todo-list" id="list"></div>
27 |       </div>
28 |     </main>
29 |     <script src="script.js"></script>
30 |   </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/To_Do_Express/script.js:
--------------------------------------------------------------------------------
  1 | const list_el = document.getElementById("list");
  2 | const create_btn_el = document.getElementById("create");
  3 | 
  4 | let todos = [];
  5 | 
  6 | create_btn_el.addEventListener('click', CreateNewTodo);
  7 | 
  8 | function CreateNewTodo() {
  9 | 	const item = {
 10 | 		id: new Date().getTime(),
 11 | 		text: "",
 12 | 		complete: false
 13 | 	}
 14 | 
 15 | 	todos.unshift(item);
 16 | 
 17 | 	const { item_el, input_el } = CreateTodoElement(item);
 18 | 
 19 | 	list_el.prepend(item_el);
 20 | 
 21 | 	input_el.removeAttribute("disabled");
 22 | 	input_el.focus();
 23 | 
 24 | 	Save();
 25 | }
 26 | 
 27 | function CreateTodoElement(item) {
 28 | 	const item_el = document.createElement("div");
 29 | 	item_el.classList.add("item");
 30 | 
 31 | 	const checkbox = document.createElement("input");
 32 | 	checkbox.type = "checkbox";
 33 | 	checkbox.checked = item.complete;
 34 | 
 35 | 	if (item.complete) {
 36 | 		item_el.classList.add("complete");
 37 | 	}
 38 | 
 39 | 	const input_el = document.createElement("input");
 40 | 	input_el.type = "text";
 41 | 	input_el.value = item.text;
 42 | 	input_el.setAttribute("disabled", "");
 43 | 
 44 | 	const actions_el = document.createElement("div");
 45 | 	actions_el.classList.add("actions");
 46 | 
 47 | 	const edit_btn_el = document.createElement("button");
 48 | 	edit_btn_el.classList.add("material-icons");
 49 | 	edit_btn_el.innerText = "edit";
 50 | 
 51 | 	const remove_btn_el = document.createElement("button");
 52 | 	remove_btn_el.classList.add("material-icons", "remove-btn");
 53 | 	remove_btn_el.innerText = "remove_circle";
 54 | 
 55 | 	actions_el.append(edit_btn_el);
 56 | 	actions_el.append(remove_btn_el);
 57 | 
 58 | 	item_el.append(checkbox);
 59 | 	item_el.append(input_el);
 60 | 	item_el.append(actions_el);
 61 | 
 62 | 	// EVENTS
 63 | 	checkbox.addEventListener("change", () => {
 64 | 		item.complete = checkbox.checked;
 65 | 
 66 | 		if (item.complete) {
 67 | 			item_el.classList.add("complete");
 68 | 		} else {
 69 | 			item_el.classList.remove("complete");
 70 | 		}
 71 | 
 72 | 		Save();
 73 | 	});
 74 | 
 75 | 	input_el.addEventListener("input", () => {
 76 | 		item.text = input_el.value;
 77 | 	});
 78 | 
 79 | 	input_el.addEventListener("blur", () => {
 80 | 		input_el.setAttribute("disabled", "");
 81 | 		Save();
 82 | 	});
 83 | 
 84 | 	edit_btn_el.addEventListener("click", () => {
 85 | 		input_el.removeAttribute("disabled");
 86 | 		input_el.focus();
 87 | 	});
 88 | 
 89 | 	remove_btn_el.addEventListener("click", () => {
 90 | 		todos = todos.filter(t => t.id != item.id);
 91 | 
 92 | 		item_el.remove();
 93 | 
 94 | 		Save();
 95 | 	});
 96 | 
 97 | 	return { item_el, input_el, edit_btn_el, remove_btn_el }
 98 | }
 99 | 
100 | function DisplayTodos() {
101 | 	Load();
102 | 
103 | 	for (let i = 0; i < todos.length; i++) {
104 | 		const item = todos[i];
105 | 
106 | 		const { item_el } = CreateTodoElement(item);
107 | 
108 | 		list_el.append(item_el);
109 | 	}
110 | }
111 | 
112 | DisplayTodos();
113 | 
114 | function Save() {
115 | 	const save = JSON.stringify(todos);
116 | 
117 | 	localStorage.setItem("my_todos", save);
118 | }
119 | 
120 | function Load() {
121 | 	const data = localStorage.getItem("my_todos");
122 | 
123 | 	if (data) {
124 | 		todos = JSON.parse(data);
125 | 	}
126 | }


--------------------------------------------------------------------------------
/To_Do_Express/site.webmanifest:
--------------------------------------------------------------------------------
1 | {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}


--------------------------------------------------------------------------------
/To_Do_Express/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   margin: 0;
  3 |   padding: 0;
  4 |   box-sizing: border-box;
  5 | 
  6 |   font-family: sans-serif;
  7 | }
  8 | 
  9 | button {
 10 |   appearance: none;
 11 |   background: none;
 12 |   outline: none;
 13 |   border: none;
 14 | 
 15 |   cursor: pointer;
 16 | }
 17 | 
 18 | body {
 19 |   background-color: #242948;
 20 |   color: #fff;
 21 | }
 22 | 
 23 | main {
 24 |   min-height: 100vh;
 25 |   display: flex;
 26 |   justify-content: center;
 27 |   padding: 2rem 1.5rem;
 28 | }
 29 | 
 30 | .app {
 31 |   width: 100%;
 32 |   max-width: 768px;
 33 | }
 34 | 
 35 | .app header {
 36 |   display: flex;
 37 |   align-items: center;
 38 |   justify-content: space-between;
 39 |   margin-bottom: 1rem;
 40 | }
 41 | 
 42 | .app header h1 {
 43 |   color: #fff;
 44 |   font-size: 24px;
 45 |   font-weight: 400;
 46 | }
 47 | 
 48 | .app header button {
 49 |   color: #fff;
 50 |   font-size: 18px;
 51 |   border-bottom: 2px solid #fff;
 52 |   text-transform: uppercase;
 53 | }
 54 | 
 55 | .item {
 56 |   display: flex;
 57 |   align-items: center;
 58 |   justify-content: space-between;
 59 |   padding: 1.5rem;
 60 |   border-radius: 1rem;
 61 |   background-color: #1e223d;
 62 |   box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
 63 |   margin-bottom: 1.5rem;
 64 | }
 65 | 
 66 | .item:last-of-type {
 67 |   margin-bottom: 0;
 68 | }
 69 | 
 70 | .item input[type="checkbox"] {
 71 |   margin-right: 1rem;
 72 | }
 73 | 
 74 | .item input[type="text"] {
 75 |   appearance: none;
 76 |   background: none;
 77 |   border: none;
 78 |   outline: none;
 79 |   font-weight: 400;
 80 |   color: #fff;
 81 |   font-size: 20px;
 82 |   flex: 1 1 0%;
 83 |   margin-right: 1rem;
 84 | }
 85 | 
 86 | .item input[type="text"]:not(:disabled) {
 87 |   border-bottom: 2px solid #fff;
 88 | }
 89 | 
 90 | .item.complete {
 91 |   opacity: 0.7;
 92 | }
 93 | 
 94 | .item.complete input[type="text"] {
 95 |   text-decoration: line-through;
 96 | }
 97 | 
 98 | .item:hover,
 99 | .item:focus-within {
100 |   outline: 2px solid #fff;
101 | }
102 | 
103 | .actions button {
104 |   color: #ccc;
105 |   margin-right: 1rem;
106 |   opacity: 0.8;
107 |   transform: 0.1s;
108 | }
109 | 
110 | .actions button.remove-btn {
111 |   color: crimson;
112 | }
113 | 
114 | .actions button:hover {
115 |   opacity: 1;
116 | }
117 | 
118 | .actions button:last-of-type {
119 |   margin-right: 0;
120 | }
121 | 


--------------------------------------------------------------------------------
/Tribute_Page_For_Atal_Bihar_Vajpaayee/favicon/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Tribute_Page_For_Atal_Bihar_Vajpaayee/favicon/android-chrome-192x192.png


--------------------------------------------------------------------------------
/Tribute_Page_For_Atal_Bihar_Vajpaayee/favicon/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Tribute_Page_For_Atal_Bihar_Vajpaayee/favicon/android-chrome-512x512.png


--------------------------------------------------------------------------------
/Tribute_Page_For_Atal_Bihar_Vajpaayee/favicon/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Tribute_Page_For_Atal_Bihar_Vajpaayee/favicon/apple-touch-icon.png


--------------------------------------------------------------------------------
/Tribute_Page_For_Atal_Bihar_Vajpaayee/favicon/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Tribute_Page_For_Atal_Bihar_Vajpaayee/favicon/favicon-16x16.png


--------------------------------------------------------------------------------
/Tribute_Page_For_Atal_Bihar_Vajpaayee/favicon/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Tribute_Page_For_Atal_Bihar_Vajpaayee/favicon/favicon-32x32.png


--------------------------------------------------------------------------------
/Tribute_Page_For_Atal_Bihar_Vajpaayee/favicon/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Tribute_Page_For_Atal_Bihar_Vajpaayee/favicon/favicon.ico


--------------------------------------------------------------------------------
/Tribute_Page_For_Atal_Bihar_Vajpaayee/favicon/site.webmanifest:
--------------------------------------------------------------------------------
1 | {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}


--------------------------------------------------------------------------------
/Tribute_Page_For_Atal_Bihar_Vajpaayee/images/atal-bihari-vajpayee-png-images-thumbnail-1640366759-removebg-preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Tribute_Page_For_Atal_Bihar_Vajpaayee/images/atal-bihari-vajpayee-png-images-thumbnail-1640366759-removebg-preview.png


--------------------------------------------------------------------------------
/Tribute_Page_For_Atal_Bihar_Vajpaayee/images/atal-bihari-vajpayee-png-images-thumbnail-1640366759.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alok-2002/web_development_project/454d34561e93c7a8e05a22baaea597f28d2a55af/Tribute_Page_For_Atal_Bihar_Vajpaayee/images/atal-bihari-vajpayee-png-images-thumbnail-1640366759.jpg


--------------------------------------------------------------------------------
/Tribute_Page_For_Atal_Bihar_Vajpaayee/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>The Tribute Page | Atal Bihari Vajpayee</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <link rel="icon" type="image/x-icon" href="./favicon/favicon.ico">
10 | 
11 | </head>
12 | <body>
13 |     <header class="hidden">
14 |         <h1 class="title">Atal Bihari Vajpayee</h1>
15 |         <p class="description">1924 - 2018</p>
16 |     </header>    
17 |     <section class="tribute">
18 |         <blockquote>
19 |             "One should firmly believe that all difficulties in life eventually come to an end. - <span class="quote">Atal Bihari Vajpayee"</span>
20 |         </blockquote>
21 |         <img src="./images/atal-bihari-vajpayee-png-images-thumbnail-1640366759-removebg-preview.png" alt="Atal Bihari Vajpayee" title="Atal Bihari Vajpayee">
22 |     </section>
23 | 
24 |     <section class="bio">
25 |         <h2>Biography of Atal Bihari Vajpayee</h2>
26 |         <h5 class="early">Early Life and Education</h5>
27 |         <p>Atal Bihari Vajpayee was born on December 25, 1924, in Gwalior, Madhya Pradesh, India. He hailed from a middle-class Brahmin family. From a young age, Vajpayee displayed exceptional oratory skills and a keen interest in politics. He completed his schooling from Saraswati Shishu Mandir, Gwalior, and later pursued his higher education at Victoria College (now Laxmi Bai College) in Gwalior and DAV College in Kanpur.</p>
28 |         
29 |         <hr>
30 |         
31 |         <h5>Involvement in Politics</h5>
32 |         <p>Vajpayee's political journey began during his college days when he became associated with the Rashtriya Swayamsevak Sangh (RSS), a Hindu nationalist organization. He was deeply influenced by the ideologies of the RSS and its leaders, such as Shyama Prasad Mukherjee and Deendayal Upadhyaya.
33 |         In 1951, Vajpayee co-founded the Bharatiya Jana Sangh, the political arm of the RSS, and soon emerged as one of its prominent leaders. He was elected as a Member of Parliament to the Lok Sabha for the first time in 1957 from Balrampur in Uttar Pradesh. Vajpayee's eloquence and moderate approach helped him gain respect and popularity, both within his party and among political opponents</p>
34 |         
35 |         <hr>
36 |         
37 |         <h5>Rise to Prominence</h5>
38 |         <p>Over the years, Atal Bihari Vajpayee's stature within the Jana Sangh grew steadily. He was known for his ability to forge alliances and maintain strong relationships across party lines. As a result, when the Janata Party was formed in 1977, he played a crucial role in its formation and became the External Affairs Minister in the Morarji Desai-led government.</p>
39 |         
40 |         <hr>
41 |         
42 |         <h5>Founding the BJP and Prime Ministerial Tenure</h5>
43 |         <p>In 1980, after the Janata Party's coalition collapsed, Vajpayee re-established the Bharatiya Janata Party (BJP) as its own separate political entity. Under his leadership, the BJP steadily gained prominence and emerged as a major force in Indian politics.
44 |         In 1996, Atal Bihari Vajpayee was elected as the Prime Minister of India for the first time, but his government lasted only for 13 days. However, he did not give up, and in 1998, the BJP-led National Democratic Alliance (NDA) secured a significant victory in the general elections, and Vajpayee once again became the Prime Minister.
45 |         During his second term as Prime Minister from 1998 to 1999, Vajpayee's government conducted a series of nuclear tests in Pokhran, establishing India as a nuclear power. His government also focused on economic reforms, infrastructure development, and improving India's international relations.</p>
46 |         
47 |         <hr>
48 |         
49 |         <h5>The Kargil Conflict and Statesmanship</h5>
50 |         <p>In 1999, India faced the Kargil conflict with Pakistan. Vajpayee's resolute leadership during this critical time earned him immense respect, both domestically and internationally. He displayed statesmanship by not crossing the Line of Control during the conflict, and once the conflict was resolved, he extended a hand of friendship towards Pakistan, advocating for peace and dialogue.</p>
51 |         
52 |         <hr>
53 |         
54 |         <h5>The Third Term as Prime Minister</h5>
55 |         <p>In 1999, the NDA, led by Vajpayee, emerged victorious once again in the general elections. Vajpayee became the Prime Minister for the third time and served a full term from 1999 to 2004. During this tenure, his government continued to focus on economic reforms and infrastructure development. His visionary project, the Golden Quadrilateral, aimed at connecting major cities through a network of highways, was initiated during this time.</p>
56 |         <hr>
57 |         
58 |         <h5>Retirement and Later Life</h5>
59 |         <p>In 2004, the NDA lost the general elections, and Vajpayee announced his retirement from active politics. However, he remained an influential and respected figure within the BJP and continued to be consulted on important matters</p>
60 |         <hr>
61 |         
62 |         <h5>Legacy and Passing</h5>
63 |         <p>Atal Bihari Vajpayee was a statesman, poet, and visionary leader who left an indelible mark on Indian politics. His moderation, oratory skills, and dedication to peace and development made him a beloved leader across party lines. On August 16, 2018, Atal Bihari Vajpayee passed away at the age of 93, leaving the nation in mourning. He will always be remembered as one of India's most admired and respected leaders, and his legacy will continue to inspire generations to come.
64 |         </p>
65 |     </section>
66 | 
67 | </body>
68 | </html>
69 | 


--------------------------------------------------------------------------------
/Tribute_Page_For_Atal_Bihar_Vajpaayee/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   margin: 0;
  3 |   padding: 0;
  4 |   box-sizing: border-box;
  5 | }
  6 | 
  7 | body {
  8 |   font-family: "Helvetica Neue", Helvetica, Arial;
  9 |   color: white;
 10 |   background-color: black;
 11 | }
 12 | 
 13 | .container {
 14 |   max-width: 90rem;
 15 |   margin: 2rem auto;
 16 |   padding: 0 2rem;
 17 | }
 18 | 
 19 | .description {
 20 |   font-size: 2rem;
 21 | }
 22 | 
 23 | .hidden {
 24 |   padding: 2rem;
 25 |   margin: 1rem 0;
 26 |   text-align: center;
 27 | }
 28 | 
 29 | .hidden > .title {
 30 |   margin-bottom: 1rem;
 31 | }
 32 | 
 33 | .tribute {
 34 |   display: grid;
 35 |   grid-template-columns: 2fr 1fr;
 36 |   max-width: 78rem;
 37 |   margin: 0 auto;
 38 |   background-color: white;
 39 |   color: black;
 40 |   align-items: center;
 41 |   padding: 0 0 0 1rem;
 42 | }
 43 | 
 44 | .tribute blockquote {
 45 |   text-align: center;
 46 |   font-size: 2.1rem;
 47 | }
 48 | 
 49 | .quote {
 50 |   font-weight: bold;
 51 |   font-family: Arial, Helvetica, sans-serif;
 52 |   font-size: 3rem;
 53 | }
 54 | 
 55 | .bio {
 56 |   margin: 2rem auto;
 57 |   padding: 0 0.5rem;
 58 |   max-width: 1000px;
 59 | }
 60 | 
 61 | .bio > h2 {
 62 |   margin-bottom: 1rem;
 63 |   font-size: 3rem;
 64 |   line-height: 1.2;
 65 | }
 66 | 
 67 | .bio > h5 {
 68 |   font-size: 2rem;
 69 |   padding-bottom: 10px;
 70 | }
 71 | 
 72 | .bio > p {
 73 |   font-size: 1.2rem;
 74 |   line-height: 1.4;
 75 | }
 76 | 
 77 | .bio > hr {
 78 |   margin-top: 2rem;
 79 |   margin-bottom: 2rem;
 80 | }
 81 | 
 82 | @media screen and (max-width: 768px) {
 83 |   .container {
 84 |     margin: 1rem auto;
 85 |     padding: 0 1rem;
 86 |   }
 87 | }
 88 | 
 89 | @media screen and (max-width: 768px) {
 90 |   .tribute {
 91 |     display: block;
 92 |   }
 93 | 
 94 |   .tribute blockquote {
 95 |     font-size: 1.8rem;
 96 |   }
 97 | 
 98 |   .quote {
 99 |     font-size: 2.5rem;
100 |   }
101 | }
102 | @media screen and (max-width: 576px) {
103 |   .bio > h2 {
104 |     font-size: 2.5rem;
105 |   }
106 | 
107 |   .bio > h5 {
108 |     font-size: 1.8rem;
109 |   }
110 | 
111 |   .bio > p {
112 |     font-size: 1.1rem;
113 |   }
114 | }
115 | 
116 | .bio > h2,
117 | .bio > h5,
118 | .bio > p {
119 |   margin-bottom: 1rem; 
120 | }


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