Calcolatrice by @lion-h - Codewith.it

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

Referenze

headersDetermina la relazione tra celle e celle di intestazione di una tabella.
crossoriginGestisce richieste tra documenti provenienti da origini differenti.
<datalist>Crea una lista di opzioni pre-definite ed editabili per elementi di input
<br>Inserisce uno spazio vuoto tra due elementi HTML.
<h3>Titolo di intestazione di terzo livello
placeholderDefinisce un testo segnaposto per un elemento input o textarea

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Pro Vercelli Segreteria

Cheeseburger div

Esercitazione Esame

Design & Comunicazione Digitale ??

Gesù nostro signore

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="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>

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
}

.calculator {
    display: grid;
    grid-template-rows: auto 1fr;
    width: 200px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.display {
    width: 100%;
    padding: 20px;
    font-size: 1.5em;
    text-align: right;
    border: none;
    background-color: #eee;
    border-radius: 8px 8px 0 0;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

button {
    padding: 20px;
    font-size: 1.2em;
    border: 1px solid #ccc;
    cursor: pointer;
    background-color: #f9f9f9;
    outline: none;
}

button:hover {
    background-color: #e0e0e0;
}

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