javascript-calculator/index.html at master · lexadecimals/javascript-calculator · 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>
  <head>
    <meta charset="utf-8">
    <title>Vanilla JavaScript Calculator</title>
    <link rel="stylesheet" href="calculator.css">
  <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
  </head>
  <body>
    <div class="container">
        <div class = "calc-body">
          <div class="screen">
            <div class="display-container">
              <p id="display"></p>
              <p id="display-calculation"></p>
            </div>
          </div>
          <!-- Buttons -->
            <div class="buttons-container">

              <div class="row">
                  <button type="button" id="clear" >AC</button>
                  <button type="button" id="ce" value = "">CE</button>
                  <button type="button" id="divide" value = "/">%</button>
                  <button type="button" id="multiply" value = "*">X</button>
              </div>
              <div class="row">
                  <button type="button" id="seven" value = "7">7</button>
                  <button type="button" id="eight" value = "8">8</button>
                  <button type="button" id="nine" value = "9">9</button>
                  <button type="button" id="subtract" value = "-">-</button>
                  </div>

              <div class="row">
                  <button type="button" id="four" value = "4"><span>4</span></button>
                  <button type="button" id="five" value = "5">5</button>
                  <button type="button" id="six" value = "6">6</button>
                  <button type="button" id="add" value = "+">+</button>
              </div>

              <div id ="three-row">
                  <button type="button" id="one" value = "1">1</button>
                  <button type="button" id="two" value = "2">2</button>
                  <button type="button" id="three" value = "3">3</button>

              </div>

              <div class="equals-row">
                  <button type="button" id="equals" value = "=">=</button>

              </div>

             <div class="zero-row">
                  <button type="button" id ="zero" value = "0">0</button>
                  <button type="button" id="decimal" value = ".">.</button>

             </div>
           </div>

        </div>
    </div>
    <script type="text/javascript" src="calculator.js">

    </script>
  </body>
</html>