Learn Javascript Web App Development -Build A Calculator App [Video]

Preview Online

Code Files

Learn Javascript Web App Development -Build A Calculator App [Video]

Aarthi Elumalai

Tuesday, February 26, 2019

Javascript for Front-End Web Development - Build Your Own Calculator App Using Javascript, HTML5 & CSS in an hour

Quick links: > Table of contents > What will you learn? > Preview

Packt Subscription

FREE

€9.36/m after trial

Video

€24.39

RRP €48.77

Save 49%

What do I get with a Packt subscription?

Exclusive monthly discount - no contract
Unlimited access to entire Packt library of 6500+ eBooks and Videos
120 new titles added every month, on new and emerging tech

What do I get with an eBook?

Download this book in EPUB, PDF, MOBI formats
DRM FREE - read and interact with your content when you want, where you want, and how you want
Access this title in the subscription reader

What do I get with Print & eBook?

Get a paperback copy of the book delivered to you
Download this book in EPUB, PDF, MOBI formats
DRM FREE - read and interact with your content when you want, where you want, and how you want
Access this title in the subscription reader

What do I get with a Video?

Download this Video course in MP4 format
DRM FREE - read and interact with your content when you want, where you want, and how you want
Access this title in the subscription reader

€0.00

€24.39

€9.36 p/m after trial

RRP €48.77

Subscription

Video

Start a FREE 10-day trial

Frequently bought together

Learn Javascript Web App Development -Build A Calculator App [Video]

€ 48.77

€ 24.39

Learn Javascript Web App Development -Build A Calculator App [Video]

Feb 2019

3 hours 54 minutes

€ 24.39

Learn Javascript and HTML5 Canvas - Build a Paint App for Drawing [Video]

€ 105.89

€ 52.95

Learn Javascript and HTML5 Canvas - Build a Paint App for Drawing [Video]

Mar 2019

6 hours 3 minutes

€ 52.95

Buy 2 for €77.34
Save €64.98

Add to Cart

Video Details

ISBN 13 9781838641429

Course Length 3 hours 54 minutes

Introduction

HTML building blocks

The header section

HTML blocks for the calculator

Styling the calculator app - achieving the final look

Styling the app - part 1

Styling the app - part 2

[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

Making the app work with Javascript

Separating the Javascript

Separating the Javascript - part 2

Some design enhancements for the app

Close the input box to external inputs

Design enhancements - add shadows, change backgrounds

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

Video Description

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.

Video Preview

What You Will Learn

Create a working calculator web app
Improve your web app development & Javascript skills
Improve your logical problem-solving skills
Improve your front-end design and development skills

Authors

Aarthi Elumalai

Aarthi Elumalai - Entrepreneur and programmer with 8 & 10 yrs experience resp.

She has been making money online for over 6 years now, right from when she finished high school. She kept equipping her knowledge and trying out new methods throughout college, so when she finished her studies, she can work for herself and someone else. She is proud that she has accomplished that goal. Her businesses involve affiliate marketing, services, list building, Kindle etc. She believes in keeping her eggs in various baskets, and she only preaches what she practices & believes. She recently decided to document her methods and knowledge in the form of helpful information products. She believes in being as thorough as possible, and that's what you'll find in her courses. She will cover every aspect of a business or method so her students are equipped with the complete knowledge they need to start their business and run it successfully.

Introduction

HTML building blocks

The header section

HTML blocks for the calculator

Styling the calculator app - achieving the final look

Styling the app - part 1

Styling the app - part 2

[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