Build this JS calculator in 15 minutes! 🖩

Summary

In this instructional video, the creator guides viewers through building a basic calculator using HTML, CSS, and JavaScript. The process involves setting up a 'calculator' div with a 'display' input for number entry, which is set to read-only. A 'keys' div contains buttons for digits, operators, and functions like 'equals' and 'clear'. The buttons are styled with CSS, creating a grid layout with a modern, rounded appearance. JavaScript is used for functionality, including appending numbers to the display, calculating results with the 'eval' function, and handling errors. The final product is a simple yet visually appealing calculator that can perform basic arithmetic operations.

Takeaways

• 🌟 The video tutorial focuses on creating a calculator program using HTML, CSS, and JavaScript.
• 📝 HTML is used to structure the calculator with a 'div' element for the container, an 'input' element for display, and buttons for numbers and operations.
• 🖌️ CSS is applied to style the buttons, making them round with a specific size, color, and hover effects to enhance user interaction.
• 🔢 The 'display' input element is set to 'readonly' to prevent direct text input, ensuring it only shows numbers and operators.
• 🎨 The calculator's design includes a grid layout for buttons, a specific font family, and a max-width to ensure it is responsive and visually appealing.
• 🔄 The JavaScript functionality involves creating functions for appending numbers to the display, calculating the result, and clearing the display.
• 🔧 Error handling is implemented using 'try' and 'catch' blocks to manage scenarios where the equation is incomplete or incorrect.
• 🔄 The 'eval' function in JavaScript is utilized to calculate and return the result of the equation entered in the display.
• 👉 The tutorial demonstrates the process of copying and pasting code for repetitive elements, like the number buttons, to streamline development.
• 🎨 Additional CSS styling is applied to differentiate operator buttons with a distinct color and interactive feedback when clicked.
• 📱 The final result is a functional and styled calculator that can be used to perform basic arithmetic operations.

Q & A

What is the main purpose of the video?

The main purpose of the video is to guide viewers through the process of creating a calculator program using HTML, CSS, and JavaScript.

What is the first element created in the calculator program?

The first element created is a div element with an ID of 'calculator' which will serve as the container for the calculator.

What is the purpose of the 'display' input element?

The 'display' input element is used to show the numbers that are typed in. It is set to be read-only to prevent direct text entry.

How many buttons are initially created for the calculator keys?

Initially, 14 buttons are created for the calculator keys, including numbers 7 to 0, the plus, minus, multiplication, and division symbols.

What is the purpose of the 'keys' div element?

The 'keys' div element is used to nest and contain all of the button elements representing the calculator keys.

What is the text on the button that is used to start calculations?

The text on the button used to start calculations is 'equals'.

How are the buttons styled in the CSS stylesheet?

The buttons are styled with a width and height of 100 pixels, rounded corners with a border radius of 50 pixels, no border, a dark background color with HSL values, white text color, and bold font weight.

What CSS property is used to arrange the buttons in a grid layout?

The 'display' property is set to 'grid', and 'grid-template-columns' is used with the 'repeat' function to create a four-column layout.

What is the purpose of the 'clear' button in the calculator?

The 'clear' button is used to clear the current display, allowing the user to start a new calculation.

How does the JavaScript part of the program handle button clicks?

The JavaScript part uses the 'onclick' attribute of each button to call specific functions like 'appendToDisplay', 'calculate', and 'clearDisplay' when the buttons are clicked.

What JavaScript function is used to append characters to the display?

The 'appendToDisplay' function is used to append characters to the display when a button is clicked.

How does the video handle potential errors in the calculator program?

The video uses a try-catch block to handle potential errors, such as an uncaught syntax error, by changing the display value to 'error'.

What is the final step in the JavaScript functionality for the calculator?

The final step is to use the 'eval' function to evaluate the expression in the display and show the result, with error handling to manage incomplete equations.

How does the video ensure the calculator is centered on the page?

The video sets the body's display to 'flex', uses 'justify-content' and 'align-items' to center the content, and sets the body height to '100vh' to ensure the calculator is centered both horizontally and vertically.

What additional CSS styling is applied to the operator buttons?

The operator buttons are given a new class 'operatorBtn', styled with an orange background color, and lighter shades on hover and active states to create a flashing effect.

How does the video script guide the creation of the calculator's display?

The script guides the creation of a read-only input element with the ID 'display', styles it with CSS, and uses JavaScript functions to update its value based on user interactions.

Outlines

00:00

🛠️ Building a Calculator with HTML, CSS, and JavaScript

