JSFiddle - React, Tailwind, and code Playground

by omerx

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


<div id='imsakiye'>
	<span id='test-countdown-name'></span>
	<span id='test-countdown' style='margin-left:5px;'></span>
</div>


<select name="sehirler" id="sehirler" onchange="javascript:IftarSahurVakti(this.value)">
	<option value="">Şehir Seçiniz</option>
	<option value="9146">Adana</option>
	<option value="9158">Adıyaman</option>
	<option value="9167">Afyon</option>
	<option value="9185">Ağrı</option>
	<option value="9193">Aksaray</option>
	<option value="9198">Amasya</option>
	<option value="9206">Ankara</option>
	<option value="9225">Antalya</option>
	<option value="9238">Ardahan</option>
	<option value="9246">Artvin</option>
	<option value="9252">Aydın</option>
	<option value="9270">Balıkesir</option>
	<option value="9285">Bartın</option>
	<option value="9288">Batman</option>
	<option value="9295">Bayburt</option>
	<option value="9297">Bilecik</option>
	<option value="9303">Bingöl</option>
	<option value="9311">Bitlis</option>
	<option value="9315">Bolu</option>
	<option value="9327">Burdur</option>
	<option value="9335">Bursa</option>
	<option value="9352">Çanakkale</option>
	<option value="9359">Çankırı</option>
	<option value="9370">Çorum</option>
	<option value="9392">Denizli</option>
	<option value="9402">Diyarbakır</option>
	<option value="9414">Düzce</option>
	<option value="9419">Edirne</option>
	<option value="9432">Elazığ</option>
	<option value="9440">Erzincan</option>
	<option value="9451">Erzurum</option>
	<option value="9470">Eskişehir</option>
	<option value="9479">Gaziantep</option>
	<option value="9494">Giresun</option>
	<option value="9501">Gümüşhane</option>
	<option value="9507">Hakkari</option>
	<option value="9515">Hatay</option>
	<option value="9522">Iğdır</option>
	<option value="9528">Isparta</option>
	<option value="9541">İstanbul</option>
	<option value="9560">İzmir</option>
	<option value="9577">Kahramanmaraş</option>
	<option...

CSS

#imsakiye{
			min-height:50px; 
			background:#ccc; 
			display:flex; 
			align-items:center; 
			justify-content:center;
		}

JavaScript

var saat=0;
$(function(){	

			IftarSahurVakti(9146);
			$('#sehirler option[value="9402"]').prop("selected", true);
});
    
    

function IftarSahurVakti(targetLocationId)
{
clearInterval(saat);

  var $test = $("#imsakiye").eq(0);
  $countdownName = $test.find("#test-countdown-name");
  $countdown = $test.find("#test-countdown");

  var now = new Date();
  var tomorrow = new Date(now);
  tomorrow.setDate(tomorrow.getDate()+1);

  $.ajax({
      type:"get",
      url:"https://namaz-vakti-api.herokuapp.com/data?region="+targetLocationId,
      success:function(response){
          var todayImsak = response[0][1].split(":");
          var todayAksam = response[0][5].split(":");
          var tomorrowImsak = response[1][1].split(":");
          var todayImsakDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), todayImsak[0], todayImsak[1], 0);
          var todayAksamDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), todayAksam[0], todayAksam[1], 0);
          var tomorrowImsakDate = new Date(tomorrow.getFullYear(), tomorrow.getMonth(), tomorrow.getDate(), tomorrowImsak[0], tomorrowImsak[1], 0);

          if(now <= todayImsakDate) $countdownName.text("Sahura kalan süre:");
          else if(now > todayImsakDate && now <=todayAksamDate) $countdownName.text("İftara kalan süre:");
          else $countdownName.text("Sahura kalan süre:");

          calculateCountdown(todayImsakDate, todayAksamDate, tomorrowImsakDate, $countdown);
          saat=setInterval(function() {
              calculateCountdown(todayImsakDate, todayAksamDate, tomorrowImsakDate, $countdown);
          },1000);
      }
  });
  
}

function calculateCountdown(imsakDate, aksamDate, tomorrowImsakDate, $element) {
    now = new Date();
    var targetDate = null;
    if(now <= imsakDate) targetDate = imsakDate;
    else if(now > imsakDate && now <=aksamDate) targetDate = aksamDate;
    else targetDate = tomorrowImsakDate;
    
    var hours = parseInt((targetDate - now)...