Calcolatrice Top by @lion-h - Codewith.it

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

References

targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
srcIndica la provenienza di una risorsa esterna (tramite URL).
<tfoot>Definisce il footer o sezione inferiore di una tabella.
<embed>Tag per l'incorporamento di contenuti multimediali
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione
<th>Definisce una cella di intestazione di una tabella HTML.

Users

Log in to search for users

Explore

Find inspiration

Harrel Lola DIV CSS

Prep. Esame pt.3

Color Assigment

esercizio esame \"if else\" in html

Aurora Flux — Concept Design

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="it">
<head>
    <!-- Definizione del tipo di documento e lingua -->
    <meta charset="UTF-8">
    <!-- Configurazione per la visualizzazione su dispositivi mobili -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Titolo della pagina -->
    <title>Calcolatrice</title>
    <!-- Collegamento al file CSS per lo stile -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Contenitore principale della calcolatrice -->
    <div class="calculator">
        <!-- Campo di testo per visualizzare i numeri e i risultati -->
        <input type="text" id="display" disabled>
        <!-- Contenitore per i pulsanti -->
        <div class="buttons">
            <!-- Pulsanti per le operazioni e i numeri -->
            <button onclick="clearDisplay()">C</button> <!-- Pulsante per cancellare tutto -->
            <button onclick="deleteLast()">DEL</button> <!-- Pulsante per eliminare l'ultimo carattere -->
            <button onclick="appendToDisplay('/')">/</button> <!-- Pulsante per la divisione -->
            <button onclick="appendToDisplay('*')">*</button> <!-- Pulsante per la moltiplicazione -->
            <button onclick="appendToDisplay('7')">7</button> <!-- Pulsante per il numero 7 -->
            <button onclick="appendToDisplay('8')">8</button> <!-- Pulsante per il numero 8 -->
            <button onclick="appendToDisplay('9')">9</button> <!-- Pulsante per il numero 9 -->
            <button onclick="appendToDisplay('-')">-</button> <!-- Pulsante per la sottrazione -->
            <button onclick="appendToDisplay('4')">4</button> <!-- Pulsante per il numero 4 -->
            <button onclick="appendToDisplay('5')">5</button> <!-- Pulsante per il numero 5 -->
            <button onclick="appendToDisplay('6')">6</button> <!-- Pulsante per il numero 6 -->
            <button onclick="appendToDisplay('+')">+</button> <!-- Pulsante per l'addizione -->
            <button onclick="appendToDisplay('1')">1</button> <!-- Pulsante per il numero 1 -->
            <button onclick="appendToDisplay('2')">2</button> <!-- Pulsante per il numero 2 -->
            <button onclick="appendToDisplay('3')">3</button> <!-- Pulsante per il numero 3 -->
            <button onclick="calculate()">=</button> <!-- Pulsante per calcolare il risultato -->
            <button onclick="appendToDisplay('0')" class="zero">0</button> <!-- Pulsante per il numero 0 -->
            <button onclick="appendToDisplay('.')">.</button> <!-- Pulsante per il punto decimale -->
        </div>
    </div>
    <!-- Collegamento al file JavaScript per la logica -->
    <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 */
}

// Funzione per aggiungere un valore al campo di testo
function appendToDisplay(value) {
    document.getElementById('display').value += value; // Aggiunge il valore al campo di testo
}

// Funzione per cancellare tutto il contenuto del campo di testo
function clearDisplay() {
    document.getElementById('display').value = ''; // Imposta il campo di testo vuoto
}

// Funzione per eliminare l'ultimo carattere inserito
function deleteLast() {
    let display = document.getElementById('display'); // Ottiene il campo di testo
    display.value = display.value.slice(0, -1); // Rimuove l'ultimo carattere
}

// Funzione per calcolare il risultato dell'espressione
function calculate() {
    let display = document.getElementById('display'); // Ottiene il campo di testo
    try {
        // Usa la funzione eval() per calcolare l'espressione
        display.value = eval(display.value);
    } catch (e) {
        // Se c'è un errore (es. sintassi non valida), mostra "Errore"
        display.value = 'Errore';
    }
}