In this segment, the video tutorial begins by introducing the project of creating a calculator using HTML, CSS, and JavaScript. The presenter outlines the initial steps, which include setting up the HTML structure with a 'div' element identified by the ID 'calculator'. Inside this 'div', an input element with the ID 'display' is created to show the numbers entered, with a 'readonly' property to prevent direct text input. A nested 'div' with the ID 'keys' is also established to house the buttons for calculator operations. The tutorial proceeds to describe the creation and replication of button elements for digits 0-9, basic arithmetic operators (plus, minus, multiply, divide), and a decimal point, each with an 'onclick' attribute linked to a JavaScript function that will be defined later. The first button created is for the plus operator, with a function to append its character to the display. The process involves copying this button's structure and adjusting it for the remaining digits and operators, totaling 15 buttons including the equals and clear buttons.

05:01

🎨 Styling the Calculator Interface with CSS

The second paragraph focuses on styling the calculator's interface using CSS. The presenter details the process of selecting all buttons and applying uniform styles, such as setting their width and height to 100 pixels, using a border radius of 50 pixels for a rounded look, removing borders, and styling the text with white color, a font size of 3rem, and bold weight. A pointer cursor is specified for hover effects. The 'keys' div, which contains all buttons, is styled using CSS Grid, with four columns of equal width (1fr) and a 10-pixel gap between rows. Padding around the keys and the calculator is set to 25 pixels, and the calculator's font family, background color, border radius, and max-width are defined. The display area is styled to take up the full width with padding and a specific font size and alignment. The body of the document is styled to center the calculator both horizontally and vertically, with a height set to 100vh. The presenter also describes interactive hover and active states for the buttons, changing the background color's lightness to create a 'light up' and 'flash' effect, and differentiates the operator buttons with a distinct orange color and lighter shades for hover and active states.

10:03

📝 Adding Functionality with JavaScript

In this part, the tutorial moves on to adding functionality to the calculator using JavaScript. The script begins by obtaining a reference to the display element using its ID. Three main functions are outlined: 'append to display', 'calculate', and 'clear display'. The 'append to display' function takes a character as a parameter and appends it to the current value of the display. The 'clear display' function sets the display's value to an empty string, effectively clearing it. The 'calculate' function retrieves the value from the display, uses the 'eval' function to evaluate the expression as JavaScript code, and then updates the display with the result. Error handling is introduced to manage cases where an incomplete equation is entered, using a try-catch block to display an 'Error' message if an exception occurs. The video demonstrates testing the calculator's functionality with sample inputs and operations, ensuring that the calculator can handle basic arithmetic and error scenarios.

15:08

🎉 Completing the Calculator Program

The final paragraph wraps up the tutorial by summarizing the completed calculator program. The presenter highlights that the calculator, now functional with JavaScript, HTML, and CSS, can be used to impress friends with its interactive design and basic arithmetic capabilities. The tutorial concludes with a demonstration of the calculator performing calculations and handling errors gracefully, showcasing the final product of the video's instructions.

Keywords

💡Calculator Program

A calculator program is a software application designed to perform mathematical calculations. In the context of the video, the creator is building a calculator using HTML, CSS, and JavaScript. This involves creating a user interface with buttons for numbers and operations, and scripting functionality to perform calculations when the buttons are interacted with.

💡HTML

HTML, or HyperText Markup Language, is the standard markup language used to create and design web pages. In the video, HTML is used to structure the calculator's interface, creating elements such as a div container, an input element for displaying numbers, and button elements for the calculator's keys.

💡CSS

CSS, or Cascading Style Sheets, is a stylesheet language used for describing the presentation of a document written in HTML. In the video, CSS is used to style the calculator's buttons, making them visually appealing with properties like width, height, border radius, and background color. It also arranges the layout of the calculator on the web page.

💡JavaScript

JavaScript is a programming language that allows interactive web pages and is an essential part of web applications. In the video, JavaScript is used to add functionality to the calculator, such as appending numbers to the display, performing calculations when the equals button is pressed, and clearing the display.

💡Div Element

A div element in HTML is a container used to group block-level elements. In the script, the creator uses a div with an ID of 'calculator' to contain all the elements that make up the calculator's interface.

💡Input Element

The input element in HTML is used to create interactive fields where users can input data. In the video, an input element with a read-only property is used to display the numbers and operators as they are entered, without allowing the user to type directly into it.

💡Button Element

A button element in HTML is used to create clickable buttons. The video script describes creating multiple button elements, each with an onclick attribute that triggers a JavaScript function to handle the button's action, such as appending a number or operator to the display.

💡CSS Grid

