JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css">
<div class="container">
  <div class="row">
    <h1 class="text-center pt-2">Jadwal Sholat Hari ini</h1>
    <h5 class="text-center" id="waktu"></h5>
  
     <div class="row">
       <div class="col-6">
         <div class="card">
           <div class="name">Subuh</div>
           <div class="subuh">...</div>
         </div>
       </div>
       <div class="col-6">
         <div class="card">
           <div class="name">Dzuhur</div>
           <div class="dzuhur">...</div>
         </div>
       </div>
       <div class="col-6">
         <div class="card">
           <div class="name">Ashar</div>
           <div class="ashar">...</div>
         </div>
       </div>
       <div class="col-6">
         <div class="card">
           <div class="name">Maghrib</div>
           <div class="maghrib">...</div>
         </div>
       </div>
       <div class="col-6">
         <div class="card">
           <div class="name">Isya</div>
           <div class="isya">...</div>
         </div>
       </div>
     </div>
  </div>
</div>

SCSS

#waktu {
  font-size: 14px;
  font-weight: bold;
  color: darkred;
}

.card {
  padding: 16px;
  border-radius: 25px;
  margin-bottom: 16px;
  box-shadow: 0 3px 6px #bbb;
  background: radial-gradient(circle, #ececec, #bbb );
  .name {
    font-weight: bold;
  }
}

JavaScript

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

if (getBulan.length == 1) {
	var _getBulan = '0' + getBulan
}

var toString = getBulan.toString().length;

if (toString == 1) {
	var newGetMonth = '0'+ getBulan.toString();
}


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 = `
    ${hariWording[senin]}, ${getHari} ${monthWording[getBulan]} ${getTahun}
`





$("#waktu").append(timeHighlight);
var url = 'https://api.myquran.com/v1/sholat/jadwal/1301/2021/'+newGetMonth+'/'+getHari+'';


function sholatToday(){
  $.ajax({
    url:url,
    method:'GET',
    success: (response) => {
      //console.log(response.data.jadwal.subuh);
      $(".subuh").text(response.data.jadwal.subuh)
      $(".dzuhur").text(response.data.jadwal.dzuhur)
      $(".ashar").text(response.data.jadwal.ashar)
      $(".maghrib").text(response.data.jadwal.maghrib)
      $(".isya").text(response.data.jadwal.isya)

    }
  })
}

/* function sholatMonth(){
  $.ajax({
    url:url,
    method:'GET',
    success: (response) => {
      //
      $(".table-responsive").
    }
  }) 
} */
$(function(){
	sholatToday();
  //sholatMonth();
  
})