Build an iPhone-Style Calculator Using HTML, CSS, and JavaScript

Building an iPhone-Style Calculator Using HTML, CSS, and JavaScript

Calculators are one of the most common applications used in daily life. In this blog post, we will build a sleek and functional iPhone-style calculator using HTML, CSS, and JavaScript. This project is a great way to practice front-end development and understand how basic arithmetic operations are implemented in a web application.

Project Overview

We will create a fully functional calculator that mimics the design of an iPhone calculator. It will support basic arithmetic operations such as addition, subtraction, multiplication, and division. The calculator will also include additional features like percentage calculation and a toggle sign button.

Live Demo

You can try the calculator live here: iPhone-Style Calculator

Technologies Used

• HTML for structuring the calculator interface.
• CSS for styling and making the calculator visually appealing.
• JavaScript for handling calculations and user interactions.

Final Output Preview

Here’s how our final calculator will look:

Step-by-Step Guide to Building the Calculator

1. HTML Structure

We start by creating the structure of our calculator using HTML. The main elements include:

• An input field to display the entered numbers and results.
• Buttons for digits (0-9), arithmetic operations (+, -, *, /), percentage (%), and other functions like clearing the display (C) and toggling the sign (+/-).

<div class="calculator">
    <input type="text" id="display" disabled>
    <div class="buttons">
        <button class="operator" onclick="clearDisplay()">C</button>
        <button class="operator" onclick="toggleSign()">+/-</button>
        <button class="operator" onclick="appendValue('%')">%</button>
        <button class="operator orange" onclick="appendValue('/')">÷</button>
        <button onclick="appendValue('7')">7</button>
        <button onclick="appendValue('8')">8</button>
        <button onclick="appendValue('9')">9</button>
        <button class="orange" onclick="appendValue('*')">×</button>
        <button onclick="appendValue('4')">4</button>
        <button onclick="appendValue('5')">5</button>
        <button onclick="appendValue('6')">6</button>
        <button class="orange" onclick="appendValue('-')">−</button>
        <button onclick="appendValue('1')">1</button>
        <button onclick="appendValue('2')">2</button>
        <button onclick="appendValue('3')">3</button>
        <button class="orange" onclick="appendValue('+')">+</button>
        <button class="zero" onclick="appendValue('0')">0</button>
        <button onclick="appendValue('.')">.</button>
        <button class="orange" onclick="calculate()">=</button>
    </div>
</div>

2. Styling with CSS

To give our calculator an iPhone-like appearance, we use CSS for styling. We set a dark theme, rounded buttons, and a clear display area. Here are some key styles:

.calculator {
    width: 320px;
    background: black;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

button {
    padding: 20px;
    font-size: 1.5em;
    border: none;
    border-radius: 50%;
    background: #333;
    color: white;
    cursor: pointer;
}

button.orange {
    background: #ff9500;
}

3. Adding Functionality with JavaScript

JavaScript is used to make our calculator interactive. We define functions to handle button clicks, perform calculations, and update the display.

function appendValue(value) {
    document.getElementById("display").value += value;
}

function clearDisplay() {
    document.getElementById("display").value = "";
}

function toggleSign() {
    let display = document.getElementById("display");
    if (display.value.startsWith('-')) {
        display.value = display.value.substring(1);
    } else if (display.value !== "") {
        display.value = '-' + display.value;
    }
}

function calculate() {
    try {
        document.getElementById("display").value = eval(document.getElementById("display").value);
    } catch (error) {
        alert("Invalid Expression");
    }
}

Here’s a preview of the calculator in action:

Key Features of the Calculator

• Basic Arithmetic Operations: Addition, subtraction, multiplication, and division.
• Percentage Calculation: Easily compute percentages.
• Toggle Sign (+/-): Change positive numbers to negative and vice versa.
• Clear Button (C): Reset the display for a new calculation.

Final Thoughts

Building this calculator is a great project for learning front-end development. It covers essential concepts like event handling in JavaScript, CSS styling techniques, and HTML structuring. You can further enhance this project by adding features such as memory storage, scientific functions, or even animations for button clicks.

Try building this calculator yourself and experiment with improvements! Happy coding!