Scribd Logo
Importer

Bienvenue sur Scribd !

  • WT Calc

    Transféré par

    ranjan
    5 vues4 pages
    calculator

    Titre original

    wt_calc (1)

    Copyright

    © © All Rights Reserved

    Formats disponibles

    DOCX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    calculator

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    5 vues4 pages

    WT Calc

    Transféré par

    ranjan
    calculator

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 4

    VARSHA

    1CR20CS221

    HTML
    <!DOCTYPE html>
    <html>
    <head>
    <title>Calculator</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    <h1>Shreya NS 1CR20CS221</h1>
    <div class="calculator">
    <input type="text" id="input">

    <div class="keypad">
    <button onclick="appendToInput('1')">1</button>
    <button onclick="appendToInput('2')">2</button>
    <button onclick="appendToInput('3')">3</button>
    <button onclick="appendToInput('+')">+</button>
    <button onclick="appendToInput('4')">4</button>
    <button onclick="appendToInput('5')">5</button>
    <button onclick="appendToInput('6')">6</button>
    <button onclick="appendToInput('-')">-</button>
    <button onclick="appendToInput('7')">7</button>
    <button onclick="appendToInput('8')">8</button>
    <button onclick="appendToInput('9')">9</button>
    <button onclick="appendToInput('*')">&times;</button>
    <button onclick="appendToInput('0')">0</button>
    <button onclick="appendToInput('.')">.</button>
    <button onclick="clearInput()">C</button>
    <button onclick="calculate()">=</button>
    <button onclick="appendToInput('/')">&divide;</button>
    </div>
    </div>
    <script src="script.js"></script>
    </body>
    </html>

    CSS

    .calculator {
    width: 200px;
    margin: 0 auto;
    text-align: center;
    }
    input {
    width: 100%;
    margin-bottom: 10px;
    font-size: 24px;
    text-align: right;
    padding: 5px;
    }
    button {
    width: 50px;
    height: 50px;
    font-size: 24px;
    border: none;
    outline: none;
    background-color: #eee;
    margin: 5px;
    cursor: pointer;
    }
    button:hover {
    background-color: #ddd;
    }
    .keypad {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 5px;
    }
    h1 {
    text-align: center;
    }

    JS

    let input = document.getElementById("input");

    function appendToInput(value) {
    input.value += value;
    }

    function clearInput() {
    input.value = "";
    }

    function calculate() {
    try {
    input.value = eval(input.value);
    } catch (error) {
    input.value = "Error";
    }
    }

    OUTPUT

    Vous aimerez peut-être aussi