JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container text-center">
		<h1>Jadwal Sholat</h1>
		<div id="waktu"></div>
    <div class="row">
      <div class="col-3">
        <label for="kota">Kota</label>  
      </div>
      <div class="col-9">
        <input type="text" id="kota" class="kota form-control" placeholder="Kota Anda..">   
      </div>
      
    </div>
    <div class="clearfix mt-3">
        <button id="submit" class="btn btn-primary float-right">Submit</button>    
      </div>
    
    
<h3 class="text-center" id="city_name">...</h3>    
<div class="table-responsive">
    <table class="table-striped table">
        <thead>
            <tr>
                <th>Tanggal</th>
                <th>Imsak</th>
                <th>Subuh</th>
                <th>Dzuhur</th>
                <th>Ashar</th>
                <th>Maghrib</th>
                <th>Isya</th>
            </tr>
        </thead>
        <tbody>
            
        </tbody>

    </table>
    </div><input type="date" class="hidden" id="jadwal">
<strong>NB: Mungkin ada perbedaan beberapa menit</strong>
</div>

SCSS

body,html {
	font-family: 'Quicksand', sans-serif !important;
}

#app {
	 display: block;
}
 table {
	 margin: 8px auto;
	 text-align: center;
	 display: block;
}
 table th {
	 padding: 8px;
}
 table tr {

}
 table tr td {
	 text-align: center;
	 padding: 8px;
}
 table tr td:nth-child(6) {
	 background: #00796b ;
	 color: white;
}
 strong {
	 font-size: 12px;
	 font-style: italic;
}

.hidden {
	display:none
}

JavaScript

var newDate = new Date();
var senin = newDate.getDay();
var getHari = newDate.getDate();
var getBulan = newDate.getMonth() + 1;
var getTahun = newDate.getFullYear();

var monthWording = {
  '1': 'Januari',
  '2': 'Februari',
  '3': 'Maret',
  '4': 'April',
  '5': 'Mei',
  '6': 'Juni',
  '7': 'Juli',
  '8': 'Agustus',
  '9': 'September',
  '10': 'Oktober',
  '11': 'November',
  '12': 'Desember',
}

var hariWording = {
  '1': 'Senin',
  '2': 'Selasa',
  '3': 'Rabu',
  '4': 'Kamis',
  '5': 'Jumat',
  '6': 'Sabtu',
  '0': 'Ahad'
}

var timeHighlight = `
    <div> ${monthWording[getBulan]} ${getTahun}</div>
`

$("#waktu").append(timeHighlight);

/* function submit() {
  var city = $("#kota").val().toLowerCase();
  alert(city)
} */


  $('#submit').click(function() {
    var value = $("#kota").val();
    $.ajax({
      type: 'get',
      url: 'https://api.pray.zone/v2/times/this_month.json',
      data: 'city=' + value,
      success: function(response) {
        console.log(response);
        $('tbody').children().remove();
        var a;
        $("#city_name").text(response.results.location.city);
        
        for (a = 0; a < response.results.datetime.length; a++) {
        	 $('tbody').append(`
          <tr>
          <td class="tanggal">${response.results.datetime[a].date.gregorian}</td>
          <td class="imsak">${response.results.datetime[a].times.Imsak}</td>
          <td class="subuh">${response.results.datetime[a].times.Fajr}</td>
          <td class="dzuhur">${response.results.datetime[a].times.Dhuhr}</td>
          <td class="ashar">${response.results.datetime[a].times.Asr}</td>
          <td class="maghrib">${response.results.datetime[a].times.Maghrib}</td>
          <td class="isya">${response.results.datetime[a].times.Isha}</td>
          `);
          
        }
      }
    });
  });

/* function jadwal() {
  var today = new Date();
  var dd = today.getDate();
  var mm = today.getMonth() + 1; //January is 0!
  var yyyy = today.getFullYear();
  if...