HTML Example

<div class="calculator">
    <div class="calculator-display">
        <div class="previous-operand">0</div>
        <div class="current-operand">0</div>
    </div>
    <div class="calculator-buttons">
        <button class="btn btn-clear">AC</button>
        <button class="btn btn-delete">DEL</button>
        <button class="btn btn-operator">÷</button>
        <button class="btn btn-number">7</button>
        <button class="btn btn-number">8</button>
        <button class="btn btn-number">9</button>
        <button class="btn btn-operator">×</button>
        <button class="btn btn-number">4</button>
        <button class="btn btn-number">5</button>
        <button class="btn btn-number">6</button>
        <button class="btn btn-operator">-</button>
        <button class="btn btn-number">1</button>
        <button class="btn btn-number">2</button>
        <button class="btn btn-number">3</button>
        <button class="btn btn-operator">+</button>
        <button class="btn btn-number btn-zero">0</button>
        <button class="btn btn-number">.</button>
        <button class="btn btn-equals">=</button>
    </div>
</div>

Basic CSS Example

.calculator {
    max-width: 350px;
    margin: 2rem auto;
    background: linear-gradient(145deg, #2c3e50, #34495e);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.calculator-display {
    background: #ecf0f1;
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: right;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.previous-operand {
    font-size: 1.2rem;
    color: #7f8c8d;
    min-height: 1.5rem;
}
.current-operand {
    font-size: 2.5rem;
    font-weight: bold;
    color: #2c3e50;
    word-wrap: break-word;
    word-break: break-all;
}
.calculator-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}
.btn {
    border: none;
    border-radius: 10px;
    padding: 1.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    color: white;
}
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.btn:active {
    transform: translateY(0);
}
.btn-number {
    background: linear-gradient(145deg, #3498db, #2980b9);
}
.btn-number:hover {
    background: linear-gradient(145deg, #2980b9, #1f5f8b);
}
.btn-operator {
    background: linear-gradient(145deg, #e67e22, #d35400);
}
.btn-operator:hover {
    background: linear-gradient(145deg, #d35400, #a04000);
}
.btn-clear {
    background: linear-gradient(145deg, #e74c3c, #c0392b);
}
.btn-clear:hover {
    background: linear-gradient(145deg, #c0392b, #922b21);
}
.btn-delete {
    background: linear-gradient(145deg, #e74c3c, #c0392b);
}
.btn-delete:hover {
    background: linear-gradient(145deg, #c0392b, #922b21);
}
.btn-equals {
    background: linear-gradient(145deg, #27ae60, #229954);
}
.btn-equals:hover {
    background: linear-gradient(145deg, #229954, #1e8449);
}
.btn-zero {
    grid-column: span 2;
}
@media (max-width: 480px) {
    .calculator {
        margin: 1rem;
        padding: 1rem;
    }
    .btn {
        padding: 1.25rem;
        font-size: 1.25rem;
    }
    .current-operand {
        font-size: 2rem;
    }
}

Basic Calculator Logic (JS)

class Calculator {
    constructor() {
        this.previousOperand = '';
        this.currentOperand = '';
        this.operation = undefined;
    }
    
    clear() {
        this.currentOperand = '';
        this.previousOperand = '';
        this.operation = undefined;
    }
    
    delete() {
        this.currentOperand = this.currentOperand.toString().slice(0, -1);
    }
    
    appendNumber(number) {
        if (number === '.' && this.currentOperand.includes('.')) return;
        this.currentOperand = this.currentOperand.toString() + number.toString();
    }
    
    chooseOperation(operation) {
        if (this.currentOperand === '') return;
        if (this.previousOperand !== '') {
            this.compute();
        }
        this.operation = operation;
        this.previousOperand = this.currentOperand;
        this.currentOperand = '';
    }
    
    compute() {
        let computation;
        const prev = parseFloat(this.previousOperand);
        const current = parseFloat(this.currentOperand);
        if (isNaN(prev) || isNaN(current)) return;
        
        switch (this.operation) {
            case '+':
                computation = prev + current;
                break;
            case '-':
                computation = prev - current;
                break;
            case '×':
                computation = prev * current;
                break;
            case '÷':
                computation = prev / current;
                break;
            default:
                return;
        }
        this.currentOperand = computation;
        this.operation = undefined;
        this.previousOperand = '';
    }
    
    updateDisplay() {
        document.querySelector('.current-operand').textContent = this.currentOperand;
        if (this.operation != null) {
            document.querySelector('.previous-operand').textContent = 
                `${this.previousOperand} ${this.operation}`;
        } else {
            document.querySelector('.previous-operand').textContent = '';
        }
    }
}

Checklist

• Test on mobile, tablet, and desktop
• Check keyboard navigation and focus states
• Use semantic HTML for calculator elements
• Ensure color contrast is accessible
• Validate your HTML and CSS