Add the CSS code inside the <header></header> of your HTML page or the link element above:
<link href="https://prayertimes.date/css/widget.api.v1.min.css" rel="stylesheet" />
<style>
#prayer-container {
width: 300px;
text-align: center;
}
.prayer_time {
font-size: 1.6em;
font-weight: 800;
}
#prayer-container #prayer_city {
font-size: 1.2em;
font-weight: 800;
}
#prayer-container table {
width: 100%
}
#prayer-container tbody tr:nth-child(odd) {
background-color: #f3f3f3;
}
#prayer-container tbody td {
padding: 10px 20px;
}
#prayer-container tbody td:nth-child(1) {
text-align: left;
}
#prayer-container tbody td:nth-child(2) {
text-align: right;
}
</style>
Add the HTML code where you want to display the widget
Prayer Times
| Imsak |
|
| Fajr |
|
| Dhuhr |
|
| Asr |
|
| Maghrib |
|
| Isha |
|
Add the Javascript code inside the <body></body> of your HTML page or the script above:
<script src="https://prayertimes.date/js/widget.api.v1.min.js"></script>
<script>
function PrayerTimesApi() {
var userLang = navigator.language || navigator.userLanguage;
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status === 200) {
var prayer_results = JSON.parse(request.responseText);
console.log(JSON.stringify(prayer_results.results.location.local_offset));
var prayer_date = new Date(prayer_results.results.datetime[0].date.gregorian);
var local_offset = prayer_results.results.location.local_offset;
document.getElementById("prayer_city").innerHTML = prayer_results.results.location.city;
document.getElementById("prayer_date").innerHTML = prayer_date.toLocaleDateString(userLang, options);
document.getElementById("Imsak").innerHTML = prayer_results.results.datetime[0].times.Imsak;
document.getElementById("Fajr").innerHTML = prayer_results.results.datetime[0].times.Fajr;
document.getElementById("Dhuhr").innerHTML = prayer_results.results.datetime[0].times.Dhuhr;
document.getElementById("Asr").innerHTML = prayer_results.results.datetime[0].times.Asr;
document.getElementById("Maghrib").innerHTML = prayer_results.results.datetime[0].times.Maghrib;
document.getElementById("Isha").innerHTML = prayer_results.results.datetime[0].times.Isha;
SetTheClock(local_offset);
} else {
console.log('An error occurred during your request: ' + request.status + ' ' + request.statusText);
}
}
};
request.open('Get', api_url, true);
request.send();
}
function time(offset) {
var location_date = new Date(new Date().getTime() + (offset * 60000));
var hours = location_date.getUTCHours(),
minutes = location_date.getUTCMinutes(),
seconds = location_date.getUTCSeconds();
hours = addZero(hours);
minutes = addZero(minutes);
seconds = addZero(seconds);
document.getElementById("prayer_clock").innerHTML = hours + ':' + minutes + ':' + seconds;
}
function addZero(val) {
return (val <= 9) ? ("0" + val) : val;
}
function SetTheClock(local_offset) {
time(local_offset);
setInterval(function () { time(local_offset); }, 1000);
}
</script>