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

Javascript for Front-End Web Development - Build Your Own Calculator App Using Javascript, HTML5 & CSS in an hourAbout This VideoLearn to create a working calculator web app using Javascript, HTML5, & CSSLearn and Improve your web app development & Javascript skillsIn DetailIn 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 JavascriptBy 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

1. Chapter 1 : Introduction
   • Introduction 00:04:00
2. Chapter 2 : HTML building blocks
   • The header section 00:08:10
   • HTML blocks for the calculator 00:07:24
3. Chapter 3 : Styling the calculator app - achieving the final look
   • Styling the app - part 1 00:14:16
   • Styling the app - Part 2 00:08:54
4. Chapter 4 : [OPTIONAL] Javascript 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:42
   • 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
5. Chapter 5 : Adding logic with Javascript - The easy way
   • Making the app work with Javascript 00:08:23
   • Separating the Javascript 00:10:07
   • Separating the Javascript - part 2 00:07:48
6. Chapter 6 : Some design enhancements for the app
   • the input box to external inputs 00:05:24
   • Design enhancements - add shadows, change backgrounds 00:11:49
7. Chapter 7 : Adding logic with Javascript - The professional way
   • Making changes in the HTML code and the window onload function 00:06:05
   • Retrieve the necessary elements using DOM functions 00:08:03
   • Create the button click event for the calculator buttons 00:05:39
   • Create the button click function 00:07:35
   • Create the function that lets you enter information into the display box 00:07:02
   • Create the function that does your calculator's calculations 00:05:05
   • Create the function that does your calculator's calculations Part 2 00:03:28
   • Create the function that erases your display & finish coding the calculator 00:04:08