🧮 Build a Simple Calculator with JavaScript

Create a basic calculator that can handle addition, subtraction, multiplication, and division.

📄 HTML Markup

<div id="calc">
    <input type="text" id="display" disabled />
    <div class="buttons">
        <button>7</button> <button>8</button> <button>9</button> <button>/</button>
        <button>4</button> <button>5</button> <button>6</button> <button>*</button>
        <button>1</button> <button>2</button> <button>3</button> <button>-</button>
        <button>0</button> <button>C</button> <button>=</button> <button>+</button>
    </div>
</div>

💡 JavaScript Logic

const display = document.getElementById("display");
const buttons = document.querySelectorAll("#calc button");

let expression = "";

buttons.forEach(button => {
    button.addEventListener("click", () => {
        const value = button.textContent;

        if (value === "C") {
            expression = "";
            display.value = "";
        } else if (value === "=") {
            try {
                display.value = eval(expression);
                expression = display.value;
            } catch {
                display.value = "Error";
                expression = "";
            }
        } else {
            expression += value;
            display.value = expression;
        }
    });
});

🎨 Basic Styling (Optional)

<style>
#calc {
    max-width: 300px;
    margin: auto;
    text-align: center;
}
#display {
    width: 100%;
    padding: 12px;
    font-size: 1.5rem;
    text-align: right;
}
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 10px;
}
button {
    padding: 15px;
    font-size: 1.2rem;
}
</style>

✅ Skills You Practice

• DOM selection and event handling
• String manipulation and expressions
• Building interactive UIs with JS