Calcolatrice by @lion-h - Codewith.it

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

References

<q>Indica una parte di testo come citazione breve
crossoriginGestisce richieste tra documenti provenienti da origini differenti.
formSpecifica a quale form appartiene un elemento.
<h4>Titolo di intestazione di quarto livello
enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
langSpecifica la lingua del contenuto di un elemento

Users

Log in to search for users

Explore

Find inspiration

Le Meraviglie d\\\\\\\\

Twitchpage3okok

Esercitazione 1

4395-Indovina numero

esercitazione 1

Form per il torneo misto disfo

Basketball Legends

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>

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