Build a Modern Gradient Calculator Using HTML, CSS, and JavaScript
Building small projects is one of the best ways to improve your web development skills. In this tutorial, we will create a modern gradient calculator using HTML, CSS, and JavaScript. This project will help you understand layout design, CSS styling techniques like glassmorphism, and JavaScript event handling.
By the end of this guide, you will have a fully working calculator with a clean UI and smooth interactions.
GitHub: You can find the complete source code here.
Project Overview
This calculator includes:
- A modern gradient background
- A glass-style calculator interface
- Buttons for numbers and operators
- Clear and delete functionality
- A working equals calculation
We will build this project using three parts:
- HTML for the structure
- CSS for the design and layout
- JavaScript for the calculator logic
Step 1: HTML Structure
First, we create the layout of the calculator. This includes the display screen and all the buttons.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Gradient Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calc-container">
<div class="calculator">
<div class="display-wrapper">
<input type="text" id="display" placeholder="0" readonly>
</div>
<div class="buttons">
<button class="btn-alt" data-type="clear">C</button>
<button class="btn-alt" data-type="delete">DEL</button>
<button class="btn-op" data-val="/">÷</button>
<button class="btn-op" data-val="*">×</button>
<button class="btn-num" data-val="7">7</button>
<button class="btn-num" data-val="8">8</button>
<button class="btn-num" data-val="9">9</button>
<button class="btn-op" data-val="-">−</button>
<button class="btn-num" data-val="4">4</button>
<button class="btn-num" data-val="5">5</button>
<button class="btn-num" data-val="6">6</button>
<button class="btn-op" data-val="+">+</button>
<button class="btn-num" data-val="1">1</button>
<button class="btn-num" data-val="2">2</button>
<button class="btn-num" data-val="3">3</button>
<button class="btn-equal" id="equals">=</button>
<button class="btn-num zero" data-val="0">0</button>
<button class="btn-num" data-val=".">.</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Step 2: Styling the Calculator with CSS
Next, we design the calculator using CSS. We use a gradient background and a glassmorphism effect to give the calculator a modern look.
:root {
--bg-gradient: linear-gradient(45deg, #0f0c29, #302b63, #24243e);
--glass-bg: rgba(255, 255, 255, 0.05);
--glass-border: rgba(255, 255, 255, 0.1);
--accent-gradient: linear-gradient(135deg, #ff00d2, #fed90f);
--op-color: #00d2ff;
--text-main: #ffffff;
}
*{
box-sizing:border-box;
margin:0;
padding:0;
font-family:'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
body{
background:var(--bg-gradient);
height:100vh;
display:flex;
justify-content:center;
align-items:center;
}
.calculator{
background:var(--glass-bg);
backdrop-filter:blur(15px);
border:1px solid var(--glass-border);
padding:25px;
border-radius:24px;
width:320px;
box-shadow:0 25px 50px rgba(0,0,0,0.5);
}
#display{
width:100%;
background:rgba(0,0,0,0.2);
border:none;
outline:none;
padding:20px;
font-size:2rem;
color:#fff;
text-align:right;
border-radius:12px;
}
.buttons{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
}
button{
height:60px;
border:none;
border-radius:12px;
font-size:1.1rem;
cursor:pointer;
color:white;
background:rgba(255,255,255,0.08);
}
.btn-op{
color:var(--op-color);
}
.btn-alt{
color:#ff4b2b;
}
.btn-equal{
background:var(--accent-gradient);
grid-row:span 2;
height:100%;
}
.zero{
grid-column:span 2;
}
Step 3: Adding JavaScript Functionality
Now we make the calculator functional using JavaScript. We use event listeners to detect button clicks and update the display accordingly.
const display = document.getElementById("display");
const buttons = document.querySelectorAll("button");
buttons.forEach((btn) => {
btn.addEventListener("click", () => {
const val = btn.dataset.val;
const type = btn.dataset.type;
if (type === "clear") {
display.value = "";
}
else if (type === "delete") {
display.value = display.value.slice(0,-1);
}
else if (btn.id === "equals") {
calculate();
}
else {
append(val);
}
});
});
function append(value){
if(display.value === "" && ["+","*","/"].includes(value)) return;
display.value += value;
}
function calculate(){
try{
if(display.value){
display.value = new Function(`return ${display.value}`)();
}
}
catch(err){
display.value = "Error";
setTimeout(()=>display.value="",1500);
}
}
Final Result
You now have a fully functional modern calculator built using HTML, CSS, and JavaScript. This project demonstrates how structure, design, and logic come together to create interactive web applications.
Projects like this are great for strengthening your JavaScript fundamentals and understanding how UI and logic work together in real web applications.
Conclusion
If you are learning web development, building projects like this calculator is a great way to practice your skills. Try extending this project by adding keyboard support, history tracking, or additional operations.
Follow SmartTechTip for more web development tutorials, coding tips, and beginner-friendly projects.
