Age Calculator Html Css Javascript

3 min read Jun 22, 2024

Age Calculator menggunakan HTML, CSS, dan JavaScript

Artikel ini akan memandu Anda dalam membuat kalkulator umur sederhana menggunakan HTML, CSS, dan JavaScript. Kalkulator ini akan memungkinkan pengguna untuk memasukkan tanggal lahir mereka dan menampilkan umur mereka saat ini.

1. Struktur HTML

Pertama, buatlah file HTML yang berisi struktur dasar kalkulator umur:




    Kalkulator Umur
    


    Kalkulator Umur
    Tanggal Lahir:

2. Styling CSS

Gunakan file CSS (style.css) untuk mengatur tampilan kalkulator:

body {
    font-family: sans-serif;
    text-align: center;
}

#result {
    font-size: 20px;
    margin-top: 20px;
}

3. Logika JavaScript

Selanjutnya, tambahkan JavaScript (script.js) untuk menghitung umur:

function calculateAge() {
    var birthdate = new Date(document.getElementById("birthdate").value);
    var today = new Date();
    var age = today.getFullYear() - birthdate.getFullYear();
    var monthDiff = today.getMonth() - birthdate.getMonth();

    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthdate.getDate())) {
        age--;
    }

    document.getElementById("result").innerHTML = "Umur Anda: " + age + " tahun";
}

Penjelasan Kode:

Fungsi calculateAge() dipanggil ketika tombol "Hitung Umur" diklik.
Fungsi ini mengambil tanggal lahir dari input birthdate.
Kemudian, fungsi ini menghitung umur dengan mengurangi tahun lahir dari tahun saat ini.
Jika bulan lahir lebih besar dari bulan saat ini atau bulan lahir sama dengan bulan saat ini tetapi tanggal lahir lebih besar dari tanggal saat ini, maka umur dikurangi 1 tahun.
Hasil umur kemudian ditampilkan di paragraf dengan id result.

4. Menjalankan Kalkulator

Simpan ketiga file (HTML, CSS, dan JavaScript) di folder yang sama. Buka file HTML di browser Anda. Sekarang, Anda dapat memasukkan tanggal lahir Anda dan melihat umur Anda saat ini ditampilkan di bawah tombol.

Kesimpulan

Kalkulator umur sederhana ini dapat diubah dan dikembangkan lebih lanjut. Anda dapat menambahkan fitur-fitur tambahan seperti menampilkan umur dalam bentuk bulan dan hari, atau menambahkan validasi input untuk memastikan tanggal lahir yang dimasukkan valid.