JavaScript Quiz App

Quiz application fetching data from the Open Trivia Database API.

The user can start a game, answer 10 questions and save their score to the localStorage.

Visit the live demo by clicking here.

Features:

• Color indication of whether the answer given is correct or false

• Save score in the localStorage (and get data from there as well)

- Progress bar using CSS and JavaScript    
- Spinning loader using CSS and JavaScript

Notes

(Some reminders for myself & what I learned/practiced/refreshed while building this app)

• !+Tab creates an HTML template (VS Code)
• Practiced Emmet abbreviations while creating tags
• Used rem for responsive design
• Hover animation could be reused in SASS as a mixin
• <p class="choice-text" data-number="1">Choice 1</p>
data-number is used so we can differentiate between occurrences when querying by the class name
• Learned how to set up code snippets in VS Code, e.g. getid for getElementById - they really enhance workflow
• console.log(choices) - the output will be an HTMLCollection - Array.from() converts it into an array - inspecting this array reveals the dataset property, which contains the data-number custom property that we added to choice-text
• availableQuestions = [...questions]; - the spread operator takes the questions array, spreads out each of its items and puts them into the availableQuestions array
• Math.random() - gives a decimal between 0 and 1
• Math.random() * 3 - gives a decimal between 0 and 3
• Math.floor(Math.random() * 3) - rounds it into an integer between 0 and 3 (3 excluded)
• e.preventDefault(); - in this case prevents the form from submitting
• localStorage - stores data in key-value pairs
  • setItem
  • getItem
• Built-in JS functions:
  • splice()
  • sort()
  • map()
• ES6 features
  • let, const
  • template literals
  • arrow functions
• JSON methods
  • stringify()
  • parse()
• fetch() API
  • .then() promises
  • .catch() error handling
• Basic CSS animation, flexbox

Planned updates

• End screen - change text
• Fetched data - fix HTML issues
• Highlight correct answer upon chosing a wrong one
• Quit button
• Favicon

Credits

• Tutorial source