Code for simple calculator…

3 min readJan 11, 2025

These codes work together to create a fully functional and visually appealing calculator.

HTML

HTML builds the calculator, This is the structure of the calculator. It contains a display area where the numbers and results are shown and a set of buttons for numbers, operators (like +, -), and functions (C, DEL, =). Each button has an action linked to it, like clearing the screen, deleting a number, or performing a calculation.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cute Calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="calculator">
        <div class="display" id="display"></div>
        <div class="buttons">
            <button onclick="clearDisplay()">C</button>
            <button onclick="deleteLast()">DEL</button>
            <button onclick="appendSymbol('%')">%</button>
            <button onclick="appendSymbol('/')">÷</button>
            <button onclick="appendSymbol('7')">7</button>
            <button onclick="appendSymbol('8')">8</button>
            <button onclick="appendSymbol('9')">9</button>
            <button onclick="appendSymbol('*')">×</button>
            <button onclick="appendSymbol('4')">4</button>
            <button onclick="appendSymbol('5')">5</button>
            <button onclick="appendSymbol('6')">6</button>
            <button onclick="appendSymbol('-')">−</button>
            <button onclick="appendSymbol('1')">1</button>
            <button onclick="appendSymbol('2')">2</button>
            <button onclick="appendSymbol('3')">3</button>
            <button onclick="appendSymbol('+')">+</button>
            <button onclick="appendSymbol('0')">0</button>
            <button onclick="appendSymbol('.')">.</button>
            <button class="equal" onclick="calculate()">=</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

CSS makes it look nice, This styles the calculator to make it look cute and user-friendly. The body has a colorful gradient background, the calculator is centered with rounded corners, and buttons have soft colors with hover effects. The = button is highlighted to make it stand out. The display area is styled to look clean and easy to read.

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(135deg, #ff9a9e, #fad0c4);
    margin: 0;
}

.calculator {
    background: white;
    border-radius: 20px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    padding: 20px;
    width: 300px;
}

.display {
    background: #f7f7f7;
    border-radius: 10px;
    padding: 20px;
    font-size: 2rem;
    text-align: right;
    margin-bottom: 15px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

button {
    background: #ffe4e4;
    border: none;
    border-radius: 10px;
    font-size: 1.2rem;
    padding: 15px;
    cursor: pointer;
    transition: background 0.3s;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

button:hover {
    background: #ffccd5;
}

button:active {
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
}

button.equal {
    grid-column: span 2;
    background: #ff9a9e;
    color: white;
    font-weight: bold;
}

button.equal:hover {
    background: #ff7f87;
}

Java script

JavaScript makes it functional, This is the brain of the calculator. It makes the buttons work. When you click a button, it updates the display. You can also clear the screen, delete the last character, or calculate the result using the = button. It handles all the math and updates the screen accordingly.

let display = document.getElementById('display');

function appendSymbol(symbol) {
    display.innerText += symbol;
}

function clearDisplay() {
    display.innerText = '';
}

function deleteLast() {
    display.innerText = display.innerText.slice(0, -1);
}

function calculate() {
    try {
        display.innerText = eval(display.innerText.replace('÷', '/').replace('×', '*'));
    } catch {
        display.innerText = 'Error';
    }
}

In short, HTML builds the calculator, CSS makes it look nice, and JavaScript makes it functional!

Save the files as index.html, styles.css, and script.js, and test in a browser.

The code is responsive and supports both desktop and mobile devices, ensuring a smooth and enjoyable experience.

— Code with gp…

Code for simple calculator…

Written by Code With Gp

No responses yet