Calcolatrice by @lion-h - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<td>Definisce una cella di una tabella HTML.
heightDetermina l'altezza di un elemento HTML in pixel
autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form
idIdentifica univocamente un elemento HTML
actionDetermina la pagina di destinazione a cui verranno inviati i dati di un form HTML
<input>Definisce un area di input per l'invio di dati e informazioni

Users

Log in to search for users

Explore

Find inspiration

Esercizio 2 - 27/11

esercizio:sito web

"esercitazione 6.html"

esercitazione n. 1

X-Dsigner (Blu Eletric)– Web & U

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calcolatrice Semplice</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <input type="text" class="display" id="display" disabled>
        <div class="buttons">
            <button value="1">1</button>
            <button value="2">2</button>
            <button value="3">3</button>
            <button value="+">+</button>
            <button value="4">4</button>
            <button value="5">5</button>
            <button value="6">6</button>
            <button value="-">-</button>
            <button value="7">7</button>
            <button value="8">8</button>
            <button value="9">9</button>
            <button value="*">*</button>
            <button value="C">C</button>
            <button value="0">0</button>
            <button value="=">=</button>
            <button value="/">/</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
}

.calculator {
    display: grid;
    grid-template-rows: auto 1fr;
    width: 200px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.display {
    width: 100%;
    padding: 20px;
    font-size: 1.5em;
    text-align: right;
    border: none;
    background-color: #eee;
    border-radius: 8px 8px 0 0;
}

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

button {
    padding: 20px;
    font-size: 1.2em;
    border: 1px solid #ccc;
    cursor: pointer;
    background-color: #f9f9f9;
    outline: none;
}

button:hover {
    background-color: #e0e0e0;
}

const display = document.getElementById('display');
const buttons = document.querySelectorAll('button');
let currentInput = '';
let operator = '';
let previousInput = '';
let result = '';

buttons.forEach(button => {
    button.addEventListener('click', () => {
        const value = button.value;

        if (['+', '-', '*', '/'].includes(value)) {
            operator = value;
            previousInput = currentInput;
            currentInput = '';
            display.value = previousInput + ' ' + operator + ' ';
        } else if (value === '=') {
            if (previousInput && currentInput) {
                result = eval(previousInput + operator + currentInput);
                display.value = result;
                previousInput = result;
                currentInput = '';
                operator = '';
            }
        } else if (value === 'C') {
            currentInput = '';
            previousInput = '';
            operator = '';
            display.value = '';
        } else {
            currentInput += value;
            display.value += value;
        }
    });
});