My aim with this project was to create a quiz using JavaScript, DOM manipulation and local storage within the browser. This project gave me further experience in evaluating each step I need to take when developing each part of my webpage. I learned how to use JSON.stringify and JSON.parse to transfer data to and from the local storage, but also between JavaScript files, and using setInterval to create a timer for my quiz. I also learned to account for all kinds of situations, such as the user not typing in their initials and incurring a time penalty when an incorrect answer is clicked. One major lesson learned is using the console and data attributes to check variables being passed through functions when functions are not working as I would like them to.
N/A
Instructions:
Visit the Coding Quiz webpage.
Click the 'Start Quiz' button to begin
Coding related questions will appear and you will need to answer all of them before the time runs out! If you get any questions wrong, 10 seconds will be deducted. Your final score will be the remaining amount of time.
Once you have finished the quiz, you have the option to add your initials and score to the leaderboard. Please ensure that you enter at least one initial as otherwise your score will not save.
To visit the leaderboard, click 'View Highscores' in the top left corner. Here, you can view the leaderboard as it stands or you can clear the scores to start from scratch!
Please see the following screenshots to see how the page works:
The following third-party assets were used to assist with this code:
setInterval() global function - MDN
Array.prototype.forEach() - MDN
Document:querySelector() method - MDN
HTMLElement: dataset property - MDN
EventTarget: addEventListener() method - MDN
Element: setAttribute() method
Document: createElement() method - MDN
Storage: removeItem() method - MDN
HTML DOM Document addEventListener() - W3Schools
HTML DOM Document createElement() - W3Schools
HTML DOM parentElement Property - W3Schools
HTML DOM Element appendChild() - W3Schools
HTML DOM Element className - W3Schools
preventDefault() Event Method - W3Schools
How to dynamically create and apply CSS class in Javascript? - Geeks for Geeks
How to sort by object property in JavaScript - byby.dev
Storing and retrieving JavaScript objects in localStorage - LogRocket