Build a Quiz App with HTML, CSS, and JavaScript

interview-task.md

Build a Quiz App with HTML, CSS, and JavaScript

1. Create and Style the Home Page

Create the home page along with a good chunk of the necessary CSS.

I encourage you all to take a look at Emmet snippets for generating HTML and CSS.

Resources

• Emmet in Visual Studio Code
• Understanding REM Units
• A Complete Guide to Flexbox

2. Create and Style the Game Page

Create the Game Page and display static question and answer information.

3. Display Hard Coded Question and Answers

Load questions from a hard coded array and iterate through available questions as the use answers them.

Resources

• Creating Code Snippets in Visual Studio Code
• Using Data Attributes
• Document Query Selector
• Document Get by ID
• Spread Operator
• Arrow Functions

4. Display Feedback for Correct/Incorrect Answers

Check the user's answer for correctness and display feedback to the user before loading the next question.

Resources

• Bootstrap 4 Colors
• Triple vs Double Equals

5. Create Head's Up Display (HUD)

Create a Heads Up Display (HUD) for our quiz app. This will display the user's score and current question number.

Resources

• ES6 Template Literals

6. Create and Style the End Page

Create our End page where we will display the user's achieved score. This screen will provide a form for saving the score and links for playing again or going home.

Bonus

1. Save High Scores in Local Storage

Save and maintain a high scores array in Local Storage. To do this, we will need to use JSON.stringify() and JSON.parse() to convert our high score array to a string and visa versa.

Resources

• Local Storage

2. Load and Display High Scores from Local Storage

Create our High Scores page. We will have to load the high scores from Local Storage, iterate through them, and display them on the screen.

Resources

• JSON Parse and Stringify
• Array Sort
• Array Map
• Array Join

3. Load Questions From Local JSON File

Move our sample questions from a hard coded array to an external .json file.