script.js

const expression = document.getElementById("expression");
const display = document.getElementById("display");
const buttons = document.querySelectorAll(".btn");
const historyBtn = document.getElementById("historyBtn");
const historyList = document.getElementById("historyList");

let current = "0";
let previous = null;
let operator = null;
let reset = false;
let history = [];

function updateDisplay() {
  display.textContent = current;
}

function addHistory(entry) {
  history.unshift(entry);
  if (history.length > 10) history.pop();
  renderHistory();
}

const historyItems = document.getElementById("historyItems");
function renderHistory() {
  historyItems.innerHTML = history
    .map(item => `<div>${item}</div>`)
    .join("");
}

buttons.forEach(btn => {
  btn.addEventListener("click", () => handleInput(btn.textContent, btn.dataset.action));
});

function handleInput(value, action) {
  if (!action) {
    if (current === "0" || reset) {
      current = value;
      reset = false;
    } else {
      current += value;
    }
    updateDisplay();
    return;
  }

  switch (action) {
    case "clear":
      current = "0";
      previous = null;
      operator = null;
      expression.textContent = "";
      break;

    case "sign":
      current = (parseFloat(current) * -1).toString();
      break;

    case "percent":
      current = (parseFloat(current) / 100).toString();
      break;

    case "operator":
      if (operator && !reset) {
        current = calculate(previous, current, operator);
        previous = current;
      } else {
        previous = current;
      }
      operator = value;
      expression.textContent = `${previous} ${operator}`;
      reset = true;
      break;

    case "equals":
      if (!operator || previous === null) return;

      const result = calculate(previous, current, operator);
      expression.textContent = `${previous} ${operator} ${current}`;
      addHistory(`${previous} ${operator} ${current} = ${result}`);
      current = result;
      operator = null;
      previous = null;
      reset = true;
      break;
  }
  updateDisplay();
}

function calculate(a, b, op) {
  a = parseFloat(a);
  b = parseFloat(b);
  if (op === "+") return (a + b).toString();
  if (op === "−") return (a - b).toString();
  if (op === "×") return (a * b).toString();
  if (op === "÷") return b === 0 ? "Error" : (a / b).toString();
}

historyBtn.onclick = () => {
  historyList.classList.toggle("hidden");
};

/* Keyboard Support */
document.addEventListener("keydown", e => {
  if (!isNaN(e.key)) handleInput(e.key);
  if (e.key === ".") handleInput(".");
  if (e.key === "+") handleInput("+", "operator");
  if (e.key === "-") handleInput("−", "operator");
  if (e.key === "*") handleInput("×", "operator");
  if (e.key === "/") handleInput("÷", "operator");
  if (e.key === "Enter" || e.key === "=") handleInput("=", "equals");
  if (e.key === "Backspace") {
    current = current.slice(0, -1) || "0";
    updateDisplay();
 }
  if (e.key === "Escape") handleInput("AC", "clear");
});

const themeToggle = document.getElementById("themeToggle");
let isLight = false;

themeToggle.onclick = () => {
  document.body.classList.toggle("light");
  isLight = !isLight;
  themeToggle.textContent = isLight ? "☀️" : "🌙";
};

const clearHistoryBtn = document.getElementById("clearHistory");
clearHistoryBtn.onclick = () => {
  history = [];
  renderHistory();
};