Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Life Purpose Meditation Personal Transformation Neuroscience Emotional Intelligence
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development Web App Development

Learn Javascript Web App Development -Build A Calculator App

Javascript for Front End Web Development - Build Your Own Calculator App Using Javascript, HTML5 & CSS in an hour
Rating: 4.7 out of 54.7 (101 ratings)
4,293 students
Created by DigiFisk (Programming is fun)
Last updated 8/2020
English
English [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • Create a working calculator web app by learning HTML5, CSS3 & Javascript
  • Improve your web app development & javascript skills
  • Improve your logical problem solving skills
  • Build your front end web design and development skills

Course content

8 sections • 35 lectures • 3h 56m total length

  • Preview04:00

  • Preview08:10
  • Section 2 Quiz part 1
    4 questions
  • HTML blocks for the calculator
    07:24
  • Section 2 Quiz part 2
    2 questions

  • Styling the app - part 1
    14:16
  • Styling the app - Part 2
    08:54
  • Section 3 Quiz
    10 questions

  • Preview06:04
  • Preview09:59
  • Mathematical operators and alerts
    09:52
  • Conditional statements - if else statement
    06:13
  • Conditional statements - Switch case
    07:12
  • Loops - For loop
    06:31
  • Arrays - 1 dimensional arrays
    06:37
  • Arrays - 2 dimensional arrays
    05:08
  • An introduction to functions (function definition and calls)
    10:42
  • Intro to DOM - getElementById and InnerText
    10:48
  • Intro to DOM - adding click events to buttons
    09:06
  • More Event listeners Part 1
    08:12
  • More Event listeners Part 2
    04:39

  • Making the app work with Javascript
    08:23
  • Separating the Javascript
    10:07
  • Separating the Javascript - part 2
    07:48
  • The calculator app - code
    00:09
  • Section 3 Quiz
    10 questions

  • Close the input box to external inputs
    05:24
  • Design enhancements - add shadows, change backgrounds
    11:49

  • Making changes in the HTML code and the window onload function
    06:05
  • Retrieve the necessary elements using DOM functions
    08:03
  • Create the button click event for the calculator buttons
    05:39
  • Create the button click function
    07:35
  • Create the function that lets you enter information into the display box
    07:02
  • Create the function that does your calculator's calculations
    05:05
  • Create the function that does your calculator's calculations Part 2
    03:28
  • Create the function that erases your display & finish coding the calculator
    04:14
  • Calculator app - professional code
    00:09

  • Feature ideas to try out
    00:56
  • Conclusion & Bonus - Continue your journey
    00:42

Requirements

  • Just a computer. I'll teach you everything you need to know to create the app

Description

Practice makes perfect. Start your journey into becoming a professional front end web developer here!

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 Web application 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. 

What will you learn in this course? 

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:

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

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

and last but never the least 

3. 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. 

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, and what we'll be using to achieve the same results. 

Module 1: I'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 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, I'll give you some ideas on how to improve the app 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 have the passion for programming, and if you know the basics of at least HTML5 and CSS, this course will take you one step further in your development skills. 

3. If you're a complete newbie, don't worry. I'll be explaining every single line of code I'll be using in this course, so you won't feel lost. 

So, what are you waiting for? Get this course today, and begin your journey into the wonderful world of web development!


Who this course is for:

  • This course is for people who want to learn web development the fun way
  • This course is also for people who've learned the basics and want to move on to practical programming

Instructor

DigiFisk (Programming is fun)
Hands-on practical training | Programming courses
DigiFisk (Programming is fun)
  • 4.4 Instructor Rating
  • 1,422 Reviews
  • 75,110 Students
  • 18 Courses

Welcome to DigiFisk! 


I am Aarthi Elumalai, the founder of DigiFisk.


Here at DigiFisk, we aim to make programming fun and interactive for students.


If you're tired of boring theoretical classes, then you've come to the right place.


We start off with basics/beginner courses in a particular programming language or field, and continue on with a number of real-world project-based classes to equip you to thrive in the real world.


Our lectures tend to be very detailed. We leave nothing out, so beginners and advanced programmers alike can learn something from each of our courses.


Enjoy your journey into the fascinating world of programming with DigiFisk! We'll see you inside. :)

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.