Skip to content

Develop #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 22 commits into
base: develop
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Got rid of exclamation
  • Loading branch information
jamesqquick committed Jan 23, 2020
commit acb701ede09a59eedce898d62a96f61822a8340a
74 changes: 37 additions & 37 deletions ReadMe.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@

![Home Screen](./images/cover.png)

Build a Quiz App with HTML, CSS, and JavaScript to improve your Core Web Development!
Build a Quiz App with HTML, CSS, and JavaScript to improve your Core Web Development

Want to improve your **core Web Develoment skills**? Want to improve your knowledge of **HTML, CSS, and JavaScript**? In this course, you're going to learn how to build a Quiz application **without the assistance of libraries or frameworks**. Here are some of the topic we will cover!

- Save high scores in Local Storage
- Create a progress bar
- Create a spinning loader icon
- Dynamically generate HTML in JavaScript
- Fetch trivia questions from Open Trivia DB API
- Save high scores in Local Storage
- Create a progress bar
- Create a spinning loader icon
- Dynamically generate HTML in JavaScript
- Fetch trivia questions from Open Trivia DB API

- JavaScript - Array Functions (splice, map, sort), Local Storage, Fetch API
- ES6 JavaScript Features - Arrow Functions, the Spread Operator, Const and Let, Template Literals
- CSS - Flexbox, Animtations, and REM units
- JavaScript - Array Functions (splice, map, sort), Local Storage, Fetch API
- ES6 JavaScript Features - Arrow Functions, the Spread Operator, Const and Let, Template Literals
- CSS - Flexbox, Animtations, and REM units

## Course Intro and Resources

Expand All @@ -24,9 +24,9 @@ In this course, we are going to use fundamental HTML, CSS, and JavaScript skills

Resources

- [Course Source Code](https://github.com/jamesqquick/Design-And-Build-A-Quiz-App)
- [Learn Build Teach Newsletter](https://www.learnbuildteach.com/)
- [Learn Build Teach YouTube Channel](https://www.youtube.com/c/jamesqquick)
- [Course Source Code](https://github.com/jamesqquick/Design-And-Build-A-Quiz-App)
- [Learn Build Teach Newsletter](https://www.learnbuildteach.com/)
- [Learn Build Teach YouTube Channel](https://www.youtube.com/c/jamesqquick)

## 1. Create and Style the Home Page

Expand All @@ -36,9 +36,9 @@ I encourage you all to take a look at Emmet snippets for generating HTML and CSS

Resources

- [Emmet in Visual Studio Code](https://www.youtube.com/watch?v=5guZjNDcVnA)
- [Understanding REM Units](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/)
- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [Emmet in Visual Studio Code](https://www.youtube.com/watch?v=5guZjNDcVnA)
- [Understanding REM Units](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/)
- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

## 2. Create and Style the Game Page

Expand All @@ -50,29 +50,29 @@ In this video, we will load questions from a hard coded array and iterate throug

Resources

- [Creating Code Snippets in Visual Studio Code](https://www.youtube.com/watch?v=K3gLlZm-m_8)
- [Using Data Attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes)
- [Document Query Selector](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)
- [Document Get by ID](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)
- [Spread Operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)
- [Arrow Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
- [Creating Code Snippets in Visual Studio Code](https://www.youtube.com/watch?v=K3gLlZm-m_8)
- [Using Data Attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes)
- [Document Query Selector](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)
- [Document Get by ID](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)
- [Spread Operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)
- [Arrow Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)

## 4. Display Feedback for Correct/Incorrect Answers

In this video, we check the user's answer for correctness and display feedback to the user before loading the next question.

Resources

- [Bootstrap 4 Colors](https://www.w3schools.com/bootstrap4/bootstrap_colors.asp)
- [Triple vs Double Equals](https://codeburst.io/javascript-double-equals-vs-triple-equals-61d4ce5a121a)
- [Bootstrap 4 Colors](https://www.w3schools.com/bootstrap4/bootstrap_colors.asp)
- [Triple vs Double Equals](https://codeburst.io/javascript-double-equals-vs-triple-equals-61d4ce5a121a)

## 5. Create Head's Up Display (HUD)

In this video, we will 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
- [ES6 Template Literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)

## 6. Create a Progress Bar

Expand All @@ -84,54 +84,54 @@ In this video, we will create our End page where we will display the user's achi

Resources

- [Local Storage](https://www.w3schools.com/jsref/prop_win_localstorage.asp)
- [Local Storage](https://www.w3schools.com/jsref/prop_win_localstorage.asp)

## 8. Save High Scores in Local Storage

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

Resources

- [Local Storage](https://www.w3schools.com/jsref/prop_win_localstorage.asp)
- [Local Storage](https://www.w3schools.com/jsref/prop_win_localstorage.asp)

## 9. Load and Display High Scores from Local Storage

In this video, we will 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](https://alligator.io/js/json-parse-stringify/)
- [Array Sort](https://www.w3schools.com/js/js_array_sort.asp)
- [Array Map](https://www.w3schools.com/jsref/jsref_map.asp)
- [Array Join](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join)
- [JSON Parse and Stringify](https://alligator.io/js/json-parse-stringify/)
- [Array Sort](https://www.w3schools.com/js/js_array_sort.asp)
- [Array Map](https://www.w3schools.com/jsref/jsref_map.asp)
- [Array Join](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join)

## 10. Fetch API to Load Questions From Local JSON File

In this video, we will move our sample questions from a hard coded array to an external .json file. This will help clean up our Game.js file and set ourselves up to request questions from an API in the next video.

Resources

- [How to Use the Fetch API](https://scotch.io/tutorials/how-to-use-the-javascript-fetch-api-to-get-data)
- [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise_)
- [How to Use the Fetch API](https://scotch.io/tutorials/how-to-use-the-javascript-fetch-api-to-get-data)
- [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise_)

## 11. Fetch API to Load Questions from Open Trivia API

In this video, we will use Fetch to request a list of questions from the Open Trivia DB API.

Reources

- [How to Use the Fetch API](https://scotch.io/tutorials/how-to-use-the-javascript-fetch-api-to-get-data)
- [Open Trivia DB](https://opentdb.com/)
- [Array Map](https://www.w3schools.com/jsref/jsref_map.asp)
- [Array For Each](https://www.w3schools.com/jsref/jsref_foreach.asp)
- [How to Use the Fetch API](https://scotch.io/tutorials/how-to-use-the-javascript-fetch-api-to-get-data)
- [Open Trivia DB](https://opentdb.com/)
- [Array Map](https://www.w3schools.com/jsref/jsref_map.asp)
- [Array For Each](https://www.w3schools.com/jsref/jsref_foreach.asp)

## 12. Create a Spinning Loader

In this video, we will create a simple spinning loader in CSS that will be displayed until we are finished requesting/loading questions from the API.

Resources

- [Create a CSS Loader](https://www.w3schools.com/howto/howto_css_loader.asp)
- [Create a CSS Loader](https://www.w3schools.com/howto/howto_css_loader.asp)

## 13. Closing

Expand Down