-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcalorie.html
114 lines (103 loc) · 3.18 KB
/
calorie.html
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="en">
<head>
<title>Calorie calculator</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="calorie.css" />
<link href="https://fonts.googleapis.com/css?family=Luckiest+Guy&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kalam&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Signika+Negative&display=swap" rel="stylesheet">
</head>
<body>
<div id="heading">THE CALORIE TRACKER</div>
<form>
<label>Female:
<input id="female" type="radio" name="gender" onchange="calsPerDay()">
</label>
<label>Male:
<input id="male" type="radio" name="gender" onchange="calsPerDay()" checked>
</label>
<label>Age:
<input id="age" type="number" oninput="calsPerDay()">
(in years)
</label>
<label>Height:
<input id="height" type="number" oninput="calsPerDay()" >
(in cm)
</label>
<label>Weight:
<input id="weight" type="number" oninput="calsPerDay()">
(in kgs)
</label>
</form>
<table style="width:50%">
<th> CHOSE ACTIVITY LEVEL AS PER DISCRIPTION</th>
<tr>
<td>
(Very Light)-Typical office job(sitting,studying,little walking throughout the day)
</td>
</tr>
<tr>
<td>
(Light)-Any job where you mostly stand or walk(teaching,shop/lab work,some walking throughout the day)
</td>
</tr>
<tr><td>
(Moderate)-Jobs requiring physical activity (landscaping,cleaning,maintenance,jobbing/biking/working out for 2 hours/day)
</td>
</tr>
<tr><td>
(Heavy)-Heavy manual labour(construction ,dancer ,athlete,hard physical activity min. 4 hour/day
</td>
</tr>
<tr><td>
(Very Heavy)-Moderate to hard physical activity min. 8 hours/day
</td>
</tr>
</table>
<form>
<div id="drop">
<select id="exercise">
<option value="1">Very Light</option>
<option value="2">Light</option>
<option value="3">Moderate</option>
<option value="4">Heavy</option>
<option value="5">Very Heavy</option>
</select>
<br>
<br>
<button type="button" id="calculate">
CALCULATE
</button>
<p id="calorie">Basal Metabolic Rate:<span id="totalCals"></span><br>
Net Calorie Requirement:<span id="netCals"></span></p><br></div></form>
<form>
<div id="dynamic">
<h3>ENTER ITEMS CONSUMED IN A DAY</h3>
<input type="text" placeholder="Enter items consumed in the day" id="memo" required />
<input type="number" placeholder="Fats content" id="fats" required/>
<input type="number" placeholder="Carbs content" id="carbs" required/>
<input type="number" placeholder="Proteins content" id="proteins" required/><br><br>
<button type="button" id="add">ADD ITEM</button>
<div>
<div id="mem">
<ol id="notes"></ol>
</div>
<div id="mem">
<ol id="fat"></ol>
</div>
<div id="mem">
<ol id="carb"></ol>
</div>
<div id="mem">
<ol id="protein"></ol>
</div>
</div>
<br>
<br>
<button id="test" type="button">COMPARE WITH MINIMUM REQUIREMENTS</button>
<p id="message"></p>
</div></form>
<script type="text/javascript" src="calorie.js"></script>
</body>
</html>