Object oriented programming with Javascript

Practice makes perfect.

Start your journey into becoming a professional front end web developer here.

Learn how to create a real world Object Oriented programming based Dynamic Quiz app with Timer.

At DigiFisk, we like making learning fun. Our courses are interactive and fun with a ton of practical elements to it. We've decided to take it a step further with our Front end Web app development practice series.

Once you learn the syntax of a programming language, the next logical step is to start creating software and apps. But that's where most students get stuck. Problem solving isn't as easy as learning a bunch of syntaxes.

But we aim to make it easy for you. We also aim to teach you intermediate programming topics like object oriented programming while at it.

What will you learn in this course?

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 CSSS and Object Oriented programming concepts in just a couple of hours.

You'll learn:

1. How to create the HTML5 structures of this app.

2. How to make the app pretty with CSS (design, design, design. )

3. How to make the app work (draw on the canvas) with logic and algorithm, i.e Javascript

4. Basic concepts of Javascript and Object oriented programming (concepts related to this project).

5. How object oriented programming works in building real world applications

6. How to build a completely dynamic real world quiz app with Javascript, HTML5 and CSS3 with a randomized question pulling feature.

7. How to build a fully featured timer for your quiz app.

8. How to build a colored answer tracker for your quiz.

9. Logical problem solving skills

By the end of the course, you'll be one step closer to creating front end web apps like a pro. You could even try creating other web apps and games from the concepts you learn in this course.

How is this course designed?

I've made this course as easy to understand as possible. I've 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.

This course is for you if:

1. If you like learning by doing rather than hours of boring theoretical lectures.

