Tutorial Kalkulator Umur Sederhana dengan HTML, CSS, dan JavaScript

Beberapa hari lalu saya sedang bereksperimen membuat aplikasi sederhana berbasis website. Aplikasi tersebut berupa kalkulator umur.

Sebenarnya, aplikasi semacam ini sudah banyak dibuat dan tersebar di internet.

Di mesin pencarian Google, ditemukan banyak sekali tools kalkulator umur yang bisa kita gunakan. Tools ini lah yang menginspirasi saya untuk membuat yang sama, untuk mempelajari bagaimana cara kerjanya.

Selain dari banyak tools yang saya temui, satu hal lagi yang membuat saya terinspirasi adalah sebuah hitungan umur yang dikeluarkan oleh puskesmas Kebon Jeruk, Jakarta Barat di dalam bukti nomor antrian pendaftaran yang mereka cetak.

Sumber: perjalanantandatanya.blogspot.com

Menurut saya, bentuk informasi umur seperti itu sangat berguna bagi pasien, karena tidak sedikit dari kita ingin mengetahui umurnya sudah berapa tahun dan berapa bulan.

Untuk dapat mengetahui bagaimana cara kerja dari sebuah aplikasi sederhana ini, tentu saya harus mencari beberapa referensi atau contoh aplikasi yang sudah jadi yang bisa saya modifikasi sesuai dengan keinginan.

Dan akhirnya saya menemukan aplikasi berbasis website yang menjadi referensi saya dalam membuat aplikasi kalkulator umur ini

Sumber: calculator.net

Dalam aplikasi Age Calculator dari calculator.net kita akan diminta untuk memasukkan 2 tanggal, yaitu tanggal lahir dan tujuan tanggal tertentu untuk mengetahui rentang umurnya, dengan hasil akhir berupa umur dengan kombinasi tahun-bulan-hari atau alternatif nilai umur dengan satuan bulan dan tanggal, hari bahkan sampai ke satuan detik.

Dengan beberapa referensi yang ada, saya mencoba membuat dengan mempelajari cara kerja yang sederhana dan dalam panduan ini saya akan membagikannya kepada teman teman semua.

Dengan asumsi bahwa teman teman sudah memahami dasar dasar dari pembuatan website khususnya frontend, saya menyusun panduan ini menjadi beberapa bagian kecil, agar bisa dipahami secara perlahan. Berikut adalah pembagiannya:

1. Persiapan
2. Membuat formulir dengan HTML
3. Menerapkan mode gelap-terang
4. Memahami alur kerja aplikasi
5. Menerapkan rumus kalkulator umur
6. Menerapkan validasi formulir