myarkqub

Untitled

Sep 20th, 2021
791
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Waktu Solat Melaka</title>
  9.     <style>
  10.         #container {
  11.             font-family: Arial, Helvetica, sans-serif;
  12.         }
  13.  
  14.         table {
  15.             border-collapse: collapse;
  16.             width: 100%;
  17.         }
  18.  
  19.         td {
  20.             text-align: left;
  21.             padding: 8px;
  22.         }
  23.  
  24.         tr:nth-child(odd) {
  25.             background-color: #f2f2f2;
  26.         }
  27.     </style>
  28. </head>
  29.  
  30. <body>
  31.     <div id="container">
  32.         Loading...
  33.     </div>
  34.     <script>
  35.         (() => {
  36.             //container/bekas untuk tulis output
  37.             const container = document.querySelector("#container")
  38.             //fetch data dari api waktu solat, kod zon boleh cari kat https://www.e-solat.gov.my/index.php?siteId=24&pageId=50
  39.            fetch("https://www.e-solat.gov.my/index.php?r=esolatApi/takwimsolat&period=today&zone=mlk01").then(result => {
  40.                //tukar result waktu solat jadi json
  41.                return result.json()
  42.            }).then(data => { // ambil data json dari result
  43.                const waktu_solat = data.prayerTime[0] //ambil array pertama dari data (format ni untuk today)
  44.                const array_waktu_solat = [waktu_solat.imsak, // ambil setiap waktu solat, susun dalam array
  45.                waktu_solat.fajr,
  46.                waktu_solat.syuruk,
  47.                waktu_solat.dhuhr,
  48.                waktu_solat.asr,
  49.                waktu_solat.maghrib,
  50.                waktu_solat.isha]
  51.                const clean_waktu_solat = [] //array kosong untuk waktu solat yang dah tukar ke 12 jam
  52.                array_waktu_solat.forEach(waktuSolat => { //ambil setiap waktu solat dari array
  53.                    const waktu = waktuSolat.split(":") // split setiap waktu solat, (asingkan jam, minit, saat)
  54.                    let jam = waktu[0] //array pertama untuk waktu sebagai jam
  55.                    let ampm = "AM" //set am/pm sebagai am (kalau pm nnti kita tukar)
  56.                    if (jam > 12) { //kalau jam lebih dari pukul 12
  57.                        jam = jam - 12 // tolak 12 jam
  58.                        if (jam < 10) { // kalau jam kurang dari 10
  59.                            jam = "0" + jam // tambah 0 kat dpn jam
  60.                        }
  61.                        o2 = "PM" // tukar am jadi pm sebab lebih dari 12 jam
  62.                    }
  63.                    clean_waktu_solat.push(`${jam}:${waktu[1]} ${ampm}`) // push output dalam array kosong
  64.                })
  65.                //susun html dalam container
  66.                container.innerHTML = `<b>Date:${waktu_solat.date} / ${waktu_solat.hijri} (${waktu_solat.day})</b><br>
  67.                <table>
  68.                    <tr><th>Imsak:</th><td> ${clean_waktu_solat[0]}</td>
  69.                    <tr><th>Subuh:</th><td> ${clean_waktu_solat[1]}</td>
  70.                    <tr><th>Syuruk:</th><td> ${clean_waktu_solat[2]}</td>
  71.                    <tr><th>Zohor:</th><td> ${clean_waktu_solat[3]}</td>
  72.                    <tr><th>Asar:</th><td> ${clean_waktu_solat[4]}</td>
  73.                    <tr><th>Maghrib:</th><td> ${clean_waktu_solat[5]}</td>
  74.                    <tr><th>Isyak:</th><td> ${clean_waktu_solat[6]}</td>
  75.                </table>`
  76.            })
  77.        })()
  78.    </script>
  79. </body>
  80.  
  81. </html>
RAW Paste Data