tugas-Mobile-Responsive/hitung-diet.html at master · mr-exploit/tugas-Mobile-Responsive · GitHub

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
<!DOCTYPE html>
<html>
<head>
	<title>Hitung Diet Anda</title>
	<!-- Load Bootstrap CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
  <!-- Load Local CSS -->
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/hitung-diet-style.css">
</head>
<body>

  <!-- navigasi -->
  <nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#"><img src="assets/logo-no-background.png" alt="icons-dica" width="140px" height="auto"></a>
        <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item ">
              <a class="nav-link " aria-current="page" href="home.html">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link  text-info fw-semibold active" href="hitung-diet.html">Diet</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="edukasi.html">Edukasi</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="about.html">About Us</a>
            </li>
          </ul>
          <form class="d-flex" role="search">
              <button class="btn btn-info text-white" type="submit"><i class="bi bi-search"></i></button>
            <input class="form-control ms-2" type="search" placeholder="Search" aria-label="Search" style="width: 65%;">
          </form>
          <img src="https://i.ibb.co/gRj0dYC/profile.png" class="me-3" alt="profile" style="width: 5%;" border="0">
          <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle text-start" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            </button>
            <ul class="dropdown-menu text-start">
              <li><a class="dropdown-item disabled" href="#">Profile</a></li>
              <li><a class="dropdown-item" href="login.html">Logout</a></li>
            </ul>
          </div>
        </div>
      </div>
  </nav>


  <!-- konten -->
	<div class="container mt-5">
        <div class="row">
          <div class="col-md-6 mx-auto mt-5">
            <div class="card">
              <div class="card-header text-start my-3">
                <h5>Masukkan data anda </h5>
              </div>
              <div class="card-body mx-4">
                <form id="form">
                  <div class="mb-3">
                    <label for="inputBerat" class="form-label">Berat Badan (kg)</label>
                    <input type="number" class="form-control" id="inputBerat" required>
                  </div>
                  <div class="mb-3">
                    <label for="inputTinggi" class="form-label">Tinggi Badan (cm)</label>
                    <input type="number" class="form-control" id="inputTinggi" required>
                  </div>
                  <div class="mb-3">
                    <label for="inputUsia" class="form-label">Usia</label>
                    <input type="number" class="form-control" id="inputUsia" required>
                  </div>
                </form>
                <button type="submit" class="btn btn-info text-white mt-3 mb-5" id="submit">Hitung</button>

                <div id="text-reset">
                  <h5 class="" >BMI kamu segini <span id="total-bmi">-</span> dengan kategori <span id="BMI-category"> </span> dengan umur <span id="umur"></span>
                  </h5>

                  <button type="submit" class="btn btn-warning text-white mt-3" id="reset">reset</button>

              </div>
            </div>
          </div>
        </div>
      </div>
  </div>

  <!-- fitur diet -->
  <div class="container mt-7 mb-5">

        <h2 class="colors-blue" id="teksmakanan"></h2>
          <div  id="edu"  class="row mt-5 mb-5">

          </div>
          <h2 class="colors-blue" id="teksolahraga"></h2>
          <div  id="dietolhraga"  class="row mt-5 mb-5">
          </div>
  </div>

	<!-- Load JS -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="script.js" type="module"></script>
</body>
</html>