src/App.svelte

<!-- src/App.svelte -->
<script lang="ts">
  let display = '0';
  let previous = 0;
  let operator: string | null = null;
  let waitingForOperand = false;
  let error = '';

  const clear = () => {
    display = '0';
    previous = 0;
    operator = null;
    waitingForOperand = false;
    error = '';
  };

  const inputDigit = (digit: number) => {
    if (waitingForOperand) {
      display = String(digit);
      waitingForOperand = false;
    } else {
      display = display === '0' ? String(digit) : display + digit;
    }
  };

  const inputDecimal = () => {
    if (waitingForOperand) {
      display = '0.';
      waitingForOperand = false;
    } else if (display.indexOf('.') === -1) {
      display += '.';
    }
  };

  const performOperation = (nextOperator: string) => {
    const inputValue = parseFloat(display);

    if (isNaN(inputValue)) return;

    if (operator && !waitingForOperand) {
      const result = calculate(previous, inputValue, operator);
      if (typeof result === 'string') {
        error = result;
        display = 'Error';
        return;
      }
      display = String(result);
      previous = result;
    } else {
      previous = inputValue;
    }

    waitingForOperand = true;
    operator = nextOperator;
  };

  const calculate = (first: number, second: number, op: string): number | string => {
    switch (op) {
      case '+':
        return first + second;
      case '-':
        return first - second;
      case '*':
        return first * second;
      case '/':
        if (second === 0) return 'Cannot divide by zero';
        return first / second;
      default:
        return second;
    }
  };

  const handleEquals = () => {
    if (!operator || waitingForOperand) return;

    const inputValue = parseFloat(display);
    const result = calculate(previous, inputValue, operator);
    
    if (typeof result === 'string') {
      error = result;
      display = 'Error';
    } else {
      display = String(result);
      previous = result;
    }

    waitingForOperand = true;
    operator = null;
  };

  const handlePercent = () => {
    const value = parseFloat(display);
    display = String(value / 100);
  };

  const handleNegate = () => {
    const value = parseFloat(display);
    display = String(value * -1);
  };
</script>

<main>
  <div class="calculator">
    <div class="display">
      <div class="display-text">{display}</div>
      {#if error}
        <div class="error">{error}</div>
      {/if}
    </div>
    
    <div class="buttons">
      <button class="function" on:click={clear}>C</button>
      <button class="function" on:click={handleNegate}>±</button>
      <button class="function" on:click={handlePercent}>%</button>
      <button class="operator" on:click={() => performOperation('/')}>/</button>
      
      <button on:click={() => inputDigit(7)}>7</button>
      <button on:click={() => inputDigit(8)}>8</button>
      <button on:click={() => inputDigit(9)}>9</button>
      <button class="operator" on:click={() => performOperation('*')}>×</button>
      
      <button on:click={() => inputDigit(4)}>4</button>
      <button on:click={() => inputDigit(5)}>5</button>
      <button on:click={() => inputDigit(6)}>6</button>
      <button class="operator" on:click={() => performOperation('-')}>−</button>
      
      <button on:click={() => inputDigit(1)}>1</button>
      <button on:click={() => inputDigit(2)}>2</button>
      <button on:click={() => inputDigit(3)}>3</button>
      <button class="operator" on:click={() => performOperation('+')}>+</button>
      
      <button class="zero" on:click={() => inputDigit(0)}>0</button>
      <button on:click={inputDecimal}>.</button>
      <button class="equals" on:click={handleEquals}>=</button>
    </div>
  </div>
</main>