US $19.97

Create a hand made calculator with HTML, CSS and JavaScript

——   Created by Kalob Taulien

Create a cool JavaScript calculator

Share this course:

1h 01m
Lesson time
Skill level

More about this course

In this course you will create a calculator you can use on a web page. It will look and act like a proper calculator.

We'll be using basic HTML, CSS and JavaScript — but don't worry, this is still a beginner friendly course! I'll walk you through the HTML, CSS and JavaScript if you aren't already familiar with those technologies (they are REALLY easy in this course!)

You'll be able to click on any of the buttons, and they'll move in and change the numbers at the top. And we'll deal with strange math logic like dividing by zero.

The course project

You will create a fully functional calculator that can be used on a website. We won't use any pre-existing HTML, CSS or JavaScript — instead we'll write it all by hand (it's good practice, and not very much work).

You can even use this in your web design and web development portfolio!

Let's get started right away!

12 Lessons

2 mins
Course introduction
free preview
4 mins
Setting up the project
free preview
4 mins
Stubbing out the html
8 mins
Styling the page
11 mins
Styling the buttons
3 mins
Your signature
2 mins
Custom font
8 mins
Button movements
6 mins
Button actions
9 mins
Operational calculator
3 mins
Finished calculator
5 mins
Code cleanup


100% of 1 people enjoyed this course!

Steve Mcdougson liked this class and said...

This course was a lot. To be more specific, it was very fleshed out and covered a LOT of topics. My only gripe is that I wish it had gone into more specific examples. Great course.

About the instructor

Kalob Taulien
Kalob Taulien
  • 160 students
  • 41 reviews
  • 38 courses

Hi everybody! I'm Kalob Taulien.

Here's the TL;DR (short) version about me:

  • I have been coding since 1999 and teaching people how to code since …
Read more
This course is included in Arbington Premium
$15/month gets you access to every course. Start your 14 day trial today. ☝️

Class benefits

  • Certificate of Completion
  • 30 day satisfaction guarantee
  • 24/7 streaming access
  • Project included
  • Direct teacher access
  • 1h 01m of on-demand video
  • Have a coupon?
  • Checkout