---

Building a Quiz App using JavaScript

Documenting My Progress

->Created a basic homepage layout using HTML and CSS flexbox. (fileName: index.html and styles.css)

Screenshot

->Created the game page layout with dummy elements. (fileName: game.html and game.css)

Screenshot

->After creating the game page layout, added some functionality and business logic using JavaScript. Now, it's displaying a the questions randomly from the hardcoded question array. (fileName: game.js)

Screenshot

->Added an click event listener and added feedback mechanim for the choice selected. If the choice selected corresponds to the correct answer to the quesion, the background-color of the choice changes to green else it changes to red for incorrect answers. (fileName: game.js)

Demo

Screen.Recording.2022-05-23.at.6.41.41.PM.mov

->Created a HUD (Heads-Up Display) to update the total score and number of questions. Total number of questions as of now is 3 and the bonus points awarded for each correct answer is 10. (fileName: game.html; game.css; game.js)

Demo of the heads-up display

Screen.Recording.2022-05-24.at.2.48.07.PM.mov

->Created a progress bar that updates according to the number of questions attempted.

Demo of the progress-bar

Screen.Recording.2022-05-24.at.5.37.29.PM.mov

->Created and style the end page (fileName: end.html and end.js)

Screenshot of the end page

Demo of the end page

Screen.Recording.2022-05-25.at.5.00.05.PM.mov

->High scores to be saved in the local storage and display it to the user and use fetch API to load questions from Open Trivia DB

Demo of the completed app

Screen.Recording.2022-05-26.at.2.56.25.AM.mov

Depoloyment

This project has been deployed to Netlify which can be accessed by clicking on the following URL: https://quickkkquiz.netlify.app/

Getting Started

In order to get started, fork the project and clone it to your local machine. In order to open the project and in oder to run it, you will need to have some code editor like VSCode or Atom and a Web Browser like Chrome. It would be more convinient if you have a live server extension or package installed onto your code editor. If you don't have a live server extension, get the full path of the index.html file and run it on your browser by entering the full path of index.html in the search box.

Acknowledgements

• colorhunt.co
• W3 Schools CSS FlexBox
• W3 Schools CSS Animations
• W3 Schools CSS loader
• W3 Schools JavaScript
• MDN Web Docs
• Fetch API Documentation
• W3 JavaScript localStorage
• Open Trivia API
• CSS Animations - MDN Web Docs
• Pseudo-classes - MDN Web Docs

---

© 2022 Santosh Shivam