File size: 3,783 Bytes
33df783
150e09e
33df783
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
150e09e
 
 
33df783
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
150e09e
33df783
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!-- 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>