CSS Grid is a layout system in CSS that allows elements to be positioned in rows and columns. The video mentions setting the display property to 'grid' for the 'keys' element, which contains the calculator buttons, to arrange them in a grid layout with four columns using the 'repeat' function and the 'fr' unit.

💡Pseudo Classes

Pseudo classes in CSS are used to define special states of an element. The video script refers to the 'hover' and 'active' pseudo classes to change the appearance of the buttons when the mouse hovers over them or when they are clicked, enhancing the user interaction experience.

💡Eval Function

The eval function in JavaScript is used to evaluate code represented as a string. In the video, the eval function is mentioned as a way to evaluate the mathematical expression entered into the calculator's display and return the result.

💡Error Handling

Error handling in programming involves responding to the occurrence of an error or exception. The video script discusses the importance of error handling when using the eval function, as it can cause an error if the mathematical expression is incomplete. The creator uses a try-catch block to handle potential errors and display an 'Error' message.

Highlights

Introduction to creating a calculator program using HTML, CSS, and JavaScript.

Creating a div element with an ID of 'calculator' to serve as the container.

Adding an input element with an ID of 'display' and setting it to read-only to prevent text entry.

Creating a nested div with an ID of 'keys' to contain the calculator buttons.

Adding buttons for digits and operators with specific onclick attributes for JavaScript functions.

Creating a function 'appendToDisplay' to handle button clicks and display updates.

Styling buttons with CSS to have equal width and height, rounded corners, and hover effects.

Arranging buttons in a grid layout using CSS grid properties.

Styling the 'calculator' ID with a specific font family, background color, and border radius.

Setting the display element to have a full width and padding for better visibility.

Centering the calculator on the page using Flexbox properties on the body.

Adding functionality to the 'clear' button to reset the display.

Creating a 'calculate' function to perform arithmetic operations using the eval function.

Handling errors with a try-catch block to manage incomplete equations.

Customizing the color and hover effects for operator buttons to distinguish them.

Finalizing the calculator program with JavaScript functionality to impress friends.

Transcripts

hey what's going on everybody in today's

video we're going to create a calculator

program using HTML CSS and JavaScript so

let's get started all right let's do

this thing everybody we have a lot of

buttons to create but we'll need a

container I will create a div element

the div element will have an ID of

calculator within this div element we'll

create an input

element the input element will have an

ID of display

to display the numbers that we type in I

don't want somebody to enter in some

text for the

display I would like this display to be

readon I will add the read only property

so we can't type in anything even though

I'm trying I will create a nested

development that has an ID of keys for

all of the keys we need to add a lot of

buttons we'll begin with the first I

will create a button element

the text on the button will be plus I

will set the onclick attribute of this

button to be a JavaScript function we

still need to Define this function

eventually we'll create a append to

display

function we have one argument to pass

into this JavaScript function a

character of

plus that's our first button let's copy

this button and paste 13 additional

times if I counted

right okay the second button will be

seven the character we're passing in is

seven followed by

8

9

minus

4

5

6

asterisk for

multiplication

1

2

three forward slash for

division then

zero and here are the new buttons I'm

Mis counted we need to add one

more a DOT for a

decimal now we need an equals button

we're going to arrange that a little

different let's create a

button with the text of

equals the onclick attribute of this

specific button is going to be

calculate then we need a button to clear

our

screen the text on this button will be

capital c for clear the on click

attribute of this button is going to be

clear display

and that is all the buttons we'll

need so let's save everything and let's

go to our CSS

stylesheet I'm going to zoom back to

100% first let's style all these buttons

I will select all

buttons for each button I will set the

width to be 100

pixels the height to be 100 pixels so

they're

even I would like rounded buttons I will

set the Border radius property to be 50

pixels so they're

circles let's remove the

border border

none I'll change the background color of

the buttons

background-color I'll use hsl values

I'll set the lightness to be 30% so

they're

darker for the text of the button I will

set the color to be white

for the font

size I will set that to be three

RM set the font weight to be

bold then when I hover my cursor over

one of the buttons I would like my

cursor to be a

pointer

cursor

pointer now we have to arrange these

buttons

properly let's select the ID of keys

keys is a development that's containing

all of the

buttons this

element all of the buttons are

within to arrange these buttons in a

grid we can set the display

property to be a

grid for this calculator I would like

four columns to do that I will set the

grid template columns property to be

we'll use the repeat function of CSS I

would like four columns then to arrange

these buttons evenly you can use 1

F FR stands for fractional unit 1 FR

indicates that each column should take

up an even amount of space so now we

have Columns of four if I were to set

this to three we would have Columns of

three but I'm going to use Columns of

four because I would like all of the

