Calcolatrice script by @garghy64 - Codewith.it

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

References

<h4>Titolo di intestazione di quarto livello
mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.
<blockquote>Inserisce citazioni in un documento HTML
<tbody>Definisce il contenuto principale di una tabella.
<a>Inserisce link e collegamenti ipertestuali
<ol>Crea liste ordinate o numerate.

Users

Log in to search for users

Explore

Find inspiration

angoli e shadow

Neon Flux - Visual Design in Motio

Modulo multi Processo

Hänsel e Gretel

classifica serie a

Palinsesto Radio

Scuola G.Galilei.html

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