Let’s create a Simple Calculator using HTML, CSS, and JavaScript. This project will feature a basic calculator that performs arithmetic operations like addition, subtraction, multiplication, and division.
We’ll use HTML to structure the calculator’s interface, CSS to style it for a clean and user-friendly look, and JavaScript to handle the calculations and user interactions.
Let’s dive into building the Simple Calculator. Whether you’re a beginner or an experienced developer, this project offers a practical way to practice your coding skills and create a functional tool that users can interact with. Let’s start calculating!
HTML :
The provided code is an HTML document that represents a basic calculator interface. It consists of a container div that contains an input field and a set of buttons for performing calculations. The input field is of type “text” and has a class of “display”. The buttons are divided into two categories: operators and numbers. The operator buttons include AC (for clearing the input), DEL (for deleting the last character), % (for calculating percentages), and the basic arithmetic operators (/ for division, * for multiplication, – for subtraction, and + for addition). The number buttons range from 0 to 9, including 00 and a decimal point. Finally, there is an equal button (=) for evaluating the expression entered in the input field.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Calculator using Html and Css</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<input type="text" class="display" />
<div class="buttons">
<button class="operator" data-value="AC">AC</button>
<button class="operator" data-value="DEL">DEL</button>
<button class="operator" data-value="%">%</button>
<button class="operator" data-value="/">/</button>
<button data-value="7">7</button>
<button data-value="8">8</button>
<button data-value="9">9</button>
<button class="operator" data-value="*">*</button>
<button data-value="4">4</button>
<button data-value="5">5</button>
<button data-value="6">6</button>
<button class="operator" data-value="-">-</button>
<button data-value="1">1</button>
<button data-value="2">2</button>
<button data-value="3">3</button>
<button class="operator" data-value="+">+</button>
<button data-value="0">0</button>
<button data-value="00">00</button>
<button data-value=".">.</button>
<button class="operator" data-value="=">=</button>
</div>
</div>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
CSS :
The code imports the Google font “Poppins” and sets it as the default font for all elements. The body is centered on the page with a background color. The calculator container has a maximum width, border-radius, and box-shadow. The display and buttons are styled accordingly.
/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #e0e3eb;
}
.container {
position: relative;
max-width: 300px;
width: 100%;
border-radius: 12px;
padding: 10px 20px 20px;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}
.display {
height: 80px;
width: 100%;
outline: none;
border: none;
text-align: right;
margin-bottom: 10px;
font-size: 25px;
color: #000e1a;
pointer-events: none;
}
.buttons {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(4, 1fr);
}
.buttons button {
padding: 10px;
border-radius: 6px;
border: none;
font-size: 20px;
cursor: pointer;
background-color: #eee;
}
.buttons button:active {
transform: scale(0.99);
}
.operator {
color: #2f9fff;
}
JavaScript:
The provided JavaScript code snippet is used to create functionality for a calculator.
- The code selects the display element and all the buttons on the calculator interface.
- It defines a function called “calculate” that performs calculations based on the button clicked.
- The function updates the output based on the button value and updates the display accordingly.
- Event listeners are added to the buttons, so when clicked, they call the “calculate” function with the corresponding button value.
const display = document.querySelector(".display");
const buttons = document.querySelectorAll("button");
const specialChars = ["%", "*", "/", "-", "+", "="];
let output = "";
//Define function to calculate based on button clicked.
const calculate = (btnValue) => {
display.focus();
if (btnValue === "=" && output !== "") {
//If output has '%', replace with '/100' before evaluating.
output = eval(output.replace("%", "/100"));
} else if (btnValue === "AC") {
output = "";
} else if (btnValue === "DEL") {
//If DEL button is clicked, remove the last character from the output.
output = output.toString().slice(0, -1);
} else {
//If output is empty and button is specialChars then return
if (output === "" && specialChars.includes(btnValue)) return;
output += btnValue;
}
display.value = output;
};
//Add event listener to buttons, call calculate() on click.
buttons.forEach((button) => {
//Button click listener calls calculate() with dataset value as argument.
button.addEventListener("click", (e) => calculate(e.target.dataset.value));
});
In conclusion, creating a Simple Calculator using HTML, CSS, and JavaScript has been a practical and educational project. By combining these technologies, we’ve built a functional and user-friendly calculator that can perform basic arithmetic operations. This project is perfect for honing your web development skills and understanding how to create interactive tools.
If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!
