MyAppPrototype/Dairy.html at master · rfichadia737/MyAppPrototype · 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
<html>
  <head>
    <title>Dairy</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
     <link href="https://fonts.googleapis.com/css?family=Sigmar+One&display=swap" rel="stylesheet">
    <link rel = "stylesheet" href = "APPstyle.css">

    <script>
        var cal = 0;
         function addCal(x)
         {

            cal = cal + (parseInt(x)/2);
            document.getElementById('out').innerHTML = cal;
         }
    </script>
  </head>
  <body>
    <div class="col-sm-4">
    </div>
    <div class="col-sm-4">
      <h1>Home</h1>
      <img src = "Dairy.jpg" onclick = "window.location.href = 'index.html'">
      <h1>Dairy</h1>
    <table>
      <td><img id ="food" src="Butter.jpg" onclick = "addCal(100)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td><img id ="food" src="Milk.jpg" onclick = "addCal(50)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td><img id ="food" src="Cheese.jpg" onclick = "addCal(100)"></td>
    </table>
    <table>
      <td><p id = "counter">1 gram 100 calories</p></td>
      <td><p id = "counter">1 ounce 50 calories</p></td>
      <td><p id = "counter">1 gram 100 calories</p></td>
    </table>
    <h1>Calorie Counter</h1>
    <span id = "out">0</span>
    </div>
    <div class="col-sm-6">
    </div>
  </body>
</html>