CREATE A CALCULATOR WITH JAVASCRIPT
Learn how to create a Calculator with Javascript.
Source code of HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="box">
<form>
<div class="display">
<input type="text" name="display" disabled>
</div>
<div>
<input type="button" value="AC" onclick="display.value =''" class="operator">
<input type="button" value="DE" class="operator"
onclick="display.value = display.value.toString().slice(0,-1)">
<input type="button" value="." onclick="display.value +='.'" class="operator">
<input type="button" value="/" onclick="display.value +='/'" class="operator">
</div>
<div>
<input type="button" value="7" onclick="display.value +='7'">
<input type="button" value="8" onclick="display.value +='8'">
<input type="button" value="9" onclick="display.value +='9'">
<input type="button" value="*" onclick="display.value +='*'" class="operator">
</div>
<div>
<input type="button" value="4" onclick="display.value +='4'">
<input type="button" value="5" onclick="display.value +='5'">
<input type="button" value="6" onclick="display.value +='6'">
<input type="button" value="-" onclick="display.value +='-'" class="operator">
</div>
<div>
<input type="button" value="1" onclick="display.value +='1'">
<input type="button" value="2" onclick="display.value +='2'">
<input type="button" value="3" onclick="display.value +='3'">
<input type="button" value="+" onclick="display.value +='+'" class="operator">
</div>
<div>
<input type="button" value="00" onclick="display.value +='00'">
<input type="button" value="0" onclick="display.value +='0'">
<input type="button" value="=" class="equal operator" onclick="display.value = eval(display.value)" >
</div>
</form>
</div>
</div>
</body>
</html>
Explanation.
Structure (HTML):
The code starts with the basic structure of an HTML document.
It defines the document type (DOCTYPE), language (lang=”en”), and title (<title>Calculator</title>).
The body section contains the main content of the calculator.
Inside the body, a div with a class container holds another div with a class box. This creates a container for the calculator layout.
Within the box div, a <form> element captures user input and handles button clicks.
Calculator Functionality (Javascript):
The form includes a single input field of type text with the name display. This field displays the current calculation and is set to disabled (disabled), meaning users can’t directly modify it.
Multiple div elements group buttons with different functionalities:
The first row includes buttons for “AC” (All Clear), “DE” (Delete), “.” (decimal point), and “/” (division).
“AC” clears the display by setting its value to an empty string.
“DE” removes the last digit from the display using slice(0, -1), creating a substring excluding the last character.
“.” and “/” buttons update the display value by adding the corresponding symbol when clicked.
Subsequent rows contain buttons for numbers (1-9, 0, 00) and operators (+, -, *).
Number buttons append the clicked number to the display value.
Operator buttons append the corresponding operator symbol.
The last row contains buttons for “00” (double zero), “0”, and “=” (equal).
“00” appends two zeros to the display.
The button with the value “=” has a class “equal operator”. Clicking this button triggers the eval(display.value) function which evaluates the mathematical expression in the display field and updates the display with the result.
Source code of CSS file
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container
{
width: 100%;
height: 100vh;
background: #b949b9;
display: flex;
align-items: center;
justify-content: center;
}
.box
{
background: #575757;
padding: 15px;
border-radius: 10px;
}
.box form input
{
outline: 0;
border: 0;
width: 55px;
height: 55px;
border-radius: 15px;
box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1) , 5px 5px 15px rgba(0, 0, 0, 0.2);
background: transparent;
font-size: 20px;
color: #ffffff;
cursor: pointer;
margin: 7px;
}
form .display
{
display: flex;
justify-content: flex-end;
margin: 20px 0;
}
form .display input
{
text-align: right;
flex: 1;
font-size: 40px;
box-shadow: none;
}
form input.equal
{
width: 128px;
}
form input.operator
{
color: #b949b9;
}
Explanation
global patterns:
* Selector targets all factors.
margin: 0; padding: 0; box-sizing: border-box; – This resets default browser margins and padding for all factors and guarantees the width of the box consisting of its border.
container patterns:
.container class targets the container element.
width: 100%; height: 100vh; – Units the container to absorb the entire width and viewport height.
background: #b949b9; – Defines the background color of the container as a purple shade.
display: flex; align-items: center; justify-content: center; – Arranges the content material of the container with flexbox. This centers the content material both horizontally and vertically.
Calculator box styles:
.box class targets the calculator box element.
background: #575757; – Sets the heritage color of the calculator box to a dark gray shade.
padding: 15px; – Provides padding around the content material within the container.
Button patterns:
.container form input targets all input factors (buttons) within the form inside the calculator box.
outline: 0; border: 0; – Gets rid of default outline and border from the buttons.
width: 55px; height: 55px; – Units the width and height of the buttons.
background: transparent; – Units the background color to transparent, making the button background inherit from the determined element.
font-size: 20px; colour: #ffffff; – Units the font length and color of the button textual content to white.
cursor: pointer; – Modifications the cursor to a pointer icon while hovering over the button.
margin: 7px; – Provides a margin between the buttons.
display area styles:
form .display targets the .show detail inside the form.
display: flex; justify-content: flex-end; – Arrange the content material of the display region with the usage of flexbox and align the text to the proper.
margin: 20px 0; – Adds margin above and below the show region.
Display Input Styles:
form .display input targets the input element (text field) within the .display element.
text-align: right; – Aligns the text within the display field to the right.
flex: 1; – Makes the display field occupy all available space in the flexbox container.
font-size: 40px; – Sets the font size of the display text to a larger size for better readability.
box-shadow: none; – Removes any default shadow from the display field.
Equal Button Style:
form input.equal targets the input element with the class equal (likely the equals button).
width: 128px; – Sets a wider width for the equals button compared to other buttons.
Operator Button Style:
form input.operator targets all input elements with the class operator (likely buttons for operators like +, -, *, /).
color: #b949b9; – Sets the color of the operator button text to the same purple shade used in the container background.
Thanks for reading this blog.