-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
195 lines (169 loc) · 6.97 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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css" type="text/css">
<!-- Jumbotron below -->
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Clinical and Medical Calculations</h1>
<h3 class="lead">Some examples below</h3>
</div>
</div>
<!-- end of jumbotron -->
</head>
<body>
<div class="container">
<div class="row">
<!-- BMI calculator below -->
<div id="bmicalculator" class="col-sm-6 border border-dark">
<h1>BMI Calculator</h1>
<br>
<h3>Input weight and height to receive BMI</h3>
<br>
<p>Weight (kg): <input id="weightinput" type="text"/></p>
<br>
<p>Height (cm): <input id="heightinput" type="text"/></p>
<br>
<p><input id="bmibutton" type="button" value="Calculate BMI" onclick="BMI()" />
</p>
<p id="bmiresult">Your result: </p>
<br>
<p>A note about BMI: it can be used to predict potential health problems, but is not diagnostic.
BMI does have limitations and may not be appropriate for all patients, such as athletes (weight lifters) or pregnant patients.
</p>
</div>
<!-- CrCl calculator below, will need 4 inputs (gender, weight, age, sCr -->
<div id="crclcalculator" class="col-sm-6 border border-dark">
<h1>Creatinine Clearance Calculator</h1>
<br>
<h3>Input data for creatinine clearance (CrCl)</h3>
<br>
<p>Age (years): <input id="ageinput" type="text" /></p>
<br>
<p>Gender (M/F): <input id="genderinput" type="text" /></p>
<br>
<p>Weight (kg): <input id="weightinput2" type="text" /></p>
<br>
<p>Serum creatinine (mg/dL): <input id="sCrinput" type="text" /></p>
<br>
<p><input id="crclbutton" type="button" value="Calculate CrCl" onclick="CrCl()" />
</p>
<p id="finalCrCl">Your Creatinine Clearance (CrCl): </p>
<br>
<p>A note about creatinine clearance: it is only an estimation of renal function, and may not be
appropriate for all patients. There is a more accurate way to determine renal function, a 24-hr urine collection (for those with the resources and determination).
</p>
</div>
<!-- end of row div below -->
</div>
<br>
<!-- start of new row div -->
<div class="row">
<!-- new column below, drug side effects output based on drug name input -->
<!-- only works for sertraline right now, can be expanded to include other drugs -->
<div id="sideeffects" class="col-sm-6 border border-dark">
<h1>Drug Side Effects</h1>
<br>
<h3>Input generic drug name below</h3>
<h4>(just sertraline for now)</h4>
<br>
<p>Drug name (generic): <input id="userDrug" type="text" /></p>
<br>
<p><input id="sidefxbutton" type="button" value="Side effects" onclick="drugSE()" /></p>
<br>
<p id="drugname">Side effects of </p>
</div>
<!-- new column below -->
<div class="col-sm-6 border border-dark">
<h1>Antibiotic Dosing calculator</h1>
<h3>(coming soon)</h3>
</div>
</div>
<br>
<!-- start of new row div -->
<div class="row">
<!-- new column below, vaccine information table -->
<div id="vaccineinfo" class="col-sm-12 border border-dark">
<h1>Vaccine Information</h1>
<h4 id="vaccinehead">Below is selected information for some common vaccines and the diseases they protect against</h4>
<br>
<table id="vaccinetable" class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Vaccine name</th>
<th scope="col">Protects against</th>
<th scope="col">Other info</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">DTaP</th>
<td>Diphtheria, Tetanus, Pertussis</td>
<td>DTaP is only for children younger than 7 years old</td>
</tr>
<tr>
<th scope="row">Hib</th>
<td><i>Haemophilus influenzae</i> type b</td>
<td>Hib vaccine usually requires 3 to 4 doses</td>
</tr>
<tr>
<th scope="row">MMR</th>
<td>Measles, Mumps, and
Rubella</td>
<td>MMR vaccinations will protect most people for life</td>
</tr>
<tr>
<th scope="row">HPV</th>
<td>Human Papillomavirus</td>
<td>Most HPV infections self-resolve within 2 years</td>
</tr>
<tr>
<th scope="row">Influenza</th>
<td>Flu</td>
<td>Thousands of people die from flu in the US each year</td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
<!-- start of new row div -->
<div class="row">
<!-- new column below, hypertension drug selector -->
<div class="col-sm-12 border border-dark">
<h1>Hypertension Drug Selector</h1>
<br>
<h3>There are generally four different drug classes to choose from when starting antihypertensive treatment</h3>
<br>
<p>Intro about picking between four classes of drugs</p>
<p>Then have a choice selector algorithm</p>
</div>
</div>
<br>
<!-- Opioid dose calculator below -->
<div class="row">
<div class="col-sm-12 border border-dark">
<h1>Opioid dose calculator</h1>
<h5>It should come as no surprise that higher doses of opioids are
also associated with a higher risk of overdose and death. Calculating
the total daily dose of opioids can identify patients that are at a higher risk of overdose and death --
and they can be monitored more closely, prescribed naloxone, or have their dose reduced.
</h5>
</div>
</div>
<br>
<!-- end of container div below -->
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="scripts.js"></script>
</body>
</html>