Build this JS calculator in 15 minutes! ๐ฉ
Summary
TLDRIn 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
๐ ๏ธ 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.
๐จ 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.
๐ 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.
๐ 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.
Mindmap
Keywords
๐กCalculator Program
๐กHTML
๐กCSS
๐กJavaScript
๐กDiv Element
๐กInput Element
๐กButton Element
๐กCSS Grid
๐กPseudo Classes
๐กEval Function
๐กError Handling
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
Browse More Related Video
![](https://i.ytimg.com/vi/zmSmjD_2PxI/hq720.jpg?sqp=-oaymwEmCIAKENAF8quKqQMa8AEB-AH-CYAC0AWKAgwIABABGGEgZSg6MA8=&rs=AOn4CLC7yDF2b2gG7JMEcgToQfL9Wk8NZw)
Simple Tkinter Demo
![](https://i.ytimg.com/vi/jkS4Vx85I-A/hq720.jpg)
How to Program A Calculator in C++! (Great C++ Microsoft Visual Studio Beginner Project)
![](https://i.ytimg.com/vi/FE_0cdzSMLc/hq720.jpg)
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 11
![](https://i.ytimg.com/vi/s3GTej92hvU/hq720.jpg)
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 7
![](https://i.ytimg.com/vi/x8C9GA0_cWY/hqdefault.jpg?sqp=-oaymwEXCJADEOABSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLCPVpPQTmmzTZvsXbh8Uj6ZQjhi8Q)
Scientific Notation on the Calculator
![](https://i.ytimg.com/vi/Ay8BXbAmEYM/hq720.jpg)
Responsive HTML Table With Pure CSS - Web Design/UI Design
5.0 / 5 (0 votes)