by Aarthi Elumalai | Publisher: Packt Publishing | Release Date: February 2019 | ISBN: 9781838645328

Build a Randomized Quiz App with Timer - Front End Web App Development - Hands-on training - Build app from scratchAbout This VideoYou'll LearnHow to create the HTML5 structures of this app.How to make the app pretty with CSS (design, design, design!)How to make the app work (draw on the canvas) with logic and algorithm, i.e JavascriptBasic concepts of Javascript and Object-oriented programming (concepts related to this project).How object-oriented programming works in building real-world applicationsIn DetailThe 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

1. Chapter 1 : Introduction
   • Introduction 00:03:34
2. Chapter 2 : HTML5 Building Blocks of the App
   • Setting up the HTML page skeleton and title 00:05:35
   • Setting up the Meta information for the app 00:04:39
   • Create the app's header 00:07:31
   • HTML code for the quiz's trackers 00:06:12
   • Set up the quiz section - Question, Option buttons & Next question button 00:13:01
   • Footer for the app - Progress bar and Timer 00:07:45
3. Chapter 3 : Styling the Quiz app - achieving the final look
   • Setting up and linking the CSS stylesheet 00:04:59
   • Basics of CSS selectors and properties 00:07:30
   • Default styling options for the app 00:10:47
   • Background colors, and more on applying colors in CSS 00:03:42
   • Design the quiz box 00:09:54
   • Design the quiz box - part 2 00:10:54
   • Design the header of the app 00:06:26
   • Give the base design for the trackers 00:11:32
   • Design the question and options area - part 1 00:09:03
   • Design the question and options area - part 2 00:04:11
   • Design the Next Question button 00:13:35
   • Design the footer - progress area and timer 00:09:26
   • Design the result area - score and retake button 00:10:43
4. Chapter 4 : [OPTIONAL] JavaScript & OOPs Basic Concepts (related to this project)
   • Connecting HTML and script/JS files 00:06:04
   • An introduction to variables and assigning values 00:09:59
   • Mathematical operators and alerts 00:09:52
   • Conditional statements - if else statement 00:06:13
   • Conditional statements - Switch case 00:07:12
   • Loops - For loop 00:06:31
   • Arrays - 1 dimensional arrays 00:06:37
   • Arrays - 2 dimensional arrays 00:05:08
   • An introduction to functions (function definition and calls) 00:10:41
   • Intro to DOM - getElementById and InnerText 00:10:48
   • Intro to DOM - adding click events to buttons 00:09:06
   • More Event listeners Part 1 00:08:12
   • More Event listeners Part 2 00:04:39
   • Objects oriented programming with JavaScript - part 1 00:09:58
   • Objects oriented programming with JavaScript - part 2 00:05:07
   • Objects oriented programming with JavaScript - part 3 00:05:07
5. Chapter 5 : JavaScript code for the app - Making the app work
   • Creating and linking the scripts 00:06:02
   • Creating the question bank in the form of objects 00:12:05
   • Step by step algorithm for the JavaScript code of the app 00:08:58
   • Create and initialize the variables 00:10:05
   • Retrieve the necessary HTML elements to manipulate them later 00:10:18
   • Initialize more variables 00:05:51
   • Function that sets the random question and options in the app 00:12:21
   • Function that updates the progress bar with each question 00:09:10
   • Function that changes the option buttons to their default color 00:04:39
   • Get question function - consolidates and calls the mini functions 00:12:01
   • Functions to change tracker colors, calculate final score & set result page 00:14:44
   • Generate a unique random number to call a random question/answer set 00:10:52
   • Generate a unique random number to call a random question/answer set - part 2 00:07:53
   • Make the timer work - part 1 00:12:27
   • Make the timer work - part 2 00:11:18
   • Make the timer work - part 3 00:12:54
   • Make the option selection work 00:14:51
   • Make the next question button work - check and load next question 00:13:48
   • Consolidate everything and make the app work on refresh 00:08:19
   • Check the output and correct bugs 00:08:43