Introduction:
In the world of web development, creating interactive and dynamic features is a common and exciting endeavor. One such basic yet essential project is building a calculator using HTML for structure, CSS for styling, and JavaScript for functionality. In this tutorial, we'll walk through the step-by-step process of creating a simple calculator that can perform basic arithmetic operations.
Prerequisites:
Before diving into the tutorial, make sure you have a basic understanding of HTML, CSS, and JavaScript. Having a code editor such as Visual Studio Code or Sublime Text can also be helpful.
Step 1: HTML structure
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Calculator</title><link rel="stylesheet" href="styles.css" /></head><body><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><script src="script.js"></script></body></html>
Step 2: Styling with CSS
Create a separate CSS file (styles.css) to style the calculator:
/* 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;
}
Step 3: Implementing the JavaScript logic
Create another file (script.js) for the JavaScript code:
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));
});
Conclusion:
Congratulations! You've successfully created a simple calculator using HTML, CSS, and JavaScript. This project serves as a great introduction to basic web development concepts and can be extended for additional features and improvements. Feel free to experiment, enhance, and customize the calculator further based on your preferences and skills.