Prayer Times
Imsak
Fajr
Dhuhr
Asr
Maghrib
Isha
Fully customisable widget using the Prayer Times API.
The widget will automatically detect the visitor location and display the appropriate Prayer Times.
You can explore the HTML code here.
You can download a sample here.
If you like our gadget please add a link to our website:
<a href="https://prayertimes.date">Prayer Times</a>

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>