Website Jadwal Sholat Otomatis Menggunakan HTML, CSS, dan JavaScript

Halo Bro! Di artikel kali ini, saya akan membahas sebuah website jadwal sholat otomatis yang saya buat sendiri menggunakan HTML, CSS, dan JavaScript.

Website ini saya beri nama Waktu Sujud, dibuat dengan tujuan untuk membantu umat Muslim memperoleh informasi waktu sholat secara otomatis, akurat, dan mudah diakses. Desainnya modern, ramah pengguna, serta responsif, artinya bisa digunakan di perangkat desktop maupun smartphone.

Anda bisa langsung mencoba websitenya melalui link berikut: https://waktusujud.vercel.app/

Fitur dan Cara Menggunakan Website Waktu Sujud

1. Pilih Lokasi Kabupaten atau Kota

Saat pertama kali membuka website, Anda akan diminta memilih kabupaten atau kota tempat tinggal Anda.

• Cukup ketik nama kabupaten atau kota Anda di kolom pencarian.
• Pilih dari saran otomatis yang muncul.
• Klik tombol Simpan.

Setelah itu, jadwal sholat otomatis akan ditampilkan, mulai dari Imsak, Subuh, Dzuhur, Ashar, Maghrib, hingga Isya.

Data ini diambil dari API MyQuran dan akan diperbarui secara otomatis setiap hari berdasarkan lokasi yang Anda pilih.

2. Fitur Install Aplikasi

Website Waktu Sujud juga mendukung install sebagai aplikasi di perangkat Anda.

Klik tombol Install Aplikasi, maka website akan diunduh dan terpasang seperti aplikasi di perangkat Anda. Sangat berguna jika Anda ingin mengaksesnya dengan lebih cepat di kemudian hari.

3. Fitur Jadwal Sholat Bulanan (Hari Ini hingga 30 Hari ke Depan)

Selain menampilkan jadwal harian, Anda juga bisa melihat jadwal sholat lengkap untuk 30 hari ke depan.

Tentu saja, jadwal ini juga menyesuaikan dengan kabupaten atau kota yang Anda pilih sebelumnya.

4. Fitur Arah Qiblat dan Jarak ke Ka'bah

Website ini dilengkapi fitur arah Qiblat dan jarak ke Ka'bah.

• Arah Qiblat ditampilkan dalam satuan derajat dari arah utara, yang dihitung berdasarkan lokasi Anda menggunakan API AlAdhan.
• Jarak ke Ka'bah dihitung langsung menggunakan rumus Haversine berdasarkan koordinat Anda dan titik Ka'bah di Makkah.

5. Fitur Ubah dan Reset Lokasi

Anda bisa mengubah atau mengganti lokasi kapan saja menggunakan fitur:

• Ubah Lokasi: untuk memilih lokasi baru.
• Reset Lokasi: untuk menghapus lokasi yang disimpan sebelumnya.

Perubahan lokasi akan langsung memperbarui seluruh jadwal sholat, arah Qiblat, dan jarak ke Ka'bah.

6. Fitur Jam Digital dan Hitung Mundur ke Sholat Berikutnya

Website ini juga menampilkan jam digital real-time yang mengikuti jam di perangkat Anda. Selain itu, terdapat fitur hitung mundur menuju waktu sholat berikutnya.

7. Fitur Tanggal Masehi dan Hijriah

Website Waktu Sujud menampilkan:

• Tanggal Masehi dari sistem waktu perangkat Anda.
• Tanggal Hijriah yang dikonversi secara otomatis menggunakan API AlAdhan.

Penyimpanan Otomatis

Lokasi yang Anda pilih akan tersimpan otomatis di browser. Jadi, saat Anda membuka kembali website ini, Anda tidak perlu memilih lokasi ulang, kecuali Anda membersihkan cache atau data browser secara manual.

Nah, itu dia penjelasan lengkap tentang Waktu Sujud – Website Jadwal Sholat Otomatis yang saya kembangkan dengan HTML, CSS, dan JavaScript.

Semoga artikel ini bermanfaat dan bisa membantu Anda dalam menjalankan ibadah dengan lebih teratur. Jika Anda masih kurang paham dengan penjelasan versi artikel ini, Anda juga bisa menonton versi videonya melalui link berikut: Website Jadwal Sholat Otomatis Menggunakan HTML CSS dan JavaScript.

Terima kasih!