Age Calculator Javascript Code

MUAZHAN

7 min read

·

Jun 22, 2024

30

Share

Membuat Kalkulator Usia dengan JavaScript

Kalkulator usia merupakan salah satu program sederhana yang dapat dibuat dengan JavaScript. Program ini akan menghitung selisih antara tanggal lahir pengguna dengan tanggal saat ini. Berikut adalah langkah-langkah untuk membuat kalkulator usia dengan JavaScript:

1. HTML

Pertama, kita perlu membuat struktur HTML dasar untuk kalkulator usia. Berikut adalah kode HTML yang dapat digunakan:

    
    
    


    
Kalkulator Usia
    Tanggal Lahir:
    
    Hitung Usia
    

    

Kode ini membuat sebuah form dengan:

• <h1>Kalkulator Usia</h1>: Judul kalkulator usia.
• <label for="birthdate">Tanggal Lahir:</label>: Label untuk input tanggal lahir.
• <input type="date" id="birthdate">: Input type date untuk memasukkan tanggal lahir.
• <button id="calculate">Hitung Usia</button>: Tombol untuk menghitung usia.
• <p id="result"></p>: Paragraf untuk menampilkan hasil perhitungan usia.
• <script src="script.js"></script>: Menyertakan file JavaScript (script.js) yang akan berisi kode untuk menghitung usia.

2. JavaScript

Selanjutnya, kita perlu membuat kode JavaScript untuk menghitung usia. Berikut adalah kode JavaScript yang dapat digunakan dalam file "script.js":

const birthdateInput = document.getElementById("birthdate");
const calculateButton = document.getElementById("calculate");
const resultParagraph = document.getElementById("result");

calculateButton.addEventListener("click", () => {
  const birthdate = new Date(birthdateInput.value);
  const today = new Date();

  const years = today.getFullYear() - birthdate.getFullYear();
  const months = today.getMonth() - birthdate.getMonth();
  const days = today.getDate() - birthdate.getDate();

  let result = "";
  if (years > 0) {
    result += years + " tahun ";
  }
  if (months > 0) {
    result += months + " bulan ";
  }
  if (days > 0) {
    result += days + " hari";
  }
  resultParagraph.textContent = result;
});

Kode ini melakukan hal berikut:

• Mendapatkan elemen HTML: Mendapatkan referensi ke elemen HTML yang dibutuhkan.
• Menambahkan event listener: Menambahkan event listener pada tombol "Hitung Usia" untuk menjalankan fungsi ketika tombol diklik.
• Membuat objek Date: Membuat objek Date untuk tanggal lahir dan tanggal saat ini.
• Menghitung usia: Menghitung selisih tahun, bulan, dan hari antara tanggal lahir dan tanggal saat ini.
• Menampilkan hasil: Menampilkan hasil perhitungan usia dalam paragraf "result".

3. Menjalankan Kalkulator Usia

Setelah membuat kode HTML dan JavaScript, Anda dapat menyimpan kedua file tersebut dalam folder yang sama. Kemudian, buka file HTML di browser Anda untuk menjalankan kalkulator usia.

Penjelasan Kode

1. Mendapatkan elemen HTML:

const birthdateInput = document.getElementById("birthdate");
const calculateButton = document.getElementById("calculate");
const resultParagraph = document.getElementById("result");

Kode ini mengambil referensi ke elemen HTML dengan ID "birthdate", "calculate", dan "result" menggunakan metode document.getElementById(). Referensi ini kemudian disimpan dalam variabel konstan birthdateInput, calculateButton, dan resultParagraph agar mudah diakses di bagian kode selanjutnya.

2. Menambahkan event listener:

calculateButton.addEventListener("click", () => {
  // ... kode perhitungan usia ...
});

Kode ini menambahkan event listener ke tombol "Hitung Usia". Event listener ini akan memanggil fungsi anonim ketika tombol diklik. Fungsi anonim tersebut berisi kode untuk menghitung usia.

3. Membuat objek Date:

const birthdate = new Date(birthdateInput.value);
const today = new Date();

Kode ini membuat objek Date untuk tanggal lahir dan tanggal saat ini. Objek Date untuk tanggal lahir dibuat menggunakan nilai yang dimasukkan pengguna dalam input type date, sedangkan objek Date untuk tanggal saat ini dibuat menggunakan fungsi new Date().

4. Menghitung usia:

const years = today.getFullYear() - birthdate.getFullYear();
const months = today.getMonth() - birthdate.getMonth();
const days = today.getDate() - birthdate.getDate();

Kode ini menghitung selisih tahun, bulan, dan hari antara tanggal lahir dan tanggal saat ini menggunakan metode getFullYear(), getMonth(), dan getDate().

5. Menampilkan hasil:

let result = "";
if (years > 0) {
  result += years + " tahun ";
}
if (months > 0) {
  result += months + " bulan ";
}
if (days > 0) {
  result += days + " hari";
}
resultParagraph.textContent = result;

Kode ini pertama-tama membuat variabel result dengan string kosong. Kemudian, kode ini menambahkan string yang sesuai ke variabel result berdasarkan hasil perhitungan usia. Terakhir, kode ini menetapkan nilai result ke textContent dari paragraf "result" untuk menampilkan hasilnya.

Kode JavaScript ini menggunakan fungsi addEventListener untuk mendengarkan event "click" pada tombol "Hitung Usia". Event listener ini akan memanggil fungsi anonim yang berisi logika untuk menghitung usia. Fungsi tersebut mengambil nilai input tanggal lahir dari input type date, membuat objek Date untuk tanggal lahir dan tanggal saat ini, dan kemudian menghitung selisih tahun, bulan, dan hari antara kedua tanggal tersebut. Hasil perhitungan kemudian ditampilkan dalam paragraf "result" dengan bantuan textContent.