 |
| Javascript |
Intro
Hallo teman-teman kali ini saya akan berbagi tulisan yang cukup singkat, kita belajar frontend lagi tidak menggunakan framework yang populer seperti angular, vue ataupun react tapi kita akan menggunakan library lama yaitu jquery hehe.
Studi kasus kali ini yaitu kita akan membuat aplikasi web base tentang jadwal adzan hari ini yang akan mengambil api dari situs https://waktusholat.org/ yang nanti nya akan ditampilkan ke aplikasi web base kita dengan style bootstrap dan library javascript jquery, yuk langsung coding.
Buka teks editor kesayangan anda dan buat satu file dengan nama index.html lalu copy paste code di bawah ini :
| <!DOCTYPE html> | |
| <html lang="id"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" | |
| integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> | |
| <title>Simple Jadwal Adzan Web Base</title> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <br> | |
| <div class="col-xs-12"> | |
| <div class="card" style="width: 30rem;"> | |
| <div class="card-header" id="title"> | |
| </div> | |
| <ul class="list-group list-group-flush"> | |
| <li class="list-group-item" id="subuh"></li> | |
| <li class="list-group-item" id="dzuhur"></li> | |
| <li class="list-group-item" id="ashar"></li> | |
| <li class="list-group-item" id="magrib"></li> | |
| <li class="list-group-item" id="isya"></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" | |
| integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" | |
| crossorigin="anonymous"></script> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js" | |
| integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> | |
| <script type="text/javascript"> | |
| $(function () { | |
| $.ajax({ | |
| url: "https://api.pray.zone/v2/times/today.json?city=sukabumi", // url api filter today city bisa diganti ini contoh hardcode | |
| type: "GET", | |
| dataType: "json", | |
| success: function (res) { | |
| console.info(res) | |
| // manipulasi response api di save ke attribute id html | |
| $("#title").html(`Jadwal Adzan Kota ${res.results.location.city} - ${res.results.datetime[0].date.hijri} Hijriah`) | |
| $("#subuh").html(`Subuh Pukul ${res.results.datetime[0].times.Fajr}`) | |
| $("#dzuhur").html(`Dzuhur Pukul ${res.results.datetime[0].times.Dhuhr}`) | |
| $("#ashar").html(`Ashar Pukul ${res.results.datetime[0].times.Asr}`) | |
| $("#magrib").html(`Magrib Pukul ${res.results.datetime[0].times.Maghrib}`) | |
| $("#isya").html(`Isya Pukul ${res.results.datetime[0].times.Isha}`) | |
| }, | |
| error: function (xhr, status) { | |
| console.error(`${xhr} : ${status}`) | |
| }, | |
| complete: function (xhr, status) { | |
| console.info('executed completed') | |
| } | |
| }); | |
| }) | |
| </script> | |
| </body> | |
| </html> |
 |
| Hasil Output Aplikasi Jadwal Adzan |
Contoh di atas hanya menampilkan jadwal adzan hari ini untuk kota sukabumi teman-teman bisa coba dengan kota teman masing-masing ubah bagian sukabumi, dan sedikit tips dari saya sebagai bahan pembelajaran teman-teman coba explore modif code dari saya ini dengan inputan kota melalui combobox sehingga bisa menjadi dinamis, dan juga untuk mengasah kemapuan teman-teman supaya lebih tajam lagi hehe.
Dokumentasi lengkap ada di sini teman-teman bisa filter berdsarkan bulan dan lain sebagai nya, dan juga beberapa paramter yang tersedia untuk filter data json nya.
Semoga bermanfaat bagi teman-teman, jika ada yang tidak mengerti, ada kesalahan dalam penulisan dan ada yang ingin ditanyakan atau di tambahkan bisa tulis dikolom komentar terimakasih.
Tetap berkarya sesuai dengan selera masing-masing
0 Komentar