2. If you're a complete newbie to the world of web development, or just programming in general, and would like to start creating software with the help of a beginner-friendly course. You'll learn the basics of everything used in this project ( I'll be explaining every single line of code I'll be using in this course, so you won't feel lost.

3. If you have the passion for programming, and if you know the basics of HTML5 and CSS3, but you're stuck on the practical aspects of it. Turn your theoretical knowledge into practical knowledge with our course.

4. Do you want to get into real world programming and object oriented programming? This course will take you a couple steps further in the right direction.

5. If you want to delve into the exciting world of front end web app development, this course will take you a couple steps further in the right direction.

6. If you're a Javascript web developer who just wants to try out a new project. Our course welcomes coders of every level, from absolute beginners, to pros.

7. If you know the theoretical concepts of Javascript but would like to learn how to apply your knowledge in the real world.

8. If you want to add a real-world project to your resume - to get a promotion or find a new job

9. If you want to pad your portfolio with a cool project to bag more freelance web development projects.

So, what are you waiting for? Get this course today, and begin your journey into the wonderful world of front end web app development and object oriented programming.

What's inside

Learning objectives

Understand the basics of html5 & css (i'll explain the concepts as we code the project)
Understand the basics of javascript (we have separate modules for this topics)
Understand how object oriented programming works in building real world applicationss
Build a completely dynamic real world quiz app with javascript, html5 and css3 with a randomized question pulling feature
Build a fully featured timer for your quiz
Build a colored answer tracker for your quiz
Know how front end web app development works by building this project
Improve your logical problem solving skills

Create step by step algorithms for projects before turning them into codes
Improve your front end design and development skills
Create html5 skeletons of web applications
Design web applications with various css styling concepts
Make web applications work with javascript concepts
Get a foundation in object oriented programming concepts with javascript
Show more
Show less

Understand the basics of html5 & css (i'll explain the concepts as we code the project)
Understand the basics of javascript (we have separate modules for this topics)
Understand how object oriented programming works in building real world applicationss
Build a completely dynamic real world quiz app with javascript, html5 and css3 with a randomized question pulling feature
Build a fully featured timer for your quiz
Build a colored answer tracker for your quiz
Know how front end web app development works by building this project
Improve your logical problem solving skills
Create step by step algorithms for projects before turning them into codes
Improve your front end design and development skills
Create html5 skeletons of web applications
Design web applications with various css styling concepts
Make web applications work with javascript concepts
Get a foundation in object oriented programming concepts with javascript
Show more
Show less

Syllabus

Create the app's header

Introduction

Let's create the skeleton of the app with various HTML elements like heading, questions section, results section, timer, trackers and progress bar

Setting up the HTML page skeleton and title

Setting up the Meta information for the app

HTML code for the quiz's trackers

Set up the quiz section - Question, Option buttons & Next question button

Footer for the app - Progress bar and Timer

HTML code for the app

Let's use various css styling concepts to style every single HTML element we created in the earlier section.

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

CSS code for the app

Let's learn a couple of important and relevant Javascript and OOPS basic concepts in this module. I'll only be covering concepts related to or needed in our Quiz app 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

Let's write the relevant Javascript and Object oriented programming codes for our app, to make it work. That is, let's add logic to our app in this section.

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

Javascript code for the app

Complete code (downloadable) for the Quiz app

Congrats on finishing the course! Some extra information

New features that you can try to create for this game

Conclusion & Bonus - Continue your journey!!

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Focuses on building a dynamic quiz application, which provides hands-on experience in front-end development

Covers object-oriented programming concepts within the context of JavaScript, which is valuable for building interactive web applications

Teaches how to create a timer and answer tracker, which are common features in web-based quizzes and assessments

Requires learners to have a basic understanding of HTML5 and CSS3, which may exclude absolute beginners without prior web development experience

Emphasizes practical application and problem-solving, which is essential for transitioning from theoretical knowledge to real-world development

Uses HTML5, CSS3, and JavaScript, which are standard technologies for front-end web development and widely supported by modern browsers

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Object oriented programming with Javascript - Build Quiz App with these activities:

Review Basic JavaScript Concepts

Show steps

Reinforce your understanding of fundamental JavaScript concepts like variables, data types, operators, and control flow to prepare for the object-oriented programming aspects of the course.

Show steps

Review online JavaScript tutorials and documentation.
Complete practice exercises on websites like Codecademy or freeCodeCamp.
Write simple JavaScript programs to test your understanding.

Practice HTML and CSS Fundamentals

Show steps

Strengthen your HTML and CSS skills to ensure you can effectively structure and style the quiz app's user interface.

Browse courses on HTML

Show steps

Review HTML elements and CSS selectors.
Recreate simple web page layouts using HTML and CSS.
Practice styling elements with different CSS properties.

Review 'Eloquent JavaScript'

Show steps

Deepen your understanding of JavaScript and object-oriented programming principles by studying 'Eloquent JavaScript'.

View Eloquent JavaScript, 4th Edition on Amazon

Show steps

Read the chapters on JavaScript syntax, data structures, and functions.
Study the sections on object-oriented programming and DOM manipulation.
Complete the exercises at the end of each chapter.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Build a Simple Calculator App

Show steps

Apply your HTML, CSS, and JavaScript skills by building a calculator app, reinforcing your understanding of event handling, DOM manipulation, and basic arithmetic operations.

Show steps

Design the calculator's user interface with HTML and CSS.
Implement the calculator's functionality with JavaScript.
Test the calculator thoroughly to ensure it works correctly.

Pair Programming Session

Show steps

Collaborate with a peer to review code, debug issues, and share insights on object-oriented programming concepts.

Show steps

Find a classmate or fellow student to pair with.
Choose a specific topic or challenge related to the course.
Work together to solve the problem, taking turns coding and reviewing.

Create a Quiz App Feature Enhancement

Show steps

Extend the functionality of the quiz app by adding a new feature, such as user authentication, score tracking, or question categories, to deepen your understanding of object-oriented programming and web development principles.

Show steps

Choose a feature to add to the quiz app.
Design the user interface and implement the functionality with HTML, CSS, and JavaScript.
Test the new feature thoroughly to ensure it works correctly.
Document the changes you made to the app.

Study 'JavaScript: The Good Parts'

Show steps

Improve your JavaScript coding style and understanding of best practices by studying 'JavaScript: The Good Parts'.

View A Million And One Random Digits on Amazon

Show steps

Read the chapters on functions, objects, and inheritance.
Study the sections on coding style and best practices.
Apply the principles learned to your quiz app project.

Career center

Learners who complete Object oriented programming with Javascript - Build Quiz App will develop knowledge and skills that may be useful to these careers:

Front-End Developer

A front end developer creates the user-facing elements of websites and applications. This course helps build a foundation in the core technologies of front end development: HTML, CSS, and Javascript. In particular, this course focuses on building a dynamic quiz application, an excellent hands-on way to understand how these technologies work together. The course's emphasis on object oriented programming with Javascript will give any front end developer a strong foundation for software design and architecture. This course is designed in such a way that students will create algorithms, design with CSS, and use Javascript to manipulate the front end. Front end developers should take this course to improve practical problem solving and coding skills.

See salaries and explore the career path for Front-End Developer

Web Developer

A web developer is responsible for building and maintaining websites and web applications. This course provides a hands-on introduction to web development through the creation of a dynamic quiz app using HTML, CSS and Javascript. It also teaches object oriented programming concepts in Javascript. This course may be useful for an aspiring web developer because it demonstrates a practical approach to using these technologies to build an interactive web experience. The course also emphasizes logical problem solving, which is critical for any web developer. By working step by step on building a fully functional application, this course demonstrates how to apply theoretical knowledge to practical situations.

See salaries and explore the career path for Web Developer

JavaScript Developer

A Javascript developer specializes in using the Javascript programming language to build interactive and dynamic elements for websites and applications. This course specifically focuses on building a dynamic quiz application using Javascript, alongside HTML and CSS. It teaches practical skills like object oriented programming that are essential for Javascript developers. Through this project, one can learn how Javascript is used to implement logic and functionality in a real-world setting. For Javascript developers who want a project to show their skills, or to sharpen particular skills, this course is suitable.

See salaries and explore the career path for JavaScript Developer

User Interface Developer

A user interface developer focuses on the design and implementation of the user interface of an application. This course, where learners build a dynamic quiz app, provides a practical way to learn the skills needed for this role. It integrates HTML for structuring the interface, CSS for styling the visual appearance, and Javascript to add interactivity. A user interface developer would benefit from the project based approach as it focuses on real world application development. This course is useful as it puts into practice the foundational skills UI developers need for success.

See salaries and explore the career path for User Interface Developer

Software Engineer

A software engineer designs, develops, and maintains software applications. This course offers a focused approach to software development by guiding the learner through building a quiz application with HTML, CSS, and Javascript. The course emphasizes object oriented programming, a key concept for any software engineer. This hands-on approach to creating a fully functional application provides software engineers with the practical skills they need. While this project is focused on the front end, the fundamental programming concepts and problem solving skills taught in the course could be valuable.

See salaries and explore the career path for Software Engineer

Application Developer

An application developer is involved in designing, coding, and testing applications for various platforms. This course helps learners build a complete application from start to finish, applying technologies such as HTML, CSS, and Javascript. This course uses object oriented programming, which helps understand more complex systems. The hands on approach of building a dynamic quiz app mirrors real world application development, making it a useful reference point for anyone wishing to become an application developer. This course may be useful for aspiring app developers as it provides practical experience in developing a fully functional app.

See salaries and explore the career path for Application Developer

Game Developer

A game developer creates video games, which often requires a blend of programming, design, and creative skills. The course involves building a dynamic quiz application with a timer and answer tracker. This provides a practical introduction to game development concepts, like user interfaces, basic game logic, and dynamic content updates using Javascript alongside HTML and CSS. This course is helpful as it focuses on object oriented programming, a key concept in game development. The project-based structure provides insight into real world game development.

See salaries and explore the career path for Game Developer

Technology Consultant

A technology consultant advises clients on the best use of technology to meet their business goals. While this course focuses on the practical aspects of web development using HTML, CSS, and Javascript, it helps with logical problem solving. This course may be helpful because those skills are useful to a technology consultant. Furthermore, this course's project based learning emphasizes practical experience.

See salaries and explore the career path for Technology Consultant

Digital Designer

A digital designer uses computer-aided design to create visual content for various digital platforms. This course focuses on the hands-on creation of a quiz application, providing digital designers with valuable foundational knowledge of web technologies such as HTML, CSS, and especially Javascript. With the design elements of front end web development using HTML and CSS, this course may be useful for digital designers.

See salaries and explore the career path for Digital Designer

Technical Project Manager

A technical project manager oversees technical projects, ensuring they are completed on time, within budget and with good quality. Although this course focuses on the details of front end web development, it provides broad insight into the process of building an interactive app. This may be useful to a technical project manager, as they will gain knowledge about the steps of a web project. The course’s emphasis on problem solving and logical thinking can be beneficial.

See salaries and explore the career path for Technical Project Manager

Instructional Designer

An instructional designer develops educational materials and courses. While this course does not explicitly focus on instructional design, it does demonstrate how to build an interactive educational tool, i.e. a quiz app. The skills in HTML, CSS, and Javascript, especially the focus on logical structuring and problem solving, may be useful for an instructional designer. The project based, step by step approach to development may be useful in understanding how to develop interactive educational software.

See salaries and explore the career path for Instructional Designer

Data Analyst

A data analyst collects, processes, and performs statistical analysis on data. While this course is primarily focused on front end web development with HTML, CSS, and Javascript, data analysts may benefit from the course. The logic and algorithmic problem solving skills taught within the course may also be useful. Although the core focus of the course is not data analysis, the problem-solving and logical thinking skills that it promotes are transferable skills.

See salaries and explore the career path for Data Analyst

Technical Writer

A technical writer creates documentation for technical products and services. This course focuses on the practical application of web technologies, which may provide context and insight for technical documentation. This course teaches object oriented programming and logical thinking, which may be useful to technical writers. By understanding the step-by-step process of building a web application, the technical writer may be able to better document the development process.

See salaries and explore the career path for Technical Writer

Quality Assurance Analyst

A quality assurance analyst tests software to identify defects and ensure it meets quality standards. This course focuses on building a dynamic quiz app from the ground up, utilizing HTML, CSS, and Javascript, which may be useful for a quality assurance analyst. The process of building and debugging the app may also help the quality assurance analyst understand the development life cycle. This course may be useful by demonstrating principles of web programming.

See salaries and explore the career path for Quality Assurance Analyst

Curriculum Developer

A curriculum developer designs and creates educational content and programs. While this course primarily focuses on learning web development with HTML, CSS, and Javascript, it may be useful for those interested in curriculum development. By learning how to structure a quiz, and how to implement it using programming, a practical insight may be gained into how to create interactive educational content. The course's step-by-step approach to creating an app may be useful in creating curricula.

See salaries and explore the career path for Curriculum Developer

Object oriented programming with Javascript - Build Quiz App

What's inside

Learning objectives

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses