turtleking/Calculator.html at main · TurtleKingCode/turtleking · 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
<!DOCTYPE html>
<html lang="">
<head>
  <meta charset="">
  <meta name="viewport" content="width=device-width", initial-scale=1.0>
  <title>My First Calculator</title>
</head>
<body>
  <div id="calculator"> <!-- Making the container for the Calculator-->
    <div id="display"> <!-- This is where you start seeing all them numbers and symbols we like to do math with -->
      <input type="text" id="expression"  placeholder="Javascript" disabled>
      <input type="text" id="result"  placeholder="Calculator" disabled>
    </div>
    <div id="keys"> <!-- Say Hello to them buttons my boys!!! -->
      <button id="clear">C</button>
      <button id="back">&#171;</button>
      <!-- <button id="percent">%</button> -->
      <!-- At some point I wanted to add a percent button, but like... NO.  Too much.-->
      <button class="operator" id="division" sign="&divide;" value="/">&divide;</button>

      <button class="number" value=7>7</button>
      <button class="number" value=8>8</button>
      <button class="number" value=9>9</button>
      <button class="operator" id="mult" sign="&times;" value="*">&times;</button>

      <button class="number" value=4>4</button>
      <button class="number" value=5>5</button>
      <button class="number" value=6>6</button>
      <button class="operator" id="add" sign="&plus;" value="+">&plus;</button>

      <button class="number" value=1>1</button>
      <button class="number" value=2>2</button>
      <button class="number" value=3>3</button>
      <button class="operator" id="sub" sign="&minus;" value="-">&minus;</button>

      <button class="number" value=0>0</button>
      <button class="number" value=.>.</button>
      <button id="equals" value="=">=</button>
    </div>
  </div>
</body>
</html>