git-exercises/umur-kucing.html at main · diahjunaidijr/git-exercises · 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
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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Umur Kucing Calculator</title>

    <style>
      body {
        font-family: "Arial", sans-serif;
        background-image: url("bg3.jpg");
        background-size: contain;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;
      }
      .card {
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        padding: 16px;
        text-align: center;
      }
      h1 {
        color: #333;
      }

      p {
        margin-top: 20px;
        font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
          "Lucida Sans", Arial, sans-serif;
      }
      #mascott {
        width: 40%;
        height: 40%;
      }
      #umurInput {
        border-radius: 1rem;
        padding: 0.5rem;
        font-family: "Courier New", Courier, monospace;
        font-size: large;
        height: 10px;
        width: 40px;
        text-align: center;
      }
      label {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      #hasilUmur {
        font-family: "Courier New", Courier, monospace;
      }
      input {
        border-color: aqua;
      }
      input:hover::after {
        /* content: " Max umur 999"; */
        display: inline-block;
        color: #555;
        background-color: #f0f0f0;
        padding: 5px;
        border: 1px solid;
        border-radius: 4px;
        position: absolute;
        margin-top: -30px;
        margin-left: 10px;
        font-size: 12px;
      }
      button {
        border: #fff;
        border-radius: 1rem;
        height: 30px;
        font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
        transition: all 0.3s ease 0s;
        cursor: pointer;
        outline: none;
      }
      button:hover {
        background-color: aqua;
        box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
        transform: translateY(-7px);
      }
    </style>
  </head>
  <body>
    <div class="card">
      <h1>Kalkulator Umur Kucing</h1>
      <img id="mascott" src="kucing.png" alt="cat-mascott" />
      <p>Hai semua! Namaku Chilo ^^v</p>
      <label for="umurInput">Masukkan umur kucing (tahun):</label>
      <input
        type="integer"
        title="Max input 999"
        id="umurInput"
        placeholder="..."
        pattern="\d*"
        minlength="1"
        maxlength="3"
        required
      />
      <button onclick="hitungUmur()">Hitung Umur</button>
      <p id="hasilUmur"></p>
    </div>

    <script>
      function hitungUmur() {
        // Ambil nilai umur dari input
        const umurKucingInput = document.getElementById("umurInput").value;

        // Validasi umur
        if (umurKucingInput <= 0) {
          document.getElementById("hasilUmur").innerText =
            "Umur tidak boleh <= 0";
        } else {
          // Hitung umur kucing
          const hasilUmur = umurKucing(umurKucingInput);

          // Tampilkan hasil umur
          document.getElementById("hasilUmur").innerText = hasilUmur;
        }
      }

      const umurKucing = (umur) => {
        if (umur == 1) {
          return "Umur kucing: " + 15 + " tahun manusia";
        } else if (umur == 2) {
          return "Umur kucing: " + 24 + " tahun manusia";
        } else if (umur >= 3) {
          return "Umur kucing: " + (24 + (umur - 2) * 4) + " tahun manusia";
        } else {
          return "Umur tidak boleh <= 0";
        }
      };
    </script>
  </body>
</html>