Age Calculator Javascript

MUAZHAN

3 min read

·

Jun 22, 2024

25

Share

Kalkulator Usia dengan JavaScript

Kalkulator usia adalah alat sederhana yang dapat menghitung usia seseorang berdasarkan tanggal lahirnya. Dalam artikel ini, kita akan mempelajari cara membuat kalkulator usia menggunakan JavaScript.

HTML

Pertama, kita perlu membuat struktur HTML dasar untuk kalkulator usia. Berikut kode HTML-nya:

  


  
Kalkulator Usia
  Tanggal Lahir:
  
  Hitung Usia
  

  

Kode HTML di atas membuat form sederhana dengan:

• Judul: "Kalkulator Usia"
• Label: "Tanggal Lahir"
• Input: "date" untuk memasukkan tanggal lahir.
• Tombol: "Hitung Usia" yang akan memicu fungsi calculateAge().
• Paragraph: "result" yang akan menampilkan hasil perhitungan usia.

JavaScript

Selanjutnya, kita perlu menulis kode JavaScript untuk menghitung usia. Berikut kode JavaScript-nya:

function calculateAge() {
  const birthdate = new Date(document.getElementById("birthdate").value);
  const today = new Date();
  let age = today.getFullYear() - birthdate.getFullYear();
  let monthDiff = today.getMonth() - birthdate.getMonth();
  if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthdate.getDate())) {
    age--;
  }
  document.getElementById("result").innerHTML = "Usia Anda: " + age + " tahun";
}

Kode JavaScript di atas melakukan hal berikut:

1. Mendapatkan tanggal lahir: Mengambil nilai dari input "birthdate" dan mengubahnya menjadi objek Date.
2. Mendapatkan tanggal hari ini: Mengambil tanggal hari ini menggunakan objek Date.
3. Menghitung selisih tahun: Mengurangi tahun tanggal lahir dari tahun hari ini.
4. Menghitung selisih bulan: Mengurangi bulan tanggal lahir dari bulan hari ini.
5. Menyesuaikan usia: Jika bulan hari ini lebih kecil dari bulan tanggal lahir atau tanggal hari ini lebih kecil dari tanggal tanggal lahir, maka usia dikurangi 1 tahun.
6. Menampilkan hasil: Menampilkan hasil perhitungan usia dalam paragraph "result".

Cara Kerja

Ketika tombol "Hitung Usia" diklik, fungsi calculateAge() akan dijalankan. Fungsi ini akan mengambil nilai tanggal lahir dari input, menghitung selisih tahun dan bulan, dan menampilkan hasil dalam paragraph "result".

Kesimpulan

Dengan menggunakan kode HTML dan JavaScript di atas, Anda dapat membuat kalkulator usia sederhana yang dapat menghitung usia seseorang berdasarkan tanggal lahirnya. Anda dapat memodifikasi kode ini untuk menambahkan fitur lain, seperti menampilkan usia dalam bulan atau hari.