generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcalculator.html
276 lines (243 loc) · 16.4 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
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
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
<!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">
<meta name="description" content="Change your fuel - website aiming to encourage people to change to keto diet">
<meta name="keywords" content="weight loss, keto, keto diet, diet, target weight, ">
<meta name="author" content="JoGorska">
<!--Bootstrap 5 css-->
<link rel="stylesheet" href="assets/css/bootstrap/bootstrap-grid.css">
<link rel="stylesheet" href="assets/css/bootstrap/bootstrap-reboot.css">
<link rel="stylesheet" href="assets/css/bootstrap/bootstrap-utilities.css">
<!--the below link is to debug console out of error, solution from https://stackoverflow.com/questions/30693021/chrome-developer-tools-shows-favicon-404-error-in-brackets-livepreview-->
<link rel="icon" href="data:;base64,iVBORwOKGO=" />
<!--link to Bootswatch file to replace Bootstrap's css-->
<link rel="stylesheet" href="assets/css/bootstrap.css">
<!-- Custom styles for template cover used in index.html and all pages for nav bar-->
<link href="assets/css/bootstrap/cover.css" rel="stylesheet">
<!--google fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Baumans&family=Kodchasan:wght@200&display=swap" rel="stylesheet">
<!--my stylesheet link-->
<link rel="stylesheet" href="assets/css/style.css">
<title>Change your Fuel</title>
</head>
<!--Main header-->
<body class="clear-shadow d-flex background-img-tape-fixed my-plain-text-font fw-bold">
<!--Nav bar - ??? need do place it correctly check if nav bar goes below header in html should header be in the header-->
<div class="d-flex w-100 h-100 p-3 mx-auto flex-column">
<div id="nav-container" class="container mt-5">
<!--Nav bar-->
<header class="mb-auto text-center">
<div>
<a class="navbar-brand text-center" href="index.html">
<img src="assets/images/keto-logo.png" alt="logo - three sugar cubes with prohibition sign" width="50" height="50" class=" d-inline-block align-text-top float-md-start mb-auto text-center">
<h1 class="float-md-start mb-0 text-dark my-heading-font fw-bold">Change your fuel</h1>
</a>
<nav class="nav nav-masthead justify-content-center float-md-end">
<a class="text-dark my-heading-font nav-link" href="index.html">Home</a>
<a class="fw-bold text-dark my-heading-font nav-link my-active" aria-current="page" href="calculator.html">Calculator</a>
<a class="text-dark my-heading-font nav-link" href="contact.html">Contact</a>
</nav>
</div>
</header>
</div>
<div class="container">
<div class="pb-md-4 mx-auto text-center my-plain-text-font">
<h1 class="display-4 fw-normal border-top mt-3 mb-3 font-family-header text-dark fw-bold my-heading-font">Calculator</h1>
<p class="fs-5 p-1 text-dark fw-bold my-white-gradient-to-left my-border-radius-bigger my-heading-font">Choose from one of the options below to calculate how long will it take you to acheve the target weight or how much weight you can loose untill your target date</p>
</div>
</div>
<!--Main content - Calculator Form-->
<form action="results.html" method="GET" target="_blank">
<div class="container p-3 mb-3 my-white-gradient-to-left my-plain-text-font text-dark my-border-radius-bigger">
<!--
Choose Target Weight or Target Date
Button group copied from Bootswatch and applied bootsstrap and bootstwatch styling
-->
<div class="text-center bs-component mb-3 mt-5">
<div class="btn-group" role="group" aria-label="Target Weight or Target Date radio button">
<input type="radio" class="btn-check" name="target" id="radio-target-weight" checked required>
<label class="btn btn-outline-success" for="radio-target-weight">Target Weight</label>
<input type="radio" class="btn-check" name="target" id="radio-target-date">
<label class="btn btn-outline-success" for="radio-target-date">Target Date</label>
</div>
</div>
<!--Name-->
<div id="div-name" class="mb-3">
<label for="input-name" class="form-label">Name</label>
<input type="text" class="form-control" id="input-name" name="input-name">
<div id="name-help" class="form-text my-invisible"></div>
</div>
<!--Gender-->
<div class="mb-3">
<label class="form-label" for="input-gender">Gender</label>
<input class="form-control mb-3" type="text" name="input-gender" id="input-gender" list="gender-list" placeholder="Please write here or choose from drop down list" minlength="2" maxlength="160" aria-describedby="gender-help">
<div id="gender-help" class="form-text fw-bold text-dark">However we aim to be inclusive, some parts of the results will depend on male or female gender.</div>
<datalist id="gender-list">
<option>Male</option>
<option>Female</option>
</datalist>
</div>
<!--Age-->
<div class="mb-3">
<label for="input-age" class="form-label">Age</label>
<input type="number" class="form-control" id="input-age" name="input-age" title="Please enter a number without decimal places" aria-describedby="age-help">
<div id="age-help" class="form-text fw-bold text-dark">We'll never share your age with anyone else.</div>
</div>
<!--Target Date - made invisible when it first loads-->
<div id="div-target-date" class="my-invisible mb-3">
<label for="target-date" class="form-label">Target Date</label>
<input type="date" class="form-control" id="target-date" name="target-date" aria-describedby="date-help">
<div id="date-help" class="form-text fw-bold text-dark">We can estimate the results only for dates further than a month from today</div>
</div>
<!--
Choose
Imperial Measures or Metric
button group copied from Bootswatch and applied bootsstrap and bootstwatch styling
preselected metric when it first loads
-->
<fieldset>
<legend class="text-center mb-5">Choose between Imperial Units and Metric</legend>
<!--Radio button group code copied from bootswatch and applied styling from bootswatch and bootstrap-->
<div class="text-center bs-component mb-3">
<div class="btn-group" role="group" aria-label="Units of measures radio button">
<input type="radio" class="btn-check" name="units-of-measure" id="imperial">
<label class="btn btn-outline-success" for="imperial">Imperial Units</label>
<input type="radio" class="btn-check" name="units-of-measure" id="metric" checked="" required>
<label class="btn btn-outline-success" for="metric">Metric</label>
</div>
</div>
<!--imperial measures input fields - made invisible when it first loads-->
<div id="div-all-imperial" class="my-invisible container">
<!--Current weight imperial-->
<div class="row mb-3">
<div class="col">
<label for="current-weight-stone" class="form-label">Current Weight</label>
<input type="number" class="form-control" id="current-weight-stone" name="current-weight-stone" placeholder="Stone">
<div id="current-weight-stone-help" class="form-text my-invisible"></div>
</div>
<div class="col">
<label for="current-weight-pounds" class="form-label">Current Weight</label>
<input type="number" class="form-control" id="current-weight-pounds" name="current-weight-pounds" placeholder="lbs">
<div id="current-weight-pounds-help" class="form-text my-invisible"></div>
</div>
</div>
<!--Target weight imperial-->
<div id="div-target-imperial" class="row mb-3">
<div class="col">
<label for="target-weight-stone" class="form-label">Target Weight</label>
<input type="number" class="form-control" id="target-weight-stone" name="target-weight-stone" placeholder="Stone">
<div id="target-weight-stone-help" class="form-text my-invisible"></div>
</div>
<div class="col">
<label for="target-weight-pounds" class="form-label">Target Weight</label>
<input type="number" class="form-control" id="target-weight-pounds" name="target-weight-pounds" placeholder="lbs">
<div id="target-weight-pounds-help" class="form-text my-invisible"></div>
</div>
</div>
<!--Height imperial-->
<div class="row mb-3">
<div class="col">
<label for="height-feet" class="form-label">Height</label>
<input type="number" class="form-control" id="height-feet" name="height-feet" placeholder="Feet">
<div id="height-feet-help" class="form-text my-invisible"></div>
</div>
<div class="col">
<label for="height-inches" class="form-label">Height</label>
<input type="number" class="form-control" id="height-inches" name="height-inches" placeholder="Inches">
<div id="height-inches-help" class="form-text my-invisible"></div>
</div>
</div>
<!--Waist line imperial-->
<div class="mb-3">
<label for="waist-inches" class="form-label">Waist</label>
<input type="number" class="form-control" id="waist-inches" name="waist-inches" aria-describedby="waist-inches-help" placeholder="Inches (this field is not required)">
<div id="waist-inches-help" class="form-text fw-bold text-dark">Find the bottom of your ribs and the top of your hips. Wrap a tape measure around your waist midway between these points. Breathe out naturally before taking the measurement.</div>
</div>
</div>
<!--metric measures input fields - made invisible when radio button selects imperial-->
<div id="div-all-metric" class="container">
<!--Current weight for metric measures-->
<div class="mb-3">
<label for="current-weight-kg" class="form-label">Current Weight</label>
<input type="number" class="form-control" id="current-weight-kg" name="current-weight-kg" placeholder="kg">
<div id="current-weight-kg-help" class="form-text my-invisible"></div>
</div>
<!--Target weight for metric-->
<div id="div-target-metric" class="mb-3">
<label for="target-weight-kg" class="form-label">Target Weight</label>
<input type="number" class="form-control" id="target-weight-kg" name="target-weight-kg" placeholder="kg">
<div id="target-weight-kg-help" class="form-text my-invisible"></div>
</div>
<!--height for metric-->
<div class="mb-3">
<label for="height-cm" class="form-label">Height</label>
<input type="number" class="form-control" id="height-cm" name="height-cm" placeholder="cm">
<div id="height-cm-help" class="form-text my-invisible"></div>
</div>
<!--Waist line metric-->
<div class="mb-3">
<label for="waist-cm" class="form-label">Waist</label>
<input type="number" class="form-control" id="waist-cm" name="waist-cm" aria-describedby="waist-cm-help" placeholder="cm (this field is not required)">
<div id="waist-cm-help" class="form-text text-dark fw-bold">Find the bottom of your ribs and the top of your hips. Wrap a tape measure around your waist midway between these points. Breathe out naturally before taking the measurement.</div>
</div>
</div>
</fieldset>
<!--Hours of excercise per week-->
<div class="mb-3">
<label for="excercise-hours" class="form-label">Hours of excercise per week</label>
<input type="number" class="form-control" id="excercise-hours" name="excercise-hours">
<div id="excercise-hours-help" class="form-text my-invisible"></div>
</div>
<div class="mb-5">
<label class="form-label" for="input-diet">Your current Diet</label>
<input class="form-control mb-3" type="text" name="diet" id="input-diet" list="diet-list" placeholder="Please write here or choose from drop down list" minlength="2" maxlength="160">
<div id="input-diet-help" class="form-text my-invisible"></div>
<datalist id="diet-list">
<option>None</option>
<option>Keto</option>
<option>Low Carb</option>
<option>High Protein</option>
<option>Eat Less</option>
<option>Zryj Mniej</option>
<option>Noom</option>
<option>NHS program</option>
<option>Cabbage Soup Diet</option>
<option>Weight Watchers</option>
<option>Slimming World</option>
<option>Low Fat</option>
<option value="My Own Diet">My Own Diet</option>
</datalist>
</div>
<!--Buttons at the end of the page-->
<div class="container-fluid text-center mt-5 mb-5">
<div class="row">
<div class="col p-3">
<button type="submit" class="btn btn-success">Submit</button>
</div>
<div class="col p-3">
<button type="reset" class="btn btn-danger">Reset</button>
</div>
</div>
</div>
</div>
</form>
<footer class="mt-auto text-success text-center">
<p class="fw-bold text-dark my-heading-font" >Copyright 2021 JoGorska <a class="fw-bold text-dark my-heading-font" href="https://github.com/JoGorska">Gitpod</a> and <a class="fw-bold text-dark my-heading-font" href="https://uk.linkedin.com">Linked in</a>.</p>
</footer>
</div>
<!--Bootstrap JavaScript-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!--
<script src="assets/js/bootstrap/bootstrap.bundle.js"></script>
<script src="assets/js/bootstrap/bootstrap.esm.js"></script>
<script src="assets/js/bootstrap/bootstrap.js"></script>
-->
<!--my javascript link-->
<script src="assets/js/calculator.js"></script>
</body>
</html>