Learn Javascript Web App Development -Build A Calculator App [Video]
-
Free ChapterIntroduction
-
HTML building blocks
-
Styling the calculator app - achieving the final look
-
[OPTIONAL] Javascript 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
-
Adding logic with Javascript - The easy way
-
Some design enhancements for the app
-
Adding logic with Javascript - The professional way
- Making changes in the HTML code and the window onload function
- Retrieve the necessary elements using DOM functions
- Create the button click event for the calculator buttons
- Create the button click function
- Create the function that lets you enter information into the display box
- Create the function that does your calculator's calculations
- Create the function that does your calculator's calculations Part 2
- Create the function that erases your display & finish coding the calculator
In this course, you'll learn how to build your own calculator web app from the ground up with just HTML5, CSS, and Javascript in less than an hour.
You'll learn:
How to create the HTML5 structures of an app.
How to make an app pretty with CSS (design, design, design!)
How to make an app work (solve problems) with logic, i.e Javascript
By the end of the course, you'll be one stop closer to creating web apps like a pro. You could even try creating other smaller web apps.
The course is structured in such a way that each section will handle one of the 3 languages covered here.
Introduction: This is where we explain how the app works, and what we'll be using to achieve the same results.
Module 1: This Module shows 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 calculator app that looks like the final result, albeit one that does not perform any calculations yet.
Module 3: This would be the meat of the course. We'll be delving into Javascript in this module, and I'll teach you
how to make the app work (perform calculations and display the results) in here.
Final section: Finally, we will give you some ideas on how to improve the app and make it your own in terms of design and functionalities.
All the codes and supporting files for this course are available at: https://github.com/PacktPublishing/Learn-Javascript-Web-App-Development--Build-A-Calculator-App
Style and Approach
This course has been structured in such a way that each section will handle one of the 3 languages ie, JavaScript, HTML5 & CSS. This is very interactive and fun with a ton of practical elements.
- Publication date:
- February 2019
- Publisher
- Packt
- Duration
- 3 hours 54 minutes
- ISBN
- 9781838641429