-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
127 lines (108 loc) · 7.42 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
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
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.11.2/brython.min.js" />
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.11.2/brython_stdlib.min.js" />
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>-->
<script src='https://cdn.plot.ly/plotly-2.27.0.min.js'></script>
</head>
<body onload="brython()">
<script type="text/python">
from browser import document
import bmicalc.controller as controller
# bind event 'click' on button to function echo
document["weight-lb"].bind("change", controller.update_bmi)
document["weight-oz"].bind("change", controller.update_bmi)
document["age-years"].bind("change", controller.update_bmi)
document["age-months"].bind("change", controller.update_bmi)
document["gender"].bind("change", controller.update_bmi)
document["height-ft"].bind("change", controller.update_bmi)
document["height-in"].bind("change", controller.update_bmi)
document["bmi"].bind("change", controller.update_weight_from_bmi)
document["bmi-percentile"].bind("change", controller.update_weight_from_bmi_pct)
document["gender"].bind("change", controller.redraw_plot)
controller.make_plot()
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<h1 align="center">Interactive kids BMI simulator</h1>
<a href="https://github.com/vaishnavsudarshan/bmicalc" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#64CEAA; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<div class="container w-50">
<p align="justify">
This is an interactive body mass index (BMI) calculator tailored for kids aged 2 through 20 years.
</p>
<p align="justify">
Enter your gender, age, height and weight and the calculator will give you the BMI and the BMI percentile, just like the
<a href = "https://www.cdc.gov/healthyweight/bmi/calculator.html">CDC's calculator </a>
</p>
<p align="justify">
No more guessing your weight to meet your target BMI percentile! This calculator is different from others because you can also set the gender, age, height, and your desired BMI percentile and the calculator will tell you what you should weigh!
</p>
<p align="justify">
Note: If you enter a value that is less than 0.01 or more than 99.99 as the desired percentile, it will be calculated as if it was 0.01 or 99.99. If the age is less than 2 years or more than 20 years, the calculator will not change, just the output that has been previously there, as the data for infants is not publicly released, and the growth curves of adults are much different than children.
<p>
Click <a href="calculations.html">here</a> to see how this calculator is built!
</p>
</div>
<div class="container w-50">
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="gender">Gender</label>
</div>
<select class="custom-select" id="gender" aria-label="Large">
<option aria-label="Large" selected value="boy">Boy</option>
<option aria-label="Large" value="girl">Girl</option>
</select>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="label-age">Age</span>
</div>
<input type="number" id="age-years" min="2" max="20" step="1" value="13" class="form-control">
<span class="input-group-text">years</span>
<input type="number" id="age-months" min="0" max="12" step="1" value="6" class="form-control">
<span class="input-group-text">months</span>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Weight</span>
</div>
<input id="weight-lb" type="number" min="20" max="300" step="0.5" value="120" class="form-control">
<span class="input-group-text">lb</span>
<input id="weight-oz" type="number" min="0" max="16" step="1" value="8" class="form-control">
<span class="input-group-text">oz</span>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="label-height">Height</span>
</div>
<input id="height-ft" type="number" min="0" max="10" step=".5" value="5" class="form-control">
<span class="input-group-text">feet</span>
<input id="height-in" type="number" min="0" max="10" step=".5" value="5" class="form-control">
<span class="input-group-text">inches</span>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="label-bmi">BMI </span>
</div>
<input id=bmi type="number" min="10" max="50" step="0.5" value="20" class="form-control" aria-label="Large"
aria-describedby="label-bmi">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="label-bmi-percentile">BMI Percentile </span>
</div>
<input id=bmi-percentile type="number" min="1" max="99" value="65" class="form-control" aria-label="Large"
aria-describedby="label-bmi-percentile">
<span id=bmi-classification class="input-group-text bg-light">Normal</span>
</div>
</div>
<div id="bmi-plot" class="container w-100"></div>
</body>
</html>