-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
128 lines (115 loc) · 6.22 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
<!DOCTYPE html>
<head>
<title>Kalkulator BMI</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
</head>
<body>
<header>
<h1>BMI (Berat Massa Tubuh)</h1>
</header>
<main>
<div class="main-container">
<!-- Form Input Display -->
<div class="container-item">
<h2 style="text-align: left;">Kalkulator BMI</h2>
<section>
<p>Berat badan ideal adalah impian semua orang. Tidak hanya memiliki bentuk tubuh yang menunjang penampilan, berat badan ideal juga menandakan kondisi tubuh yang sehat. Bagaimana denganmu?
Yuk, hitung sekarang di kalkulator BMI.</p>
</section>
<!-- Input Section -->
<form class="container-form" id="bmiForm">
<div>
<label>Jenis Kelamin</label> <br/>
<input type="radio" name="gender" id="gender-man">
<label for="gender-man">Laki-Laki</label>
<input type="radio" name="gender" id="gender-woman">
<label for="gender-woman">Perempuan</label>
</div>
<div>
<label>Berat Badan (kg)</label> <br/>
<input type="number" name="requirements" id="weight" required>
</div>
<div>
<label>Usia (th)</label> <br/>
<input type="number" name="requirements" id="age" required>
</div>
<div>
<label>Tinggi Badan (cm)</label> <br/>
<input type="number" name="requirements" id="height" required>
</div>
<div style="padding-top: 15px;">
<button type="submit">Hitung BMI</button>
<button type="button" id="reset-button"
class="reset-button">Reset</button>
</div>
</form>
<!-- Fitur Text-->
<section>
<div>
<label>Keunggulan Fitur</label>
<div>
<ol>
<li>Menghitung berat badan</li>
<li>Menentukan kategori berat badan ideal atau tidak</li>
<li>Mempersiapkan program penurunan berat badan</li>
</ol>
</div>
</div>
</section>
<section>
<p>Kalkulator ini hanya digunakan oleh orang dewasa (wanita hamil atau menyusui tidak boleh mengandalkan pembacaan BMI ini) dan tidak ada tindakan yang harus diambil berdasarkan nilainya sealin berkonsultasi dengan orang yang memenuhi syarat seperti dokter.</p>
<p>Kalkulator akan memberi Anda gambaran tentang perbandingan berat badan Anda dengan nilai umum. Indeks Massa Tubuh (atau BMI) dihitung sebagai berat badan Anda (dalam kilogram) dibagi dengan kuadrat tinggi badan Anda (dalam meter) atau BMI = Kg/M<sup>2</sup>.</p>
</section>
</div>
<!-- Result Display -->
<div class="container-item">
<h2 style="text-align: left;">Hasil</h2>
<section class="container-result">
<h4 id="interpert-header"></h4>
<h1 id="result-bmi">0</h1>
<h4 id="interpert-detail"></h4>
<button type="button" id="downloadBtn">Download Hasil BMI</button>
</section>
<section>
<p>Hasil BMI <span id="category-bmi"></span></p>
<p id="cat-text-bmi"></p>
</section>
<!-- button konsultasi dan Registrasi -->
<div class="btn-consult-regist">
<button type="button" id="consultation">Konsultasi Ahli Gizi via Aplikasi</button>
<button type="button" id="registration">Registrasi Online Ahli Gizi</button>
</div>
<div>
<p>BMI tidak sepenuhnya mewakili diagnosis menyeluruh dari kesehatan tubuh dan resiko penyakit seseorang. Anda perlu konsultasi lebih lanjut mengenai resiko dan kekhawatiran Anda terkait dengan berat badan Anda.</p>
</div>
<div>
<h4 style="text-align: center;">Beberapa penyakit yang berasal dari kegemukan</h4>
<div style="text-align: center;">
<span>Diabetes</span><br/>
<span>Hipertensi</span><br/>
<span>Sakit Jantung</span><br/>
</div>
</div>
<!-- button konsultasi dan Registrasi -->
<div class="btn-consult-regist">
<button type="button" id="consultation">Konsultasi Dokter via Aplikasi</button>
<button type="button" id="registration">Registrasi Online Sekarang</button>
</div>
<!-- Badge Google Play and App Store -->
<div class="downloadApps">Download Aplikasi</div>
<div class="imgStore">
<span><a href="https://play.google.com/store/apps?hl=id&gl=US" target="_blank"><img src="assets/ggplay.png" height="63px"></a></span>
<span style="margin-left: 5px; margin-right: 5px;""><a href="https://www.apple.com/id/app-store/" target="_blank"><img src="assets/appstore2.png" height="30px"></a></span>
</div>
</div>
</div>
</main>
<footer style="text-align: center; color: rgb(86, 70, 70);">
Author
<a href="https://github.com/revou-fundamental-course/25-mar-24-idiarso.github.io" target="_blank">Idiarso-2024</a>
</footer>
<script src="js/script.js"></script>
</body>
</html>