Build a Simple Calculator Using HTML, CSS, and JavaScript 💻
In this tutorial, we’ll create a simple yet fully functional calculator using HTML, CSS, and JavaScript. This project is perfect for beginners who want to practice DOM manipulation, event handling, and basic CSS layout techniques.
🎯 What You’ll Learn
- How to structure a calculator interface using HTML.
- How to style it beautifully using CSS Grid.
- How to make it functional using JavaScript.
🧱 Step 1: Create the HTML Structure
Start by writing the basic layout for your calculator. Create a file named index.html and paste 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</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<input type="text" id="display" readonly>
<div class="keypad">
<button class="btn" id="AC">AC</button>
<button class="btn" id="clear">C</button>
<button class="btn" id="openBracket">(</button>
<button class="btn" id="closeBracket">)</button>
<button class="btn">7</button>
<button class="btn">8</button>
<button class="btn">9</button>
<button class="btn" id="divide">/</button>
<button class="btn">4</button>
<button class="btn">5</button>
<button class="btn">6</button>
<button class="btn" id="multiply">x</button>
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn" id="subtract">-</button>
<button class="btn">0</button>
<button class="btn" id="decimal">.</button>
<button class="btn" id="add">+</button>
<button class="btn" id="equals">=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
🎨 Step 2: Style Your Calculator with CSS
Now, let’s make the calculator look clean and modern. Create a file named style.css and add this code:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: black;
}
#display{
margin-bottom: 20px;
height: 60px;
width: 330px;
border-radius: 12px;
text-align: right;
font-size: 2rem;
padding: 0 20px;
outline: none;
color: white;
background-color: rgb(0, 0, 0);
border: 1px solid yellow;
}
.keypad{
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 10px;
}
.btn{
padding: 20px;
border-radius: 12px;
font-size: 1.5rem;
cursor: pointer;
border:none;
}
.btn:hover, .btn:focus{
transform: translateY(-2px) scale(1.04);
background-color: rgb(229, 226, 226);
}
.btn:active{
transform: translateY(0);
}
#equals{
background-color: rgb(203, 255, 125);
}
#AC{
background-color: yellow;
}
#clear{
background-color: rgb(252, 229, 187);
}
#add,#multiply,#divide,#subtract,#openBracket,#closeBracket{
background-color: rgb(236, 189, 244);
}
⚙️ Step 3: Add Functionality with JavaScript
Finally, let’s make it functional. Create a file named script.js and paste this JavaScript code:
const display=document.getElementById("display");
const buttons=document.querySelectorAll(".btn");
buttons.forEach(function(button){
button.addEventListener("click", function(){
const value=this.innerText;
if(value==="AC") display.value="";
else if(value==="C") display.value=display.value.slice(0,-1);
else if(value==="x") display.value+="*";
else if(value==="=")
try {
display.value = eval(display.value);
} catch {
display.value = "Error";
}
else display.value+=value;
});
});
🚀 Step 4: Test It Out!
Now open your index.html file in a browser. You’ll see a beautiful calculator ready to perform basic arithmetic operations!
💡 Project Repository
Check out the full collection of beginner-friendly web projects on GitHub: smarttechtip/beginner-web-projects
This repository is designed like a “playlist” of smaller projects using HTML, CSS & JavaScript. Each folder in the repo is a standalone project you can clone, study, and improve.
🎥 Watch the Full Tutorial
If you prefer learning through video, you can watch the full step-by-step tutorial on our YouTube channel: SmartTechTip.
Happy coding! 💻✨
.png)
