Today, I’m going to share how I created this minimalistic and functional calculator UI. It’s perfect for anyone looking to learn the basics of front-end development or simply create a cool project. So, let’s dive right into it!
What You’ll Learn
- Structuring the calculator with HTML.
- Styling the UI with CSS.
- Adding functionality with JavaScript to make the calculator work.
Create the HTML Structure
The first step is to structure the calculator in HTML. Here’s the basic code:
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="styles.css">
</head>
<body>
<div class="calculator">
<div class="display">
<span id="previousValue"></span>
<span id="currentValue">0</span>
</div>
<div class="buttons">
<button class="btn" data-action="clear">C</button>
<button class="btn" data-action="clear-entry">CE</button>
<button class="btn" data-action="delete">⌫</button>
<button class="btn operator" data-action="divide">÷</button>
<button class="btn number">7</button>
<button class="btn number">8</button>
<button class="btn number">9</button>
<button class="btn operator" data-action="multiply">×</button>
<button class="btn number">4</button>
<button class="btn number">5</button>
<button class="btn number">6</button>
<button class="btn operator" data-action="subtract">−</button>
<button class="btn number">1</button>
<button class="btn number">2</button>
<button class="btn number">3</button>
<button class="btn operator" data-action="add">+</button>
<button class="btn number">0</button>
<button class="btn" data-action="decimal">.</button>
<button class="btn equals" data-action="equals">=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Styling with CSS
To make the calculator look sleek and functional, I styled it using CSS. Here’s the code:
codebody {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.calculator {
background-color: #e3e3e3;
padding: 20px;
border-radius: 10px;
width: 300px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.display {
background-color: #d7dee2;
border-radius: 5px;
padding: 20px;
text-align: right;
font-size: 2rem;
margin-bottom: 20px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
padding: 20px;
font-size: 1.2rem;
border: none;
border-radius: 5px;
cursor: pointer;
}
button.operator {
background-color: #f7b1ab;
}
button.number {
background-color: #ffffff;
}
button.equals {
background-color: #fa8072;
grid-column: span 4;
}
button:hover {
opacity: 0.8;
}
Adding Functionality with JavaScript
Now, the magic happens. Let’s make the calculator functional using JavaScript.
codeconst previousValue = document.getElementById("previousValue");
const currentValue = document.getElementById("currentValue");
const buttons = document.querySelectorAll(".btn");
let currentOperand = "";
let previousOperand = "";
let operation = null;
function updateDisplay() {
currentValue.innerText = currentOperand || "0";
previousValue.innerText = previousOperand + (operation || "");
}
buttons.forEach(button => {
button.addEventListener("click", () => {
const action = button.dataset.action;
const value = button.innerText;
if (button.classList.contains("number")) {
if (currentOperand === "0") currentOperand = "";
currentOperand += value;
} else if (action === "decimal") {
if (!currentOperand.includes(".")) {
currentOperand += ".";
}
} else if (action === "clear") {
currentOperand = "";
previousOperand = "";
operation = null;
} else if (action === "clear-entry") {
currentOperand = "";
} else if (action === "delete") {
currentOperand = currentOperand.slice(0, -1);
} else if (button.classList.contains("operator")) {
if (currentOperand === "") return;
if (previousOperand !== "") calculate();
operation = action;
previousOperand = currentOperand;
currentOperand = "";
} else if (action === "equals") {
if (operation === null || currentOperand === "") return;
calculate();
operation = null;
}
updateDisplay();
});
});
function calculate() {
const prev = parseFloat(previousOperand);
const curr = parseFloat(currentOperand);
if (isNaN(prev) || isNaN(curr)) return;
switch (operation) {
case "add":
currentOperand = prev + curr;
break;
case "subtract":
currentOperand = prev - curr;
break;
case "multiply":
currentOperand = prev * curr;
break;
case "divide":
currentOperand = prev / curr;
break;
default:
return;
}
previousOperand = "";
currentOperand = currentOperand.toString();
}
How It Works
- HTML: Defines the calculator’s structure with buttons for numbers, operators, and actions.
- CSS: Styles the calculator for a clean and modern look.
- JavaScript: Handles all the button interactions, updates the display, and performs calculations.
Final Thoughts
This project taught me the importance of combining HTML, CSS, and JavaScript to create interactive web applications. You can customize the design and add advanced features like memory functions or scientific calculations.