Calcolatrice Top by @lion-h - Codewith.it

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

Referenze

<aside>Definisce un contenuto separato dal testo perincipale
<tr>Definisce le righe di una tabella (rows)
<pre>Indica una parte di testo preformattato
typeSpecifica la tipologia/funzione di un elemento.
<input>Definisce un area di input per l'invio di dati e informazioni
<h1>Titolo di intestazione di primo livello

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Obiettivi futuri.html

UX / Web Design, Freelance – Pro

Scheda: immagine a sinistra + tab

Esercitazione 1

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!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';
    }
}