-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
72 lines (67 loc) · 3.64 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="style.css">
<title>BMI Calculator</title>
</head>
<body>
<!--bmi calculator-->
<div id="bmi-container">
<div id="bmi-top">
<!--app title-->
<h1 id="bmi-title">BMI Calculator</h1>
<!--button toggle unit system-->
<button id="btn-unit" class="btn"></button>
</div>
<!--gender select-->
<button id="male" class="small-blocks"><svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="currentColor" class="bi bi-gender-male" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M9.5 2a.5.5 0 0 1 0-1h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V2.707L9.871 6.836a5 5 0 1 1-.707-.707L13.293 2zM6 6a4 4 0 1 0 0 8 4 4 0 0 0 0-8"/>
</svg><p class="titles">Male</p></button>
<button id="female" class="small-blocks"><svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="currentColor" class="bi bi-gender-female" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 1a4 4 0 1 0 0 8 4 4 0 0 0 0-8M3 5a5 5 0 1 1 5.5 4.975V12h2a.5.5 0 0 1 0 1h-2v2.5a.5.5 0 0 1-1 0V13h-2a.5.5 0 0 1 0-1h2V9.975A5 5 0 0 1 3 5"/>
</svg><p class="titles">Female</p></button>
<!--height select-->
<div id="height-block">
<p id="height-title" class="titles">Height</p>
<p id="height-num" class="numbers">5'6"</p>
<input type="range" min="48" max="84" value="66" class="slider" id="height-slider">
</div>
<!--weight select-->
<div class="small-blocks">
<p id="weight-title" class="titles">Weight</p>
<p class="numbers"><span id="weight-num">140</span><span id="weight-unit" class="mini"> lbs</span></p>
<button id="weight-dec" class="inc-btns">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dash-lg" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8"/>
</svg>
</button>
<button id="weight-inc" class="inc-btns">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"/>
</svg>
</button>
</div>
<!--age select-->
<div class="small-blocks">
<p id="age-title" class="titles">Age</p>
<p id="age-num" class="numbers">21</p>
<button id="age-dec" class="inc-btns">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dash-lg" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8"/>
</svg>
</button>
<button id="age-inc" class="inc-btns">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"/>
</svg>
</button>
</div>
<!--calculate button-->
<button id="calculate">Calculate</button>
</div>
<!--script-->
<script src="script.js"></script>
</body>
</html>