Introduction
In this tutorial, we will build a simple calculator app using HTML, CSS, and JavaScript. This is a great beginner-friendly project to get hands-on experience with the core concepts of web development, such as creating HTML structures, styling with CSS, and adding interactivity with JavaScript.
What Files Will Be Created?
You’ll need to create three files for this project:
- index.html – This is the file where the structure of the calculator will be written (HTML).
- style.css – This is where the design (styling) of the calculator will be defined.
- script.js – This is where the logic and functionality of the calculator will be coded in JavaScript.
Step 1: Setting Up the HTML File (index.html)
The first step is to create the structure of the calculator. This file will contain the basic layout and buttons needed for the app.
Create the file index.html and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<input type="text" id="display" disabled />
<div class="buttons">
<button>7</button>
<button>8</button>
<button>9</button>
<button class="operator">/</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button class="operator">*</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button class="operator">-</button>
<button>0</button>
<button class="clear">C</button>
<button class="equals">=</button>
<button class="operator">+</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>Explanation:
- HTML Structure:
<input>: The<input>element creates the display area of the calculator, where results are shown. We set it todisabledso users can’t type directly into it.- Buttons: The calculator’s buttons are made using the
<button>tags. Each button is either a number (1-9), operator (+,-,*,/), or a special button likeC(clear) and=(equals).
Step 2: Styling the Calculator with CSS (style.css)
Next, we’ll style the calculator to make it look neat and modern. The CSS will ensure the calculator is centered, buttons are styled, and the display looks clear and readable.
Create the file style.css and add the following code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: #1e1e2f;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.calculator {
width: 300px;
background: #2e2e3e;
padding: 20px;
border-radius: 20px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
#display {
width: 100%;
height: 60px;
background: #1f1f2e;
color: #fff;
border: none;
border-radius: 10px;
font-size: 28px;
padding: 0 10px;
margin-bottom: 20px;
text-align: right;
outline: none;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
button {
height: 60px;
font-size: 22px;
border: none;
border-radius: 12px;
background: #3e3e5e;
color: white;
cursor: pointer;
transition: background 0.2s;
}
button:hover {
background: #5e5e8e;
}
button:active {
transform: scale(0.98);
}
button:nth-child(4n) {
background-color: #ff8c00; /* Operator buttons */
}
button:nth-child(4n):hover {
background-color: #ffa733;
}
Explanation:
- Global Styles: We use
*to reset margin, padding, and box-sizing globally for all elements. - Body Styles: The body is styled to center the calculator using Flexbox. It’s set to cover the entire viewport (
100vh), and the background color is set to a dark shade. - Calculator Container: We define the
.calculatorclass to set the width, padding, background color, border-radius, and shadow to make the calculator look neat and modern. - Buttons: Each button is given a consistent size, border-radius, and background color. Operators (
+,-,*,/) have a distinct background color for better visibility.
Step 3: Adding Functionality with JavaScript (script.js)
Now, we will add the logic behind the calculator. This JavaScript code will handle user interactions like button clicks, calculations, and clearing the display.
Create the file script.js and add the following code:
let display = document.getElementById("display");
let buttons = Array.from(document.querySelectorAll("button"));
let currentInput = "";
buttons.forEach(button => {
button.addEventListener("click", () => {
let buttonValue = button.textContent;
if (buttonValue === "C") {
currentInput = "";
display.value = "";
} else if (buttonValue === "=") {
try {
currentInput = eval(currentInput).toString();
display.value = currentInput;
} catch (e) {
display.value = "Error";
currentInput = "";
}
} else {
currentInput += buttonValue;
display.value = currentInput;
}
});
});
Explanation:
let display = document.getElementById("display");: This line grabs theinputelement (where the result will be shown) and stores it in the variabledisplay.let buttons = Array.from(document.querySelectorAll("button"));: This collects all the<button>elements and converts them into an array so we can add event listeners to each one.- Event Listeners: We add an event listener to each button. When a button is clicked:
- Clear (
C): If the user clicks the “C” button, we clear the current input and reset the display. - Equals (
=): If the user clicks the “=” button, we evaluate the expression usingeval(). If there’s an error (e.g., incomplete expression), we show “Error”. - Other Buttons: If any other button is clicked, we append its value to the
currentInputstring and update the display.
- Clear (
Step 4: Testing the Calculator
Now, you can test your calculator by opening the index.html file in a web browser. Click on the buttons and check if the calculator works as expected. (final results should look like this)
Conclusion
Congratulations! You’ve now built a fully functional calculator app using HTML, CSS, and JavaScript. This simple project is an excellent way to practice your web development skills and get familiar with basic HTML, CSS, and JavaScript concepts.
If you found this tutorial helpful or have any questions, feel free to leave a comment below. I’d love to hear your feedback and suggestions for future tutorials!
if you guys wanna be smart here’s the key legit
Hope you like the content, more will be added as soon as I have time !