Oy guys, warna merah salah satu hal yang kerap menakutkan dan bikin jengkel, tapi warna merah bisa membuat kita bahagia yakni merah di kalender kita wkwkw. Tak jarang jika kita memilih hari libur selain ahad untuk memesan suatu acara ataupun tiket.
Beda cerita jika kita punya usaha atau tempat kerja yang juga libur di hari libur nasional. Sebagai developer kita diperlukan untuk membuat menu tanggal pemesanan namun hanya diluar hari ahad/weekend dan libur nasional.
Masalahnya, semua jenis tanggal atau datepicker hanya mencantumkan tanggal merah biasa atau weekend. Trus gimana cara membuat hari libur nasionalnya? Trus bagaimana cara tahu tahun ini ada berapa kali libur nasional?
yuk dive lagi
API Hari LIbur Nasional
KIta akan menggunakan API dari abang satyakresna untuk tahu kapan saja hari libur akan tiba. API akan berbentuk JSON dan hanya fetch saja url yang disediakan dan done.
Disini ada tanggal libur, nama hari libur, dan status apakah itu hari libur nasional atau tidak. Lengkapnya ada disini
holiday_date : Tanggal libur
holiday_name : Nama hari libur
is_national_holiday : Status libur nasional
Next coba kita membuat suatu script sederhana dan dan simple, dimana kita bisa cari tahu tanggal yang kita input apakah itu hari libur atau bukan. Kita beri sedikit tampilan biar tidak boring 😎
Script Sederhana Hari Libur Nasional
Kita membutuhkan input untuk tanggal, tangkap inputan tanggal, ambil data hari libur dari API, validasi tanggal input terakhir tampilkan sesuatu dari validasinya.
Yang pertama kita buat tampilan inputan tanggal dan desain card buat notif hari libur atau tidak. Kira-kira seperti ini
<input id="tgl" onchange="getinfolibur()" type="date" />
</div>
<br />
<div class="card card-holiday" id="card-holiday">
<img class="gambar" src="hapi.jpg" />
<h3>Hapi Hapi Hapi</h3>
<span id="hari-libur">Hari Libur</span><br />
<span id="tgl-libur"></span>
</div>
<div class="card card-masuk" id="card-masuk">
<img class="gambar" src="fine.png" />
<h3>This is fine.</h3>
<span>Hari Kerja</span><br />
<span>Semangat boss🔥</span>
</div>
Kemudian kita buat function untuk fetch data json dari api kemudian lakukan pengecekan atau validasa berdasarkan data yang diinputkan. Langsung ke kodenya disini.
async function getinfolibur(){
//get info libur dari api
var get_data = await fetch('https://api-harilibur.vercel.app/api')
var libur_arr = await get_data.json()
//validasi
var tgl = document.getElementById('tgl').value
for (let index = 0; index < libur_arr.length; index++) {
if(libur_arr[index]['is_national_holiday'] && tgl == libur_arr[index]['holiday_date']){
//ya?
document.getElementById('card-holiday').style.display = "block"; //tampil card holiday
document.getElementById('card-masuk').style.display = "none"; //tampil card holiday
document.getElementById('hari-libur').innerHTML = libur_arr[index]['holiday_name']; //set konten
document.getElementById('tgl-libur').innerHTML = libur_arr[index]['holiday_date']; //set konten
break
}else{
document.getElementById('card-holiday').style.display = "none"; //tampil card biasa
document.getElementById('card-masuk').style.display = "block"; //tampil card biasa
}
}
}
</script>
Penjelasan sedikit tentang kode, disini kita menggunaakan onclick untuk mengambil data json API dan memfalidasinya. Setiap inputan yang di set akan otomatis memvalidasi data. Kemudian bila hari libur maka card hari libur akan tampil, bila tidak hari libur maka card biasa akan tampil.
Code lengkap dan assets gambar bisa diunduh di GitHub disini.
Dan selesai, API sangat berguna untuk project atau fungsi lain bila dibutuhkan. Thanks lagi abang satyakresnabuat API dan sumber data hari liburnya. Share bila bermanfaat, matur nuwun.
Reaksi dan Komentar