Learn how to build an iPhone calculator-style using HTML, CSS, and JavaScript. This step-by-step guide includes a sleek UI design and full source code to help beginner developers create a functional and stylish calculator.
1️⃣ Introduction
Hi everyone! Today, in this article, we’re going to talk about a big project where we want to build an iPhone calculator together using HTML, CSS, and JavaScript. This calculator will be fully functional and do the work that calculators do—you can add, subtract, multiply, and divide numbers. It will also have the design of an iPhone calculator with a sleek UI.
At the conclusion of this article, you will see the calculator live by clicking on the button that says “View Demo,” and you can try out how it works. This project will be really interesting and a great learning experience for beginner developers looking to improve their JavaScript skills and build responsive web applications.
2️⃣ Project Setup
Before we start building the iPhone-style calculator, let’s set up our project by creating the necessary files and configuring them properly. To keep everything organized, create a folder for the project and name it “iPhone Calculator”. Inside this folder, create three files: index.html, style.css, and script.js.
iPhone Calculator
—Index.html
—Style.html
—script.js
This setup helps keep the HTML, CSS, and JavaScript files well-structured and makes the code easier to manage.
3️⃣ Building the Calculator UI (HTML & CSS)
Now that our project is set up, let’s start building the calculator’s user interface (UI) using HTML and CSS. Our goal is to design a calculator that closely resembles the one on an iPhone, featuring a sleek layout and rounded buttons.
✅Structuring the Calculator with HTML
First, open your index.html file and paste the following code inside the <body> tag
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Codeweave24 - iPhone Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator-wrapper">
<p id="inputDisplay" class="input-display"></p>
<p id="resultDisplay" class="result-display"></p>
<div class="button-grid">
<button class="button-gray" onclick="calculator('C')">C</button>
<button class="button-gray" onclick="calculator('+/-')">+/-</button>
<button class="button-gray" onclick="calculator('%')">%</button>
<button class="button-orange" onclick="calculator('÷')">÷</button>
<button onclick="calculator('7')">7</button>
<button onclick="calculator('8')">8</button>
<button onclick="calculator('9')">9</button>
<button class="button-orange" onclick="calculator('×')">×</button>
<button onclick="calculator('4')">4</button>
<button onclick="calculator('5')">5</button>
<button onclick="calculator('6')">6</button>
<button class="button-orange" onclick="calculator('-')">-</button>
<button onclick="calculator('1')">1</button>
<button onclick="calculator('2')">2</button>
<button onclick="calculator('3')">3</button>
<button class="button-orange" onclick="calculator('+')">+</button>
<button class="button-zero" onclick="calculator('0')">0</button>
<button onclick="calculator('.')">.</button>
<button class="button-orange" onclick="calculator('=')">=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>Explanation:
- HTML Structure (
<!DOCTYPE html>.: Defines the document as an HTML5 page. - <HTML tag>.: starts the webpage.
- Head Section (
<head>).: Contains meta information, including viewport settings for mobile responsiveness. - Body Section (
<body>).: This is where the calculator elements are placed. - Calculator Container (
<div class="calculator-wrapper">).: This is the main container that holds the entire calculator. - (
<p id="inputDisplay">.: Shows the numbers and operations entered by the user. -
<p id="resultDisplay">.: Shows the calculation result when the=button is pressed. - Calculator Buttons (
<div class="button-grid">).: This section contains all the buttons arranged in a grid layout. .button-gray.: Used for special functions likeC,+/-, and%..button-orange.:Used for operator buttons (+,-,×,÷,=).
✅Styling the Calculator with CSS
Now, open your style.css file and paste the following Code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
body {
background-color: #f7f7f7;
display: flex;
justify-content: center;
align-items: center;
height: 88vh;
margin: 0;
}
.calculator-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
min-height: 50%;
max-width: 400px;
background-color: #000;
margin-top: 50px;
border-radius: 50px;
}
.input-display {
width: 100%;
height: 15vh;
padding: 0 20px;
color: #fff;
font-size: 3rem;
display: flex;
justify-content: flex-end;
align-items: flex-end;
word-break: break-all;
}
.result-display {
width: 100%;
height: 15vh;
padding: 0 20px;
color: #fff;
font-size: 4rem;
display: flex;
justify-content: flex-end;
align-items: flex-start;
word-break: break-all;
}
.button-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
padding: 10px;
}
button {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #333;
color: #fff;
font-size: 2rem;
border: none;
cursor: pointer;
transition: background-color 0.2s;
}
button:active {
background-color: #555;
}
.button-gray {
background-color: #A5A5A5;
color: #000;
}
.button-gray:active {
background-color: #C5C5C5;
}
.button-orange {
background-color: #FF9500;
color: #fff;
}
.button-orange:active {
background-color: #FFB84D;
}
.button-zero {
grid-column: span 2;
width: 100%;
border-radius: 40px;
text-align: left;
padding-left: 30px;
}
Explanation:
CSS code styles the calculator to look like an iPhone calculator
- * {}.: Resets default margin & padding for all elements.
- body {}.: ets a light gray background (
#f7f7f7).Centers the calculator in the middle of the screen. - .calculator-wrapper {}.: This is the main box holding everything.
- .input-display {}, .result-display {}.: These are the two areas where numbers & results appear.
- .button-grid{}.: Creates a grid layout with 4 columns for the buttons.
4️⃣ Adding Functionality with JavaScript
What does this JavaScript do?
This JavaScript controls the calculator’s behavior it updates the display when buttons are pressed and performs calculations.
last open your script.js file and paste the following code:
function calculator(input) {
let display = document.getElementById("inputDisplay");
let result = document.getElementById("resultDisplay");
if (input === "C") {
display.innerHTML = "0";
result.innerHTML = "";
} else if (input === "+/-") {
if (display.innerHTML === "0") return;
if (display.innerHTML.startsWith("-")) {
display.innerHTML = display.innerHTML.slice(1);
} else {
display.innerHTML = "-" + display.innerHTML;
}
} else if (input === "=") {
try {
let calculated = eval(display.innerHTML.replace(/×/g, "*").replace(/÷/g, "/"));
result.innerHTML = calculated.toLocaleString("en-US");
} catch (err) {
result.innerHTML = "ERROR";
}
} else {
if (display.innerHTML === "0" && !isNaN(input)) {
display.innerHTML = input;
} else {
display.innerHTML += input;
}
let numericValue = display.innerHTML.replace(/,/g, "").replace(/×/g, "*").replace(/÷/g, "/");
if (!isNaN(numericValue)) {
display.innerHTML = Number(numericValue).toLocaleString("en-US");
}
}
}
window.onload = function () {
document.getElementById("inputDisplay").innerHTML = "0";
};Explanation:
let display = document.getElementById("inputDisplay");
let result = document.getElementById("resultDisplay");
display → Shows what the user types (numbers & symbols).
result → Shows the final answer when = is pressed.
if (input === "C") {
display.innerHTML = "0";
result.innerHTML = "";
}
When C is clicked, it resets everything to 0.
if (input === "+/-") {
if (display.innerHTML.startsWith("-")) {
display.innerHTML = display.innerHTML.slice(1);
} else {
display.innerHTML = "-" + display.innerHTML;
}
}
If the number is positive, it becomes negative.
If it's negative, it becomes positive.
if (input === "=") {
try {
let calculated = eval(display.innerHTML.replace(/×/g, "*").replace(/÷/g, "/"));
result.innerHTML = calculated.toLocaleString("en-US");
} catch (err) {
result.innerHTML = "ERROR";
}
}
eval() solves the math problem (Example: "3+2" → 5).
If there's an error, it shows "ERROR".
window.onload = function () {
document.getElementById("inputDisplay").innerHTML = "0";
};
When the page opens, the calculator starts at 0.
5️⃣ Final Output
6️⃣ Conclusion
In conclusion, we have built a great project, and I say congratulations! This project not only enhances your web development skills but also gives you hands-on experience in structuring a UI, styling it for a sleek look, and adding interactivity with JavaScript. I hope you now understand how to create a responsive and stylish calculator that mimics the real iPhone design. You can further improve this project by adding more features like a history log, scientific functions, or even animations to make it more interactive. Keep coding, keep learning, and happy building!
