100-projects-html-css-javascript/100-projects-017-calculator.html at main · KyleSowers/100-projects-html-css-javascript · GitHub

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
<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Calculator</title>
      <link rel="stylesheet" href="100-projects-017-calculator.css">
  </head>
  <body>
    <div class="container">
      <div id="calculator">
        <input type="text" id="display" disabled>
        <div id="buttons">
          <button class="button" value="1">1</button>
          <button class="button" value="2">2</button>
          <button class="button" value="3">3</button>
          <button class="button" value="4">4</button>
          <button class="button" value="5">5</button>
          <button class="button" value="6">6</button>
          <button class="button" value="7">7</button>
          <button class="button" value="8">8</button>
          <button class="button" value="9">9</button>
          <button class="button" value="0">0</button>
          <button class="operator" value=".">.</button>
          <button class="operator" value="+">+</button>
          <button class="operator" value="-">-</button>
          <button class="operator" value="*">*</button>
          <button class="operator" value="/">/</button>
          <button id="equals" value="=">=</button>
          <button id="clear">C</button>
        </div>
      </div>
    </div>
    <script src="100-projects-017-calculator.js"></script>
<!--    <script>-->
<!--      let display = document.getElementById('display').value;-->
<!--      let buttons = Array.from(document.getElementsByClassName('button'));-->
<!--      let operators = Array.from(document.getElementsByClassName('operator'));-->
<!--      let equals = document.getElementById('equals');-->
<!--      let clear = document.getElementById('clear');-->

<!--      buttons.map(button =>{-->
<!--        button.addEventListener('click', (e) => {-->
<!--          display.value += e.target.value;-->
<!--        })-->
<!--      });-->

<!--      operators.map(operator => {-->
<!--        operator.addEventListener('click', (e) => {-->
<!--          display.value += e.target.value;-->
<!--        })-->
<!--      });-->

<!--      equals.addEventListener('click', () => {-->
<!--        try{-->
<!--          display.value = eval(display.value);-->
<!--        } catch {-->
<!--          display.value = 'Error';-->
<!--        }-->
<!--      });-->

<!--      clear.addEventListener('click', () => {-->
<!--        display.value = "";-->
<!--      });-->
    </script>
  </body>
</html>