Calcolatrice script by @garghy64 - Codewith.it

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

References

hreflangConsente di dichiarare la lingua del documento collegato.
<h3>Titolo di intestazione di terzo livello
valueValore alfanumerico o booleano contenuto in un elemento
multipart/form-dataCodifica dei caratteri di un form
methodDetermina il metodo di invio dei dati di un form al server
<pre>Indica una parte di testo preformattato

Users

Log in to search for users

Explore

Find inspiration

Lola Harrel CSS Styling Assignment

Con nome bandiera(2)

My Anime Blog - Ninjas and Dragons

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>

/* Stile del corpo della pagina */
body {
    display: flex;
    justify-content: center; /* Centra orizzontalmente */
    align-items: center; /* Centra verticalmente */
    height: 100vh; /* Altezza della viewport */
    margin: 0;
    background-color: #f4f4f4; /* Colore di sfondo */
    font-family: Arial, sans-serif; /* Font di base */
}

/* Stile del contenitore della calcolatrice */
.calculator {
    background-color: #333; /* Colore di sfondo */
    padding: 20px; /* Spaziatura interna */
    border-radius: 10px; /* Bordi arrotondati */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Ombra */
}

/* Stile del campo di testo per visualizzare i numeri */
#display {
    width: 100%;
    height: 50px;
    background-color: #222; /* Colore di sfondo */
    color: #fff; /* Colore del testo */
    border: none; /* Rimuove il bordo */
    text-align: right; /* Allinea il testo a destra */
    padding: 10px; /* Spaziatura interna */
    font-size: 24px; /* Dimensione del font */
    border-radius: 5px; /* Bordi arrotondati */
    margin-bottom: 10px; /* Spaziatura inferiore */
}

/* Stile del contenitore dei pulsanti */
.buttons {
    display: grid; /* Usa un layout a griglia */
    grid-template-columns: repeat(4, 1fr); /* 4 colonne di uguale larghezza */
    gap: 10px; /* Spazio tra i pulsanti */
}

/* Stile dei pulsanti */
button {
    background-color: #444; /* Colore di sfondo */
    color: #fff; /* Colore del testo */
    border: none; /* Rimuove il bordo */
    padding: 20px; /* Spaziatura interna */
    font-size: 18px; /* Dimensione del font */
    border-radius: 5px; /* Bordi arrotondati */
    cursor: pointer; /* Cambia il cursore al passaggio del mouse */
    transition: background-color 0.3s; /* Transizione per l'effetto hover */
}

/* Effetto hover sui pulsanti */
button:hover {
    background-color: #555; /* Cambia colore al passaggio del mouse */
}

/* Stile speciale per il pulsante "0" */
button.zero {
    grid-column: span 2; /* Occupa due colonne */
}

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;
        }
    });
});