Make a Simple calculator using HTML CSS
Introduction:
This is the Project which creates a Scientific calculator which helps you to make calculations in math in a very easy manner.
It is user-friendly as well as a faster calculator
You can use this calculator not only for general use but also for your studies too.
The logic used to create this project was not too difficult
One who has a basic understanding of JavaScript and familiar with JS Functions concepts can understand in an easy manner.
You can customize this project’s animation as well as logic as per requirement.
It’s one of the major projects you can use for your personal use as well as to present in your college.
Explanation:
This project consists of 3 web stacks that are HTML5, CSS3, and JavaScript(ES6).
The role of JavaScript plays a very essential role for the logic implied in the code of this code.
All the onclick events and conditions are managed as per the user’s use by JavaScript Logic
So let us take a look at how the Logic is built behind the code of this project:
First of all, we have declared 3 constant variables that are const calculator , const display , const buttons these are used later in the code to access the elements in the HTML document by the querySelector methods.
Source Code:
Filename: index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CALCULATOR</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="calculator">
<div class="display">0</div>
<div class="buttons">
<button class="operator" value="clear">C</button>
<button class="operator" value="backspace">←</button>
<button class="operator" value="%">%</button>
<button class="operator" value="/">÷</button>
<button value="7">7</button>
<button value="8">8</button>
<button value="9">9</button>
<button class="operator" value="*">×</button>
<button value="4">4</button>
<button value="5">5</button>
<button value="6">6</button>
<button class="operator" value="-">-</button>
<button value="1">1</button>
<button value="2">2</button>
<button value="3">3</button>
<button class="operator" value="+">+</button>
<button class="operator" value="+/-">±</button>
<button value="0">0</button>
<button class="operator" value=".">.</button>
<button class="operator" value="=">=</button>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
Filename: Style.css
body{
background-color: #c0d3cf;
}
#calculator {
width: 400px;
height: 570px;
margin: 100px auto;
background-color: #797373;
color: #fff;
border-radius: 10px;
border-radius: 20px;
box-shadow: 10px 10px 15px .1px black;
}
.display {
width: 100%;
height: 80px;
background-color: #4e5a49;
font-size: 36px;
text-align: right;
padding: 20px;
box-sizing: border-box;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
font-weight: bolder;
font-family: cursive;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
padding: 20px;
}
button {
width: 100%;
height: 70px;
font-size: 24px;
background-color: #fff;
color: #333;
border-radius: 5px;
border: none;
cursor: pointer;
filter: drop-shadow(10px 10px 10px rgb(19, 24, 19));
font-weight: bolder;
}
button:hover{
transform: scale(1.05);
}
.operator {
background-color: #f39c12;
color: #fff;
}
Filename: Script.js
const calculator = document.querySelector("#calculator");
const display = calculator.querySelector(".display");
const buttons = calculator.querySelectorAll("button");
buttons.forEach(button => {
button.addEventListener("click", function() {
let value = this.value;
let text = display.textContent.trim();
if (value === "clear") {
display.textContent = "0";
} else if (value === "backspace") {
display.textContent = text.substring(0, text.length - 1);
} else if (value === "=") {
display.textContent = eval(text);
} else if (value === "+/-") {
display.textContent = text.startsWith("-") ? text.substring(1) : `-${text}`;
} else {
display.textContent = text === "0" ? value : text + value;
}
});
});
Let us discuss the work of these 3 constants one by one :
const calculator:
In this constant variable we have written document.querySelector(“#calculator”); This code has important logic to selects the HTML element with the class display inside the calculator element and assigns it to the display constant variable.
const display:
The second constant we have declared is const display .
We have declared it with calculator.querySelector(“.display”); which the HTML element with the class display inside the calculator element and assigns it to the display constant variable.
This is the code which help user to enter the numbers in calculator.
const buttons:
The button we have created in the calculator are the part of this code that is calculator.querySelectorAll(“button”); It is declared to slect all the buttons elements inside of calculator elements and assign them to the buttons constant variables
So these are the 3 constants we have declared in this code
Now we discuss the functions of this codes:
First function we have created Is buttons.forEach(button => { … });
This is created t use forEach method to loop from each button element in the button array
For each button, an event listener is formed using the method addEventListener..
whenever the button is clicked. The event listener access the click event and executes the anonymous function defined inside it.
The second function we have made is if (value === “clear”) { … } this function has the ability to invoke as per the conditions given in the if statements as per the on click events.
If we click the button which has ‘clear’ then this code sets the text to ‘zero’
We have created some functions under the condition as per the click events & user inputs from that here is a function named (value === “backspace”) { … }
This function is created to remove the last character from the text content of the display element If and only if the clicked button has a value of “backspace”,
Another conditional function is (value === “=”) { … }:
When we click the button which has a value of “=” then this code executes the expression represented by the text content of the display element and sets the result as the text content of the display element.
The function (value === “+/-“) { … } has also the condition of invoking this function executes its code if the user clicks the button of ‘+ or –‘
if the text content of the display element starts with a “-“ the block of this function’s code removes it from display element
And from all of these conditional functions if any function does not satisfy any conditions the last block of code executes its code.
It sets the text content of the display element to the value of the clicked button.
the text content is replaced by the value of the clicked button If the text content of the display element was “0”
and the value of the clicked button is concatenated to the end of the text content. If the text content of the display element wasn’t “0”.
Output
Find More Projects
Jungle Dash Game Using Python with source code with pygame module Introduction: Dive into the excitement of jungle adventures with our new …
Building a Tetris Game with Python with source code Introduction: Welcome to the world of Tetris, where falling blocks meet strategic maneuvers …
Super Mario Game Using Python with source code Introduction: Remember playing Super Mario as a kid? It’s that classic game where you …
library management system using python with source code using Python GUI Tkinter (Graphical User Interface) How to Run the code: Introduction: Imagine …
Space Shooter Game Using Python with source code Overview: A space shooter game typically involves controlling a spaceship to navigate through space …
Hotel Management System Using Python with source code Introduction: Welcome to our blog post introducing a helpful tool for hotels: the Tkinter-based …
