<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculadora</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <div class="display">
            <div id="history" class="history"></div>
            <div id="result" class="result">0</div>
        </div>
        <div class="buttons">
            <button class="btn" onclick="clearAll()">AC</button>
            <button class="btn" onclick="clearEntry()">C</button>
            <button class="btn" onclick="backspace()">⌫</button>
            <button class="btn operator" onclick="appendOperator('/')">÷</button>

            <button class="btn" onclick="appendNumber(7)">7</button>
            <button class="btn" onclick="appendNumber(8)">8</button>
            <button class="btn" onclick="appendNumber(9)">9</button>
            <button class="btn operator" onclick="appendOperator('*')">×</button>

            <button class="btn" onclick="appendNumber(4)">4</button>
            <button class="btn" onclick="appendNumber(5)">5</button>
            <button class="btn" onclick="appendNumber(6)">6</button>
            <button class="btn operator" onclick="appendOperator('-')">−</button>

            <button class="btn" onclick="appendNumber(1)">1</button>
            <button class="btn" onclick="appendNumber(2)">2</button>
            <button class="btn" onclick="appendNumber(3)">3</button>
            <button class="btn operator" onclick="appendOperator('+')">+</button>

            <button class="btn" onclick="appendNumber(0)">0</button>
            <button class="btn" onclick="appendDot()">.</button>
            <button class="btn" onclick="calculate()">=</button>
        </div>
        <div class="history-display">
            <h3>Histórico</h3>
            <div id="operation-history"></div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f4f4f4;
}

.calculator {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 20px;
    max-width: 400px;
    width: 100%;
}

.display {
    background-color: #333;
    color: #fff;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 20px;
}

.history {
    font-size: 14px;
    color: #aaa;
    height: 20px;
    overflow: hidden;
}

.result {
    font-size: 36px;
    height: 50px;
    text-align: right;
}

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

.btn {
    padding: 20px;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    background-color: #f0f0f0;
    cursor: pointer;
}

.btn.operator {
    background-color: #ff9500;
    color: #fff;
}

.btn:hover {
    background-color: #ddd;
}

.history-display {
    margin-top: 20px;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 5px;
}

#operation-history {
    max-height: 150px;
    overflow-y: auto;
    font-size: 14px;
}

let currentInput = '';
let history = '';
let operationHistory = [];

function appendNumber(number) {
    // Adiciona o número ao input atual
    currentInput += number;
    updateDisplay();
}

function appendOperator(operator) {
    // Adiciona o operador ao input atual
    if (currentInput === '' && operator !== '-') return;
    if (isOperator(currentInput.slice(-1))) return;
    currentInput += operator;
    updateDisplay();
}

function isOperator(char) {
    // Verifica se o caractere é um operador
    return ['+', '-', '*', '/'].includes(char);
}

function appendDot() {
    // Adiciona um ponto decimal
    if (currentInput.includes('.')) return;
    currentInput += '.';
    updateDisplay();
}

function clearAll() {
    // Limpa toda a calculadora
    currentInput = '';
    history = '';
    updateDisplay();
}

function clearEntry() {
    // Limpa apenas a última entrada
    currentInput = '';
    updateDisplay();
}

function backspace() {
    // Remove o último caractere
    currentInput = currentInput.slice(0, -1);
    updateDisplay();
}

function calculate() {
    try {
        // Calcula a expressão atual
        const result = eval(currentInput);
        operationHistory.push(`${currentInput} = ${result}`);
        history = currentInput + ' = ' + result;
        currentInput = result.toString();
        updateHistoryDisplay();
        updateDisplay();
    } catch (e) {
        // Em caso de erro, limpa a entrada
        currentInput = 'Erro';
        setTimeout(clearEntry, 1500);
    }
}

function updateDisplay() {
    // Atualiza o visor da calculadora
    document.getElementById('result').innerText = currentInput || '0';
    document.getElementById('history').innerText = history;
}

function updateHistoryDisplay() {
    // Atualiza o histórico de operações
    const historyElement = document.getElementById('operation-history');
    historyElement.innerHTML = operationHistory.map(op => `<p>${op}</p>`).join('');
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.