-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcalculator.html
134 lines (107 loc) · 4.71 KB
/
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
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complete Responsive diet website</title>
<link rel="stylesheet" href="style.css">
<script>
function calculateNutrition() {
const weight = parseFloat(document.getElementById('weight').value);
const height = parseFloat(document.getElementById('height').value);
const age = parseInt(document.getElementById('age').value);
const activityLevel = parseFloat(document.getElementById('activityLevel').value);
const caloriesNeeded = (10 * weight) + (6.25 * height) - (5 * age) + 5;
const proteinNeeded = weight * 2;
document.getElementById('calories').textContent = caloriesNeeded.toFixed(2);
document.getElementById('protein').textContent = proteinNeeded.toFixed(2);
}
</script>
</head>
<body>
<header class="header">
<a href="#" class="logo"> Healthyfive</a>
<nav class="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About us</a></li>
<li><a href="calculator.html">Calculator</a></li>
<a href="form.html">Registration</a>
<a href="reviews.html">review</a>
</ul>
</nav>
<div class="fas fa-bars" id="menu"></div>
</header>
<br>
<br>
<br>
<br>
<br>
<br>
<br> <br>
<section class="calculate">
<h1 class="heading">Calculate Your Nutritional Needs</h1>
<form>
<h2>Weight (kg):</h2>
<input type="number" id="weight" required>
<h2>Height (cm):</h2>
<input type="number" id="height" required>
<h2>Age:</h2>
<input type="number" id="age" required>
<h2>Activity Level:</h2>
<select id="activityLevel">
<option value="1.2">Sedentary (little or no exercise)</option>
<option value="1.375">Lightly active (light exercise/sports 1-3 days/week)</option>
<option value="1.55">Moderately active (moderate exercise/sports 3-5 days/week)</option>
<option value="1.725">Very active (hard exercise/sports 6-7 days a week)</option>
<option value="1.9">Extra active (very hard exercise/sports, physical job, etc.)</option>
</select>
<button class="btn" type="button" onclick="calculateNutrition()">Calculate</button>
</form>
<div>
<h3>Results:</h3>
<p>Calories Needed: <span id="calories"></span> kcal</p>
<p>Protein Needed: <span id="protein"></span> grams</p>
</div>
</section>
<section class="footer">
<div class="box-container">
<div class="box">
<h3>quick links</h3>
<a href="index.html "> <i class="right"></i>home</a>
<a href="about.html"> <i class="right"></i>about</a>
<a href="calculator.html"> <i class="right"></i>calculator</a>
<a href="services.html"> <i class="right"></i>services</a>
<a href="reviews.html"> <i class="right"></i>reviews</a>
</div>
<div class="box">
<h3>extra links</h3>
<a> <i class="right"></i>my account</a>
<a > <i class="right"></i>my order</a>
<a> <i class="right"></i>my wishlist</a>
<a > <i class="right"></i>ask questions</a>
<a> <i class="right"></i>terms of use</a>
<a > <i class="right"></i>privacy policy</a>
</div>
<div class="box">
<h3>contact info</h3>
<a > <i class="phone"></i>+123-456-7890</a>
<a > <i class="phone"></i>+123-765-2568</a>
<a> <i class="envelope"></i>[email protected]</a>
<a> <i class="map"></i>Chennai , India -600123</a>
</div>
<div class="box">
<h3>follow us</h3>
<a> <i class="facebook-f"></i>facebook</a>
<a> <i class="twitter"></i>twitter</a>
<a > <i class="instagram"></i>instagram</a>
<a> <i class="linkedin"></i>linkedin</a>
<a > <i class="github"></i>github</a>
</div>
</div>
<div class="credit">healthyfive</div>
</section>
<script src="script.js"></script>
</body>
</html>