xxxxxxxxxx1
<!DOCTYPE html>2
<html lang="en" xmlns="http://www.w3.org/1999/html">3
<head>4
<meta charset="utf-8">5
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">6
7
<meta name="description"8
content="Midwest Unitarian Universalist Summer Assembly, located outside Potosi, Missouri (Formerly Lake Geneva Summer Assembly in Williams Bay, Wisconsin)">9
<meta name="author" content="Dan Hermann">10
<title>11
MUUSA: Camp Cost Calculator12
</title>13
<!-- CSS Global Compulsory -->14
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Jost|Antic Slab&display=swap">15
</head>16
<body>17
18
<!--Main Navigation-->19
<header>20
<!-- Animated navbar-->21
<nav class="navbar navbar-expand-lg fixed-top navbar-scroll">22
<div class="container-fluid">23
<button class="navbar-toggler ps-0" type="button" data-mdb-toggle="collapse"24
data-mdb-target="#navbarMars" aria-controls="navbarMars" aria-expanded="false"25
aria-label="Toggle navigation">26
<span class="navbar-toggler-icon d-flex justify-content-start align-items-center">27
<i class="fas fa-bars"></i>28
</span>29
</button>30
31
<div class="collapse navbar-collapse" id="navbarMars">32
<ul class="navbar-nav me-auto mb-2 mb-lg-0">33
<li class="nav-item">34
<a class="navbar-brand nav-link" href="/" aria-label="" data-no-retina>35
<img class="navbar-brand-logo mx-3" src="/images/brand35.png" alt="MUUSA Logo"36
data-no-retina> MUUSA37
</a>38
39
</li>40
<li class="nav-item dropdown">41
<a class="nav-link dropdown-toggle" href="#" role="button" id="menuCampInfo"42
data-mdb-toggle="dropdown"43
aria-expanded="false">44
Camp Information45
</a>46
<ul class="dropdown-menu" aria-labelledby="menuCampInfo">47
<li><a href="//localhost:3000/housing" class="dropdown-item"><i class="far fa-bath fa-fw"></i>48
Housing Options</a>49
</li>50
<li><a href="//localhost:3000/programs" class="dropdown-item">51
<i class="far fa-sitemap fa-fw"></i> Programs52
</a>53
</li>54
<li>55
<a href="//localhost:3000/workshops" class="dropdown-item">56
<i class="far fa-map fa-fw"></i> Workshop List57
</a>58
</li>59
<li>60
<a href="//localhost:3000/themespeaker" class="dropdown-item">61
<i class="far fa-microphone fa-fw"></i> Theme Speakers62
</a>63
</li>64
<li>65
<a href="//localhost:3000/cost" class="dropdown-item">66
<i class="far fa-calculator fa-fw"></i> Cost Calculator67
</a>68
</li>69
<li>70
<a href="//localhost:3000/scholarship" class="dropdown-item">71
<i class="far fa-universal-access fa-fw"></i> Scholarships72
</a>73
</li>74
<li>75
<a href="//localhost:3000/excursions" class="dropdown-item">76
<i class="far fa-binoculars fa-fw"></i> Excursions77
</a>78
</li>79
</ul>80
</li>81
<li class="nav-item dropdown">82
<a class="nav-link dropdown-toggle" href="#" role="button" id="menuDetails"83
data-mdb-toggle="dropdown"84
aria-expanded="false">85
Your Details86
</a>87
<ul class="dropdown-menu" aria-labelledby="menuDetails">88
<a href="//localhost:3000/brochure" class="dropdown-item">89
<i class="far fa-desktop fa-fw"></i> Web Brochure</a>90
<a href="//localhost:3000/directory" class="dropdown-item">91
<i class="far fa-address-book fa-fw"></i> Online Directory</a>92
</ul>93
</li>94
<li class="nav-item"><a href="//localhost:3000/contact" class="nav-link">Contact Us</a>95
</ul>96
97
<div class="d-flex align-items-center">98
<a class="btn btn-secondary px-3 me-2" href="//localhost:3000/login" role="button">Login</a>99
<a class="btn btn-primary" href="//localhost:3000/register" role="button">100
Get Started101
</a>102
103
</div>104
</div>105
</div>106
</nav>107
<!-- Animated navbar -->108
109
110
<div class="jumbotron jumbotron-fluid text-white bg-image "111
style="background-size: cover; background-position-y: bottom; background-image: url('/images/calculator.jpg')112
;" >113
<div class="container mt-5 pt-5 text-shadow">114
<h1 class="display-4">115
Camp Cost Calculator116
</h1>117
<p>118
Use this tool to easily estimate the cost of your fees for 2022.119
</p>120
</div>121
</div>122
</header>123
<!--Main Navigation-->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
<section id="content" class="p-0">237
<div class="m-5">238
<div class="note note-warning text-black m-3">239
Warning: this calculator only provides an estimate of your camp cost and your actual fees240
may vary.241
</div>242
<div class="form-group row pb-lg-3">243
<label for="adults" class="col-md-3">Adults Attending</label>244
245
<div class="col-md-3">246
<div class="input-group number-spinner">247
<button class="btn btn-outline-primary" data-dir="up" dusk="adultsup">248
<i class="far fa-plus"></i>249
</button>250
<input id="adults" class="form-control align-center" name="adults" value="0"/>251
<button class="btn btn-outline-primary" data-dir="dwn" dusk="adultsdown">252
<i class="far fa-minus"></i>253
</button>254
</div>255
</div>256
257
<div class="col-md-4 text-center">258
<div class="btn-group">259
<input type="radio" checked="checked" class="btn-check" name="adults-housing" id="adults-housing1"260
autocomplete="off" value="1" />261
<label for="adults-housing1" class="btn btn-outline-primary" data-mdb-toggle="tooltip"262
title="Guestroom, Cabin, or Loft Housing"><i class="fa-solid fa-hotel"></i></label>263
<input type="radio" class="btn-check" name="adults-housing" id="adults-housing2" value="2"264
autocomplete="off"/>265
<label for="adults-housing2" class="btn btn-outline-primary" data-mdb-toggle="tooltip"266
title="Camp Lakewood Cabin (dorm style) Housing"><i267
class="fa-solid fa-people-roof"></i></label>268
<input type="radio" class="btn-check" name="adults-housing" id="adults-housing3" value="3"269
autocomplete="off"/>270
<label for="adults-housing3" class="btn btn-outline-primary" data-mdb-toggle="tooltip"271
title="Tent Camping"><i class="fa-solid fa-campground"></i></label>272
</div>273
</div>274
<div class="col-md-2 text-end" id="adults-fee">$0.00</div>275
</div>276
<div id="single-alert" class="row alert alert-warning" style="display: none;">277
If you plan to have a roommate, but have not yet selected or been assigned a roommate, please note that your278
fees will be half the amount shown in the calculator.279
</div>280
<div class="form-group row pb-lg-3">281
<label for="yas" class="col-md-3 control-label">Young Adults (18-20) Attending</label>282
283
<div class="col-md-3">284
<div class="input-group number-spinner">285
<button class="btn btn-outline-primary" data-dir="up" dusk="yasup">286
<i class="far fa-plus"></i>287
</button>288
<input id="yas" class="form-control align-center" name="yas" value="0"/>289
<button class="btn btn-outline-primary" data-dir="dwn" dusk="yasdown">290
<i class="far fa-minus"></i>291
</button>292
</div>293
</div>294
295
<div class="col-md-4 text-center">296
<div class="btn-group">297
<input type="radio" class="btn-check" name="yas-housing" id="yas-housing2" checked="checked"298
value="2" autocomplete="off"/>299
<label for="yas-housing2" class="btn btn-outline-primary" data-mdb-toggle="tooltip"300
title="Camp Lakewood Cabin (dorm style) Housing"><i301
class="fa-solid fa-people-roof"></i></label>302
<input type="radio" class="btn-check" name="yas-housing" id="yas-housing3"303
value="3" autocomplete="off"/>304
<label for="yas-housing3" class="btn btn-outline-primary" data-mdb-toggle="tooltip"305
title="Tent Camping"><i class="fa-solid fa-campground"></i></label>306
</div>307
</div>308
<div class="col-md-2 text-end" id="yas-fee">$0.00</div>309
</div>310
<div class="form-group row pb-lg-3">311
<label for="jrsrs" class="col-md-3 control-label">Jr./Sr. High Schoolers Attending</label>312
313
<div class="col-md-3">314
<div class="input-group number-spinner">315
<button class="btn btn-outline-primary" data-dir="up" dusk="jrsrsup">316
<i class="far fa-plus"></i>317
</button>318
<input id="jrsrs" class="form-control align-center" name="jrsrs" value="0"/>319
<button class="btn btn-outline-primary" data-dir="dwn" dusk="jrsrsdown">320
<i class="far fa-minus"></i>321
</button>322
</div>323
</div>324
325
<div class="col-md-4">Burt/Meyer Community Cabins326
</div>327
<div class="col-md-2 text-end" id="jrsrs-fee">$0.00</div>328
</div>329
<div class="form-group row pb-lg-3">330
<label for="children" class="col-md-3 control-label">Children (6 years old or older) Attending</label>331
332
<div class="col-md-3">333
<div class="input-group number-spinner">334
<button class="btn btn-outline-primary" data-dir="up" dusk="childrenup">335
<i class="far fa-plus"></i>336
</button>337
<input id="children" class="form-control align-center" name="children" value="0"/>338
<button class="btn btn-outline-primary" data-dir="dwn" dusk="childrendown">339
<i class="far fa-minus"></i>340
</button>341
</div>342
</div>343
344
<div class="col-md-4">Must room with parents</div>345
<div class="col-md-2 text-end" id="children-fee">$0.00</div>346
</div>347
<div class="form-group row pb-lg-3">348
<label for="babies" class="col-md-3 control-label">Children (Up to 5 years old) Attending</label>349
350
<div class="col-md-3">351
<div class="input-group number-spinner">352
<button class="btn btn-outline-primary" data-dir="up" dusk="babiesup">353
<i class="far fa-plus"></i>354
</button>355
<input id="babies" class="form-control align-center" name="babies" value="0"/>356
<button class="btn btn-outline-primary" data-dir="dwn" dusk="babiesdown">357
<i class="far fa-minus"></i>358
</button>359
</div>360
</div>361
362
<div class="col-md-4">Must room with parents</div>363
<div class="col-md-2 text-end" id="babies-fee">$0.00</div>364
</div>365
<div class="row">366
<div class="col-md-12 text-end">367
<p>Amount Due Upon Registration: <span id="deposit">$0.00</span><br/>368
Amount Due Upon Arrival: <span id="arrival">$0.00</span><br/>369
<strong>Total Camp Cost</strong>: <span id="total">$0.00</span></p>370
</div>371
</div>372
</div>373
</section>374
375
<!-- Footer -->376
<footer class="bg-dark text-center text-white">377
<!-- Grid container -->378
<div class="container p-4">379
<!-- Section: Social media -->380
<section class="mb-4">381
<!-- Facebook -->382
<a class="btn btn-outline-light btn-floating m-1 pt-2 btn-amber-hover"383
href=" https://www.facebook.com/Muusa2013/"384
role="button">385
<i class="fab fa-facebook-f"></i>386
</a>387
388
<!-- Twitter -->389
<a class="btn btn-outline-light btn-floating m-1 pt-2 btn-amber-hover"390
href="https://twitter.com/muusa1"391
role="button">392
<i class="fab fa-twitter"></i>393
</a>394
395
<!-- YouTube -->396
<a class="btn btn-outline-light btn-floating m-1 pt-2 btn-amber-hover"397
href="https://www.youtube.com/channel/UC-lNXF9IYAC-PSpvWWJkkMw" role="button">398
<i class="fab fa-youtube"></i>399
</a>400
</section>401
<!-- Section: Social media -->402
403
<!-- Section: Form -->404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
<!-- Section: Form -->439
440
<!-- Section: Links -->441
<section>442
<!--Grid row-->443
<div class="row">444
<!--Grid column-->445
<div class="col-lg-4 col-md-6 mb-4 mb-md-0">446
<h5>Camp Information</h5>447
448
<ul class="list-unstyled mb-0">449
<li><a class="text-white underlined-link" href="//localhost:3000/housing">Housing450
Options</a></li>451
<li><a class="text-white underlined-link"452
href="//localhost:3000/programs">Programs</a>453
</li>454
<li>455
<a class="text-white underlined-link" href="//localhost:3000/workshops">Workshop456
List</a>457
</li>458
<li>459
<a class="text-white underlined-link" href="//localhost:3000/themespeaker">Theme460
Speaker</a>461
</li>462
<li><a class="text-white underlined-link" href="//localhost:3000/cost">Cost463
Calculator</a>464
</li>465
<li>466
<a class="text-white underlined-link"467
href="//localhost:3000/scholarship">Scholarships</a>468
</li>469
<li>470
<a class="text-white underlined-link"471
href="//localhost:3000/excursions">Excursions</a>472
</li>473
</ul>474
</div>475
<!--Grid column-->476
477
<!--Grid column-->478
<div class="col-lg-4 col-md-6 mb-4 mb-md-0">479
<h5>Your Details</h5>480
481
<ul class="list-unstyled mb-0">482
<li><a class="text-white underlined-link" href="//localhost:3000/brochure">Web483
Brochure</a>484
</li>485
<li><a class="text-white underlined-link" href="//localhost:3000/directory">Online486
Directory</a>487
</li>488
</ul>489
</div>490
<!--Grid column-->491
492
<!--Grid column-->493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
</div>516
<!--Grid row-->517
</section>518
<!-- Section: Links -->519
</div>520
<!-- Grid container -->521
522
<!-- Copyright -->523
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">524
2022 © Midwest Unitarian Universalist Summer Assembly. Design by <a525
href="https://mdbootstrap.com/" target="_blank"526
class="text-white underlined-link">MDBootstrap.com</a>.527
</div>528
<!-- Copyright -->529
</footer>530
<!-- Footer -->531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
<script> 653
// Adult (1-4), Burt, Cratty, Lumens, Meyer, YA, YA 18-20654
var guestsuite = [291.666666666,145.833333333,130.833333333,120.8333333,62.5,62.5,16.66666667,62.5,291.666666666,145.833333333,130.833333333,120.8333333,291.666666666,145.833333333,130.833333333,120.8333333];655
var tentcamp = [64.16666667,60,40.33333333,16.66666667,60,64.16666667,60];656
var lakewood = [97.5,89.166666666,62.5,16.66666667,89.166666666,97.5,89.166666666];657
var buttons = document.querySelectorAll('div.number-spinner button');658
for (var i = 0; i < buttons.length; i++) {659
window.addEvent(buttons[i], 'click', spinnerClick);660
}661
var radios = document.querySelectorAll('input[type=radio]');662
for (var i = 0; i < radios.length; i++) {663
window.addEvent(radios[i], 'change', calcluateCampCost);664
}665
</script>666
</body>667
</html>668
669
1
1
xxxxxxxxxx1
2
3
window.addEvent = function (el, type, handler) {4
if (el.attachEvent) el.attachEvent('on' + type, handler); else el.addEventListener(type, handler);5
}6
7
8
window.spinnerClick = function (e) {9
var btn = e.target.closest('button'), input, oldVal = 0, newVal = 0;10
if (btn.getAttribute('data-dir') === 'up') {11
input = btn.nextElementSibling;12
newVal = parseInt(input.value, 10) + 1;13
} else {14
input = btn.previousElementSibling;15
oldVal = parseInt(input.value, 10);16
newVal = oldVal > 0 ? oldVal - 1 : 0;17
}18
input.value = newVal;19
calcluateCampCost();20
};21
22
23
window.calcluateCampCost = function () {24
var total = 0.0, deposit = 0.0;25
var adults = parseInt(document.getElementById('adults').value, 10),26
yas = parseInt(document.getElementById('yas').value, 10),27
jrsrs = parseInt(document.getElementById('jrsrs').value, 10),28
children = parseInt(document.getElementById('children').value, 10),29
babies = parseInt(document.getElementById('babies').value, 10);30
var singlealert = document.getElementById('single-alert'), adultsfee = document.getElementById('adults-fee'),31
yasfee = document.getElementById('yas-fee'), childrenfee = document.getElementById('children-fee');32
switch (adults + yas + jrsrs + children + babies) {33
case 0:34
break;35
case 1:36
deposit = 200.0;37
break;38
default:39
deposit = 400.0;40
}41
singlealert.style.display = 'none';42
switch (parseInt(document.querySelector('input[name=adults-housing]:checked').value, 10)) {43
case 1:44
switch (adults + children + babies) {45
case 1:46
rate = adults * guestsuite[0] * 6;47
singlealert.style.display = 'block';48
break;49
case 2:50
rate = adults * guestsuite[1] * 6;51
break;52
case 3:53
rate = adults * guestsuite[2] * 6;54
break;55
default:56
rate = adults * guestsuite[3] * 6;57
}58
total += rate + (children * guestsuite[4] * 6);59
adultsfee.innerText = "$" + rate.toFixed(2);60
childrenfee.innerText = "$" + (children * guestsuite[4] * 6).toFixed(2);61
break;62
case 2:63
total += adults * lakewood[0] * 6 + children * lakewood[2] * 6;64
adultsfee.innerText = "$" + (adults * lakewood[0] * 6).toFixed(2);65
childrenfee.innerText = "$" + (children * lakewood[2] * 6).toFixed(2);66
break;67
case 3:68
total += adults * tentcamp[0] * 6 + children * tentcamp[2] * 6;69
adultsfee.innerText = "$" + (adults * tentcamp[0] * 6).toFixed(2);70
childrenfee.innerText = "$" + (children * tentcamp[2] * 6).toFixed(2);71
break;72
}73
switch (parseInt(document.querySelector('input[name=yas-housing]:checked').value, 10)) {74
case 2:75
total += yas * lakewood[6] * 6;76
yasfee.innerText = "$" + (yas * lakewood[6] * 6).toFixed(2);77
break;78
case 3:79
total += yas * tentcamp[6] * 6;80
yasfee.innerText = "$" + (yas * tentcamp[6] * 6).toFixed(2);81
break;82
}83
total += jrsrs * lakewood[1] * 6;84
document.getElementById('jrsrs-fee').innerText = "$" + (jrsrs * lakewood[1] * 6).toFixed(2);85
total += babies * guestsuite[6] * 6;86
document.getElementById('babies-fee').innerText = "$" + (babies * guestsuite[6] * 6).toFixed(2);87
document.getElementById('deposit').innerText = "$" + Math.min(total, deposit).toFixed(2);88
document.getElementById('arrival').innerText = "$" + Math.max(total - deposit, 0).toFixed(2);89
document.getElementById('total').innerText = "$" + total.toFixed(2);90
}91
Console errors: 0