Object-Oriented Programming with JavaScript - Build Quiz App [Video]
-
Free ChapterIntroduction
-
HTML5 Building Blocks of the App
-
Styling the Quiz app - achieving the final look
- Setting up and linking the CSS stylesheet
- Basics of CSS selectors and properties
- Default styling options for the app
- Background colors, and more on applying colors in CSS
- Design the quiz box
- Design the quiz box - part 2
- Design the header of the app
- Give the base design for the trackers
- Design the question and options area - part 1
- Design the question and options area - part 2
- Design the Next Question button
- Design the footer - progress area and timer
- Design the result area - score and retake button
-
[OPTIONAL] JavaScript & OOPs Basic Concepts (related to this project)
- Connecting HTML and script/JS files
- An introduction to variables and assigning values
- Mathematical operators and alerts
- Conditional statements - if else statement
- Conditional statements - Switch case
- Loops - For loop
- Arrays - 1 dimensional arrays
- Arrays - 2 dimensional arrays
- An introduction to functions (function definition and calls)
- Intro to DOM - getElementById and InnerText
- Intro to DOM - adding click events to buttons
- More Event listeners Part 1
- More Event listeners Part 2
- Objects oriented programming with JavaScript - part 1
- Objects oriented programming with JavaScript - part 2
- Objects oriented programming with JavaScript - part 3
-
JavaScript code for the app - Making the app work
- Creating and linking the scripts
- Creating the question bank in the form of objects
- Step by step algorithm for the JavaScript code of the app
- Create and initialize the variables
- Retrieve the necessary HTML elements to manipulate them later
- Initialize more variables
- Function that sets the random question and options in the app
- Function that updates the progress bar with each question
- Function that changes the option buttons to their default color
- Get question function - consolidates and calls the mini functions
- Functions to change tracker colors, calculate final score & set result page
- Generate a unique random number to call a random question/answer set
- Generate a unique random number to call a random question/answer set - part 2
- Make the timer work - part 1
- Make the timer work - part 2
- Make the timer work - part 3
- Make the option selection work
- Make the next question button work - check and load next question
- Consolidate everything and make the app work on refresh
- Check the output and correct bugs
The author has made this course as easy to understand as possible. She has structured it in such a way that each section will handle one of the 3 languages covered here.
Introduction: This is where I'll explain how the app works, it's various features and what we'll be using to achieve the same results.
Module 1: We'll be teaching you how to create the bare bones of the app with HTML5. The result will be a page with all the elements we need in our app, devoid any colors or design elements.
Module 2: Here, we'll "beautify" our app. We'll be using CSS elements to give our app colors and styles. At the end of this module, we'll have a Quiz App app that'll look like the final result, albeit one that does not work yet. We'll cover that in the Javascript module.
Module 3: We'll be covering some basic concepts of Javascript in this module. We'll also be adding lectures on object oriented programming with Javascript (creating and using objects with Javascript). We'll only cover concepts that we'll need for our app's Javascript code though. If you already know the basics, you can skip this module.
Module 4: This would be the meat of the course. We'll be delving into Javascript & Object-oriented programming code of our app in this module, and We'll teach you how to make the app work (make the quiz, the tracker, the randomized question feature and the timer work) in here.
Final section: Finally, We'll give you some ideas on how to improve/enhance the app further and make it your own in terms of design and functionalities.
All the code files are placed at https://github.com/PacktPublishing/Object-oriented-programming-with-JavaScript---Build-Quiz-App
Style and Approach
In this course, you'll learn how to build your Randomized Dynamic Quiz App with Timer & Answer Trackers from the ground up with just HTML5, Javascript and CSS3 and Object Oriented programming concepts in just a couple of hours.
- Publication date:
- February 2019
- Publisher
- Packt
- Duration
- 8 hours 9 minutes
- ISBN
- 9781838645328