Scribd Logo
Upload

Welcome to Scribd!

  • WT4 (1) 1

    Uploaded by

    saurabhbborate0621
    3 views3 pages
    Web technology practical code

    Original Title

    WT4[1]-1

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Web technology practical code

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    3 views3 pages

    WT4 (1) 1

    Uploaded by

    saurabhbborate0621
    Web technology practical code

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 3

    Saurabh Borate Practical No-4 Roll no- 10 Div-A

    Index.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Calculator</title>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <div class="calculator">
    <input type="text" id="result" readonly>
    <div class="buttons">
    <button onclick="appendToDisplay('1')">1</button>
    <button onclick="appendToDisplay('2')">2</button>
    <button onclick="appendToDisplay('3')">3</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('7')">7</button>
    <button onclick="appendToDisplay('8')">8</button>
    <button onclick="appendToDisplay('9')">9</button>
    <button onclick="appendToDisplay('*')">*</button>
    <button onclick="appendToDisplay('0')">0</button>
    <button onclick="appendToDisplay('.')">.</button>
    <button onclick="clearDisplay()">C</button>
    <button onclick="appendToDisplay('/')">/</button>
    <button onclick="calculate()">=</button>
    </div>
    </div>
    <script src="script.js"></script>
    </body>
    </html>

    Style.css
    .calculator {
    width: 300px;
    margin: 100px auto;
    padding: 20px;
    border: 2px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    #result {
    width: calc(100% - 40px);
    margin-bottom: 10px;
    padding: 10px;
    font-size: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
    }
    .buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 5px;
    }
    button {
    padding: 10px;
    font-size: 18px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f5f5f5;
    cursor: pointer;
    transition: background-color 0.3s;
    }
    button:hover {
    background-color: #e0e0e0;
    }
    Scrip
    t.js
    function appendToDisplay(value) {
    document.getElementById('result').value += value;
    }
    function clearDisplay() {
    document.getElementById('result').value = '';
    }
    function calculate() {
    try {
    var result = eval(document.getElementById('result').value);
    if (isNaN(result)) {
    throw "Invalid input!";
    }
    document.getElementById('result').value = result;
    } catch (error) {
    alert(error);
    }
    }
    Output :-

    You might also like