-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
calorie calculator.html
72 lines (71 loc) · 1.93 KB
/
calorie calculator.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
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>calorie calculator</title>
<style>
label {
display: block;
box-shadow: 0.1em 0.1em 0.2em #888;
margin: 1em;
border-radius: 1ex;
padding: 1ex 1em;
}
input[type=number] {
text-align: right;
border: none;
}
input {
float: right;
}
span {
font-weight: bold;
}
*{
background-color: black;
color: white;
font-size: 30px;
text-transform: capitalize;
}
</style>
</head>
<body>
<h1 align="center" style="font-size: 40px;">calorie calculator</h1>
<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" style="border-radius: 30px;" oninput="calsPerDay()" value="19">
years
</label>
<label>Height:
<input id="height" type="number" style="border-radius: 30px;" oninput="calsPerDay()" value="60">
in inches (12 inches=1 foot)
</label>
<label>Weight:
<input id="weight" type="number" style="border-radius: 30px;" oninput="calsPerDay()" value="140">
in pounds
</label>
<label align ="center">
Base metabolic rate: <span id="totalCals" style="color: red;"></span> kcal per day
</label>
<script type="text/javascript">
function calsPerDay() {
function find(id) { return document.getElementById(id) }
var age = find("age").value
var height = find("height").value * 2.54
var weight = find("weight").value / 2.2
var result = 0
if (find("male").checked)
result = 66.47 + (13.75 * weight) + (5.0 * height - (6.75 * age))
else if (find("female").checked)
result = 665.09 + (9.56 * weight) + (1.84 * height - (4.67 * age))
find("totalCals").innerHTML = Math.round( result )
}
calsPerDay()
</script>
</body>
<footer>
<p align="center" style="color: white; padding: 150px;">© MyFitness 2021. All Rights Reserved ®</p>
</footer>