iOS-calculator/index.html at main · GeorgePatel/iOS-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
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
<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title>Calculator</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta property="og:title" content="">
  <meta property="og:type" content="">
  <meta property="og:url" content="">
  <meta property="og:image" content="">

  <link rel="manifest" href="site.webmanifest">
  <link rel="apple-touch-icon" href="icon.png">
  <!-- Place favicon.ico in the root directory -->

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/calculator.css">

  <meta name="theme-color" content="#fafafa">
</head>

<body>
  <!-- Add your site or application content here -->
  <div class="calc">
    <section class="screen">
      0
    </section>
    <!-- .calc-row*4>button.calc-button*5 then hit tab-->
    <section class="calc-buttons">
      <div class="calc-row">
        <button class="double calc-button">C</button>
        <button class="calc-button">←</button>
        <button class="calc-button">%</button>
      </div>
      <div class="calc-row">
        <button class="calc-button">7</button>
        <button class="calc-button">8</button>
        <button class="calc-button">9</button>
        <button class="calc-button">×</button>
      </div>
      <div class="calc-row">
        <button class="calc-button">4</button>
        <button class="calc-button">5</button>
        <button class="calc-button">6</button>
        <button class="calc-button">-</button>
      </div>
      <div class="calc-row">
        <button class="calc-button">1</button>
        <button class="calc-button">2</button>
        <button class="calc-button">3</button>
        <button class="calc-button">+</button>
      </div>
      <div class="calc-row">
        <button class="triple calc-button">0</button>
        <button class="calc-button">=</button>
      </div>

<!--      <div class="top-row">-->
<!--        <button class="clear">C</button>-->
<!--        <button class="backspace">←</button>-->
<!--        <button class="divide ">÷</button>-->
<!--      </div>-->
<!--      <div class="second-row">-->
<!--        <button class="seven">7</button>-->
<!--        <button class="eight">8</button>-->
<!--        <button class="nine">9</button>-->
<!--        <button class="multiply ">×</button>-->
<!--      </div>-->
<!--      <div class="third-row">-->
<!--        <button class="four">4</button>-->
<!--        <button class="five">5</button>-->
<!--        <button class="six">6</button>-->
<!--        <button class="subtract ">-</button>-->
<!--      </div>-->
<!--      <div class="forth-row">-->
<!--        <button class="one">1</button>-->
<!--        <button class="two">2</button>-->
<!--        <button class="three">3</button>-->
<!--        <button class="addition ">+</button>-->
<!--      </div>-->
<!--      <div class="bottom-row">-->
<!--        <button class="zero">0</button>-->
<!--        <button class="equals ">=</button>-->
<!--      </div>-->
    </section>
  </div>
  <script src="js/vendor/modernizr-3.11.2.min.js"></script>
  <script src="js/plugins.js"></script>
  <script src="js/calculator.js"></script>
  <!-- put the script tag at the end, right before the end of body because you want all the HTML and CSS to load
   first then you want to load the JavaScript. If it put it at the top, its going to make everything wait for your
   JS to load. You want to show something to your user so that it feels faster -->
</body>

</html>