Scribd Logo
Upload

Welcome to Scribd!

  • 30 views

    4

    Uploaded by

    Saif Jutt
    The document defines the code for a basic calculator interface with a display and buttons. Styling is applied to structure the calculator layout into a display div and button grid. JavaScript functions handle button clicks to append numbers/operators, clear the display, or calculate the expression.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd

    4

    Uploaded by

    Saif Jutt
    30 views2 pages
    The document defines the code for a basic calculator interface with a display and buttons. Styling is applied to structure the calculator layout into a display div and button grid. JavaScript functions handle button clicks to append numbers/operators, clear the display, or calculate the expression.

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document defines the code for a basic calculator interface with a display and buttons. Styling is applied to structure the calculator layout into a display div and button grid. JavaScript functions handle button clicks to append numbers/operators, clear the display, or calculate the expression.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    30 views2 pages

    4

    Uploaded by

    Saif Jutt
    The document defines the code for a basic calculator interface with a display and buttons. Styling is applied to structure the calculator layout into a display div and button grid. JavaScript functions handle button clicks to append numbers/operators, clear the display, or calculate the expression.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    of 2

    <!

    DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    body {
    height: 100vh;
    margin: 0;
    }

    width: 300px;
    }

    #display {
    background-color: #f0f0f0;
    padding: 10px;
    text-align: right;
    }

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

    button {
    background-color: #e0e0e0;
    border: none;
    padding: 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
    }

    button:hover {
    background-color: #d0d0d0;
    }
    </style>
    </head>
    <body>

    <div id="calculator">
    <div id="display"></div>
    <div id="buttons">
    <button onclick="clearDisplay()">C</button>
    <button onclick="appendToDisplay('/')">/</button>
    <button onclick="appendToDisplay('*')">*</button>
    <button onclick="backspace()">←</button>

    <button onclick="appendToDisplay('7')">7</button>
    <button onclick="appendToDisplay('8')">8</button>
    <button onclick="appendToDisplay('9')">9</button>
    <button onclick="appendToDisplay('-')">-</button>

    <button onclick="appendToDisplay('4')">4</button>
    <button onclick="appendToDisplay('5')">5</button>
    <button onclick="appendToDisplay('6')">6</button>
    <button onclick="appendToDisplay('+')">+</button>
    <button onclick="appendToDisplay('1')">1</button>
    <button onclick="appendToDisplay('2')">2</button>
    <button onclick="appendToDisplay('3')">3</button>
    <button onclick="appendToDisplay('0')">0</button>

    <button onclick="calculate()">=</button>
    </div>
    </div>

    <script>
    let display = document.getElementById('display');

    function appendToDisplay(value) {
    display.textContent += value;
    }

    function clearDisplay() {
    display.textContent = '';
    }nt = 'Error';
    }
    }
    </script>

    </body>
    </html>

    You might also like