Get Middle East prayer timing using JavaScript Code

I have created a simple webpart to get QATAR local paryer timing using JavaScript code in SharePoint.

Step 1: Create a script editor web part .

Step 2: Add the below JavaScript code in your project.

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<script>  
    var canvas;  
    var ctx;  
    var radius;  
    $(document).ready(function () {  
        canvas = document.getElementById("canvas");  
        ctx = canvas.getContext("2d");  
        radius = canvas.height / 2;  
        ctx.translate(radius, radius);  
        radius = radius * 0.90  
        setInterval(drawClock, 1000);          
    });  
  
    function drawClock() {  
        drawFace(ctx, radius);  
        drawNumbers(ctx, radius);  
        drawTime(ctx, radius);  
    }  
  
    function drawFace(ctx, radius) {  
        var grad;  
        ctx.beginPath();  
        ctx.arc(0, 0, radius, 0, 2 * Math.PI);  
        ctx.fillStyle = 'white';  
        ctx.fill();  
        grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);  
        grad.addColorStop(0, '#333');  
        grad.addColorStop(0.5, 'white');  
        grad.addColorStop(1, '#333');  
        ctx.strokeStyle = grad;  
        ctx.lineWidth = radius * 0.1;  
        ctx.stroke();  
        ctx.beginPath();  
        ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);  
        ctx.fillStyle = '#333';  
        ctx.fill();  
    }  
  
    function drawNumbers(ctx, radius) {  
        var ang;  
        var num;  
        ctx.font = radius * 0.15 + "px arial";  
        ctx.textBaseline = "middle";  
        ctx.textAlign = "center";  
        for (num = 1; num < 13; num++) {  
            ang = num * Math.PI / 6;  
            ctx.rotate(ang);  
            ctx.translate(0, -radius * 0.85);  
            ctx.rotate(-ang);  
            ctx.fillText(num.toString(), 0, 0);  
            ctx.rotate(ang);  
            ctx.translate(0, radius * 0.85);  
            ctx.rotate(-ang);  
        }  
    }  
  
    function drawTime(ctx, radius) {  
        var now = new Date();  
        var hour = now.getHours();  
        var minute = now.getMinutes();  
        var second = now.getSeconds();  
        //hour  
        hour = hour % 12;  
        hour = (hour * Math.PI / 6) +  
            (minute * Math.PI / (6 * 60)) +  
            (second * Math.PI / (360 * 60));  
        drawHand(ctx, hour, radius * 0.5, radius * 0.07);  
        //minute  
        minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));  
        drawHand(ctx, minute, radius * 0.8, radius * 0.07);  
        // second  
        second = (second * Math.PI / 30);  
        drawHand(ctx, second, radius * 0.9, radius * 0.02);  
    }  
  
    function drawHand(ctx, pos, length, width) {  
        ctx.beginPath();  
        ctx.lineWidth = width;  
        ctx.lineCap = "round";  
        ctx.moveTo(0, 0);  
        ctx.rotate(pos);  
        ctx.lineTo(0, -length);  
        ctx.stroke();  
        ctx.rotate(-pos);  
    }  
</script>  
  
<script>  
  
    $(document).ready(function () {  
        var settings = {  
            "async": true,  
            "crossDomain": true,  
            "url": "https://aladhan.p.mashape.com/timingsByCity?city=Doha&country=Qatar",  
            "method": "GET",  
            "headers": {  
                "x-mashape-key": "4seB9mx5g0mshrkpLviV9IsQKRYNp1cZ9n8jsn70KjeMIgrBxm"  
            }  
        }  
  
        $.ajax(settings).done(function (response) {  
            console.log(response);  
            //var responseObj = JSON.parse(response);  
            var d = new Date();  
            var n = d.getHours();  
            var m = d.getMinutes();  
            m = m / 60;  
            n = n+m;  
            if (n < 6) {  
                $('.prayer_laber ').text("Fajr");  
                $('.prayer_timing').text(response.data.timings.Fajr);  
            }  
            else if (n < 11 && n > 6) {  
                $('.prayer_laber').text("Dhuhr");  
                $('.prayer_timing').text(response.data.timings.Dhuhr);  
            }  
            else if (n < 14 && n > 11) {  
                $('.prayer_laber').text("Asr");  
                $('.prayer_timing').text(response.data.timings.Asr);  
            }  
            else if (n < 16 && n > 14) {  
                $('.prayer_laber').text("Maghrib");  
                $('.prayer_timing').text(response.data.timings.Maghrib);  
            }  
            else if (n < 20 && n > 16) {  
                $('.prayer_laber').text("Isha");  
                $('.prayer_timing').text(response.data.timings.Isha);  
            }  
        });  
    });  
</script>  

The output will appear like below:

You may like following JavaScript tutorials:

• Get current weather using JavaScript in SharePoint Online/2013/2016
• Show JavaScript alert in SharePoint Web part
• Search Word or Substring from Paragraph or String using JavaScript and JQuery
• Creating custom namespace in JavaScript
• Some useful JavaScript methods Variable and objects in Sharepoint 2013
• Get and Set Variable Values from One JavaScript File to another JavaScript File Using Local Storage
• Enable JavaScript in Internet Explorer
• Sequence Of JavaScript Function Loaded After The UI Has Been Loaded in SharePoint 2013

Hope this JavaScript tutorial explains how to get middle east prayer timing JavaScript code.

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

JOIN NOW