Overview What You Will Learn Curriculum Instructor

Course Overview

Object-Oriented Programming (OOP) is a fundamental concept in modern JavaScript development, allowing developers to create scalable, modular, and maintainable applications. Understanding OOP principles in JavaScript is essential for building interactive web applications, including dynamic quizzes that enhance user engagement. This course introduces OOP in JavaScript while guiding learners through the development of a fully functional quiz app, reinforcing key programming concepts through hands-on application.

This course begins with the foundational structure of the quiz app, covering HTML5 elements required to build the interface, including headers, trackers, question sections, and progress indicators. It then explores CSS techniques for styling the app, ensuring a polished user experience. The JavaScript section introduces core programming concepts such as variables, loops, conditional statements, event listeners, and DOM manipulation. The course then delves into OOP principles, demonstrating how to structure the app using objects and methods. Finally, students will implement the app’s logic, incorporating random question selection, a timer, score tracking, and dynamic updates to make the quiz fully functional.

By the end of this course, learners will have a solid understanding of JavaScript OOP principles and how to apply them in real-world projects. They will gain hands-on experience in building a structured, interactive quiz app from scratch.

What You Will Learn

  • How 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., JavaScript
  • Basic concepts of JavaScript and Object-oriented programming (concepts related to this project)
  • How object-oriented programming works in building real world applications
  • How to build a completely dynamic real world quiz app with JavaScript, HTML5 and CSS3 with a randomized question pulling feature
  • How to build a fully featured timer for your quiz app
  • How to build a colored answer tracker for your quiz
  • Logical problem-solving skills

Program Curriculum

  • Setting up the HTML Page Skeleton and Title
  • Setting up the Meta Information for the App
  • Create the App's Header
  • HTML Code for the Quiz's Trackers
  • Set up the Quiz Section - Question, Option Buttons, and Next Question Button
  • Footer for the App - Progress Bar and Timer
  • $7 Million Cybersecurity Scholarship by EC-Council
  • Chapter 1 Quiz

  • 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 – Part 1
  • 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
  • Chapter 2 Quiz

  • 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
  • For Loops
  • 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
  • Chapter 3 Quiz

  • 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 and Set Result Page
  • Generate a Unique Random Number to Call a Random Question/Answer Set – Part 1
  • 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
  • Chapter 4 Quiz
Load more modules

Instructor

Aarthi Elumalai

Aarthi Elumalai is a programmer, educator, entrepreneur, and innovator. She holds a Bachelor of Engineering degree in Computer Science from Anna University, Chennai. Since then, she has managed a team of programmers and worked with hundreds of clients. She has also launched a dozen web apps, plugins, and software products that are being used by thousands of customers online. With over 15 years of experience in programming, Aarthi started coding in BASIC at the age of 12, but her love for programming took root when she came across C programming at the age of 15. Her courses are well received by the masses, and she has a student base of over 100,000 students from all over the world. Her courses and books always include hands-on training in creating real-world projects using the knowledge learned, helping her students become better equipped for the real world.

Join over 1 Million professionals from the most renowned Companies in the world!

certificate

Choose the Pro Plan That Fits Your Learning Journey

Invest in your future with flexible Pro subscription plans. Whether you're starting your cybersecurity journey or expanding your expertise, choose the membership duration that works for you and gain access to our complete learning platform.

Monthly Plans
Annual Plans
Save 20% with our annual plans!

Pro

Ideal for continuous learning, offering extensive resources with 900+ courses and diverse Learning Paths to enhance your skills.

$ 599.00
Billed annually or $69.00 billed monthly
Get Started Now
Start your 7-day trial for $1

What is included

  • Access to 900+ Premium Short Courses
  • 70+ Structured Learning Paths
  • Validation of Completion with All Courses and Learning Paths
  • New Courses Added Every Month
Early Access Offer

Pro +

Experience immersive learning with Practice Labs and CTF Challenges for comprehensive skill-building.

$ 699.00
Billed annually or $79.00 billed monthly
Get Started Now
Start your 7-day trial for $1

Everything in Pro and

  • 500+ Practice Labs with Guided Instructions
  • 400+ CTF Challenges with Detailed Walkthroughs
  • New Practice Labs and Challenges Added Every Month

Related Courses

  • Bootstrap 4 Quick Website Bootstrap Components Course
    Short Course

    Bootstrap 4 Quick Website Bootstrap Components Course

    Software Development

    Explore the basics of Bootstrap and learn to create a website...

    $49.99

    Beginner

    1 hr 30 m

  • CCNA - Understanding Routers and Switches
    Short Course

    CCNA - Understanding Routers and Switches

    Security Architecture and Operations

    A comprehensive guide to understanding the in-depth functioni...

    $49.99

    Intermediate

    2 hr 0 m

  • The Complete Full-Stack JavaScript Course
    Short Course

    The Complete Full-Stack JavaScript Course

    Software Development

    Learn full-stack web development using JavaScript (ReactJS, N...

    $79.99

    Beginner

    24 hr 17 m

  • React.JS for Ecommerce: Building a Store with React.JS
    Short Course

    React.JS for Ecommerce: Building a Store with React.JS

    DevSecOps

    From React.js Fundamentals to Crafting an Online Storefront

    $49.99

    Advanced

    3 hr 30 m

  • CISSP Certification Domains 5, 6, 7, and 8 Video Training
    Short Course

    CISSP Certification Domains 5, 6, 7, and 8 Video Training

    Cybersecurity

    This course is ideal for individuals who desire to pass the I...

    $69.99

    Intermediate

    6 hr 30 m

  • Helm 3 - Package Manager for Kubernetes
    Short Course

    Helm 3 - Package Manager for Kubernetes

    Software Development

    A must tool for every DevOps engineer

    $49.99

    Intermediate

    1 hr 27 m

  • Learn Ethical Hacking by Hacking Real Websites Legally
    Short Course

    Learn Ethical Hacking by Hacking Real Websites Legally

    Vulnerability Assessment and Pentesting

    Fun way to learn ethical hacking by playing online hacking ga...

    $69.99

    Beginner

    4 hr 18 m

  • Mastering Ansible Playbooks: Debugging and Security
    Short Course

    Mastering Ansible Playbooks: Debugging and Security

    Software Development

    Securing and Automating Linux and Windows Systems with Advanc...

    $99.99

    Advanced

    5 hr 34 m

1 50
View all