-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathexercisecalc.html
More file actions
140 lines (134 loc) · 6.15 KB
/
exercisecalc.html
File metadata and controls
140 lines (134 loc) · 6.15 KB
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
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>exercise calculator</title>
<link rel="stylesheet" href="homepage.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="exercisecalc.js"></script>
</head>
<body>
<section id="logon">
<img src="http://www.oininteractive.com/wp-content/uploads/2011/01/CA-fitness-logo-PNG.png" style="width: 200px;"class="logo">
<mark><h1>FITNESS-TRACKER</h1></mark>
</section>
<div id="navbar">
<a href="homepage.html" ><em><b>Home</a></b></em>
<a href="countdown.html"><em><b>Count down for Exercise</a></b></em>
<a href="bmi.html"><em><b>BMI Calculator</a></b></em>
<a class="active" href=""><em><b>Calorie Calculator</a></b></em>
<a href="exercise.html"><em><b>Yoga Facts</a></b></em>
</div>
<div class="content">
<nav id="side">
<ul>
<li><a href="#header">HOME</a></li>
<li><a href="#maps">ABOUT US</a></li>
<li><a href="#join">REGISTER</a></li>
<li><a href="bmi.html">BMI Calculator</a></li>
<li><a href="countdown.html">CountDown For Exercise</a></li>
<li><a href="exercisecalc.html">Calorie Calculator</a></li>
<li><a href="exercise.html">Yoga Facts</a></li>
</ul>
</nav>
<img src="https://royalposthumus.com/images/white_menu_icon.png" style="width: 100px;"id="menu">
<section id="header">
<div class="container" style="background-color:black;">
<h3 align="center" style="color:white">Exercise Calculator</h3>
<br><br><p style="color:white">How can you burn off some of those extra calories before they turn into <b>extra pounds</b>? After thinking about a particular dish you savored, try our <i>"Exercise Calculator"</i> to see how many calories you expend doing your favorite exercise or activity.</p>
<br><br>
<form>
<label style="color:white">Select the exercise:</label>
<select name="exercise" id="exercise">
<option value="0">Select</option>
<option value="90">Stroll</option>
<option value="200">Brisk walking</option>
<option value="240">Aerobics</option>
<option value="375">Skipping</option>
<option value="350">Bicycling</option>
<option value="235">Stair climber</option>
</select><br><br>
<label style="color:white">Enter the time you've exercised:</label>
<input type="text" name="timehrs" id="timeh" value=0 placeholder="in hours">hours
<input type="text" name="timemins" id="timem" value =0 placeholder="in minutes">minutes<br><br>
<button type="button" onclick="myFunction()">Add activity</button><br>
<input type="text" name="dem" id="dem" value=0 placeholder="---">kcal for activity
<br><br>
<input type="text" name="cal" id="cal" value=0 placeholder="---">kcal in total for the day!
</form>
</div>
</section>
<section id="features" style="padding-left: 200px;">
<div class="row">
<div class="col">
<img src="https://cdn4.iconfinder.com/data/icons/medical-icons-rounded-vector/1250/path_health_calculator-512.png"></img>
<h4>BMI Calculator</h4>
<q>Calculates Your current BMI </q>
</div>
<div class="col">
<img src="https://cdn0.iconfinder.com/data/icons/ketogenic-diet-glyph/64/ketogenic-diet-calculator-calories-nutrition-512.png"></img>
<h4>Nutrition Calculator</h4>
<q>calculates the total calories consumed</q>
</div>
<div class="col">
<img src="https://cdn3.iconfinder.com/data/icons/auto-racing/423/Stopwatch_Timer-512.png"></img>
<h4>Exercise Timer</h4>
<q>Calculates the time while exercising</q>
</div>
<div class="col">
<img src="http://pngimg.com/uploads/fitness/fitness_PNG94.png"></img>
<h4>Fitness</h4>
<q>This Website supports fitness for every individual</q>
</div>
</div>
</section>
<section class="footer">
<div class="align">
<b><em><p style="font-size: larger;color: black;"> @Copyright 2020 Fitness-Tracker Made by @Sankirtana @Mahitha @Krithikha</p></em></b>
</div>
</section>
<script>
function myFunction() {
var prev=document.getElementById("dem").value;
var exs = document.getElementById("exercise").value;
var integer = parseInt(exs);
var th = document.getElementById("timeh").value;
var tm = document.getElementById("timem").value;
var k =parseInt(tm) + ((parseInt(th))*60);
var result = (integer)*k/30;
result=Math.round(result*100)/100;
var total=parseInt(prev)+result;
document.getElementById("dem").value=result;
document.getElementById("cal").value=total;
}
var menu=document.getElementById("menu");
var side=document.getElementById("side");
side.style.right="-250px";
menu.onclick=function(){
if(side.style.right=="-250px"){
side.style.right="0px"
}
else{
side.style.right="-250px"
}
}
var scroll = new SmoothScroll('a[href*="#"]');
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
</body>
</html>