Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 4 views

    WT4 (1) 1

    Uploaded by

    saurabhbborate0621
    The document describes a simple calculator application with HTML, CSS, and JavaScript code. It includes the code for the HTML, CSS, and JavaScript files that are used to build the calculator interface and functionality.

    Copyright:

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

    WT4 (1) 1

    Uploaded by

    saurabhbborate0621
    4 views3 pages
    The document describes a simple calculator application with HTML, CSS, and JavaScript code. It includes the code for the HTML, CSS, and JavaScript files that are used to build the calculator interface and functionality.

    Original Description:

    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?

    The document describes a simple calculator application with HTML, CSS, and JavaScript code. It includes the code for the HTML, CSS, and JavaScript files that are used to build the calculator interface and functionality.

    Copyright:

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

    WT4 (1) 1

    Uploaded by

    saurabhbborate0621
    The document describes a simple calculator application with HTML, CSS, and JavaScript code. It includes the code for the HTML, CSS, and JavaScript files that are used to build the calculator interface and functionality.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    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