Lets Make a Simple Calculator using Html, Css, JavaScript | Source Code ✔

17.6K views

Summary

Creating an HTML Calculator using HTML, CSS, and JS Build a basic calculator using HTML, CSS, and JavaScript. Create the calculator&amp;amp;amp;#039;s layout with HTML, style it with CSS, and add functionality with JavaScript. Define functions for calculations, implement event listeners for button clicks, and display results on the screen. This project showcases fundamental web development skills and interactive functionality.

Creating a Simple Calculator using HTML, CSS, and JavaScript

In this article, we will create a basic calculator that can perform addition, subtraction, multiplication, and division using HTML, CSS, and JavaScript.

HTML Structure

First, let's create the HTML structure for our calculator:

See Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="shortcut icon" href="https://pastatic.picsart.com/cms-pastatic/4985382d-2ebc-4b84-ab75-a8a2e5c09db9.png?type=webp&to=crop&r=250" type="image/x-icon">
   <title>Calculator</title>
    <style>
        :root {
            --primary-color: #007bff;
            --secondary-color: #6c757d;
            --success-color: #28a745;
            --danger-color: #dc3545;
            --light-color: #f8f9fa;
            --dark-color: #343a40;
        }

        body {
            font-family: 'Arial', sans-serif;
            background-color: var(--secondary-color);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .calculator {
            background-color: var(--dark-color);
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            padding: 20px;
            width: 100%;
            max-width: 400px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
        }

        #display {
            width: 98%;
            height: 60px;
            font-size: 24px;
            text-align: right;
            margin-bottom: 10px;
            padding: 5px;
            border: none;
            background-color: var(--light-color);
            color: var(--dark-color);
            border-radius: 5px;
        }
        #display:focus {
            outline: none;
        }

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

        button {
            padding: 15px;
            font-size: 18px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: transform 0.1s, background-color 0.3s;
        }

        button:hover {
            transform: scale(1.05);
        }

        .number, .operator {
            background-color: var(--primary-color);
            color: white;
        }

        .clear {
            background-color: var(--danger-color);
            color: white;
        }

        .equals {
            background-color: var(--success-color);
            color: white;
        }

        .legacy-note {
            text-align: center;
            margin-top: 20px;
            font-style: italic;
            color: var(--secondary-color);
        }

        @media (max-width: 480px) {
            .calculator {
                width: 90%;
            }
        }
    </style>
</head>
<body>
    <div class="calculator">
        <input type="text" id="display" placeholder="Enter value" readonly>
        <div class="buttons">
            <button class="clear" onclick="clearDisplay()">C</button>
            <button class="operator" onclick="appendToDisplay('/')">/</button>
            <button class="operator" onclick="appendToDisplay('*')">*</button>
            <button class="operator" onclick="appendToDisplay('-')">-</button>
            <button class="number" onclick="appendToDisplay('7')">7</button>
            <button class="number" onclick="appendToDisplay('8')">8</button>
            <button class="number" onclick="appendToDisplay('9')">9</button>
            <button class="operator" onclick="appendToDisplay('+')">+</button>
            <button class="number" onclick="appendToDisplay('4')">4</button>
            <button class="number" onclick="appendToDisplay('5')">5</button>
            <button class="number" onclick="appendToDisplay('6')">6</button>
            <button class="operator" onclick="appendToDisplay('.')">.</button>
            <button class="number" onclick="appendToDisplay('1')">1</button>
            <button class="number" onclick="appendToDisplay('2')">2</button>
            <button class="number" onclick="appendToDisplay('3')">3</button>
            <button class="equals" onclick="calculate()">=</button>
            <button class="number" onclick="appendToDisplay('0')" style="grid-column: span 2;">0</button>
            <button class="operator" onclick="backspace()">←</button>
        </div>
        <p class="legacy-note">This calculator is an improved version of my early learning Calculator. It is not a modern calculator, but it is a calculator that I can use to practice my skills.</p>
    </div>

    <script>
        function appendToDisplay(value) {
            document.getElementById('display').value += value;
        }

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

        function calculate() {
            try {
                document.getElementById('display').value = eval(document.getElementById('display').value);
            } catch (error) {
                document.getElementById('display').value = 'Error';
            }
        }

        function backspace() {
            let currentValue = document.getElementById('display').value;
            document.getElementById('display').value = currentValue.substr(0, currentValue.length - 1);
        }
    </script>
</body>
</html>