operators on the left hand side

I'll set the Gap to be 10

pixels that is the gap between each of

the

rows then I'll add some

padding of 25

pixels that's padding around the

keys let's select the ID of

calculator I'll add that to the top to

keep everything

organized with our calculator I will

select a font family

of Ariel with a backup of s

serif let's pick a background color for

the

calculator I will select something

darker I'll set the lightness to be

15% I'll round the corners of the

calculator border radius 15

pixels the corners of the calculator are

smooth now

then I will set a Max width of the

calculator to be 500

pixels if any elements overflow I will

set that to be

hidden this is mostly for our display if

we have a very long equation all right

next let's select the display right now

it's kind of

small we are selecting our ID of

display let's set the width to be 100%

I'll add some padding of 20

pixels for the text of the display I

will set the font size to

be 5

RM let's text a line

left I'll remove the border border

none and I'll change the background

color I'll just copy this property

because I'm lazy let's increase the

lightness to

20% then we'll select the body of our

document I will remove all margin margin

zero I would like the calculator to be

in the middle of my window right now

it's in the top left corner if you would

prefer it up here you can leave it as

is I will set the display to be Flex for

Flex

box

justify content in the center for a

horizontal alignment for a vertical

alignment we can set

align items to be Center but we do need

to increase the height of the body of

the document so it's

100% I will set the height to be 100 VH

for 100% the viewport height that should

place the calculator in the middle of

the body of our document both

horizontally and vertically for the

background color I'm going to decrease

the lightness

slightly for the background color I will

set the lightness to be like

95% okay let's go to the bottom of our

CSS

stylesheet when I hover over one of

these buttons I would like to increase

the lightness so with all

buttons

with the hover sudo

class change the background color so the

lightness is 40% instead of

30 now these buttons light up when we

hover our cursor over one of the

buttons now when I click on one of the

buttons I'll increase the lightness

further so it

flashes we are selecting the active

studo class

now let's take our background color

property increase the lightness to 50%

when we hover over a button it lights up

when we click on it it flashes

momentarily so with all of these

operators I would like all of these

operator buttons to be a different color

I'll pick orange we're going to give

each of these buttons a new class let's

head back to our HTML file beginning

with the plus button I will set the

class equal

to operator Das BTN for button

so let's copy this class paste it for

our minus

button multiply

button divide button and the clear

button now we will select the class of

operator BTN for

button let's change the background

color I'm going to set the background

color to be

orange

I've already pre-picked a

color when I hover my cursor over one of

the operator buttons I would like the

color to be a lighter orange instead of

gray let's take our operator button

access the hover sudo class I'll

increase the lightness to

65% then when I click on one of these

buttons I would like the lightness to

increase further

with the operator button

class with the active pseudo class

increase the lightness to

75% so when I click on one of the

operator buttons it's going to flash

momentarily all right and that is all

the HTML and CSS that we need now we

just need to add functionality let's go

to our Javascript

file for our Javascript file there's not

a lot we have to write first we need to

get the display element so what was that

ID

display const display equals document.

getet element by ID get the ID of

display we have three functions to

create a function for append to display

calculate and clear display these three

functions function append

to display

there is one parameter

input because we were passing in a

character when we call this

function then we have a

function to clear

display then a function to

calculate we'll begin with a pen to

display all we're going to do is take

our display this element access its

value append it with plus equals our

input and let's see if this works seven

I forgot to change the font color of the

display so let's do that within our

display element let's set the color to

be white okay that's much

better

7.13 + 5

equals okay we know that that works when

I click on the clear button I would like

to clear this

display let's access our display element

access the value property set it equal

to an empty string

3.14159 when I hit clear it should clear

the

display lastly we have

calculate let's take our display

elements value property set it equal to

now we're going to use the eval

function the eval function takes an

expression such as 1 + 2 + 3 and

evaluates it and gives a result it's

kind of like it's its own built-in

calculator so to say evaluate the value

within our

display display.

value so if I add

3.14 plus 1

01 I'm given a result of

4.15 now for some reason if we get an

error for example 7 +

equals well we have a problem let's go

to our

console we've encountered an uncaught

syntax error because we never finished

our equation in the last lesson we

learned about error handling this is

dangerous code it can cause an error

let's surround this code with a tri

block

we will try this code and catch any

errors that

happen so we need a catch block now

catch any

errors we will change the value of the

display to equal some text of

error all right and that should work

3.14 times equals that results in an

error we clear it and then start over

what's 1 + 2 + 3 + 4 that would be 10

all right everybody so that is a

calculator program you can make using

JavaScript HTML and CSS impress your

friends