Calcolatrice script by @garghy64 - Codewith.it

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

References

<hr>Inserisce una linea orizzontale
<meta>Definisce i meta dati di una pagina web.
<q>Indica una parte di testo come citazione breve
<td>Definisce una cella di una tabella HTML.
<li>Inserisce voci all'interno di una lista
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione

Users

Log in to search for users

Explore

Find inspiration

Profilo di Salvatore Crapanzano

affettiminoriwill

Heads Or Tails Random Tally

Esercizio cicli2

Anita Angiolini

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