prayer_time/main.js at main · A-sleh/prayer_time · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112


// All Cities of Syria
let cities = [
        {
            arabicCityName : 'حلب' ,
            englishCityName : 'Ḩalab'
        },
        {
            arabicCityName : 'الحسكة' ,
            englishCityName : 'Al Ḩasakah'
        },
        {
            arabicCityName : 'اللاذقية' ,
            englishCityName : 'Al Lādhiqīyah'
        },
        {
            arabicCityName : 'القنيطرة' ,
            englishCityName : 'Al Qunayţirah'
        },
        {
            arabicCityName : 'الرقة' ,
            englishCityName : '	Ar Raqqah'
        },
        {
            arabicCityName : 'السويداء' ,
            englishCityName : "As Suwaydā'"
        },
        {
            arabicCityName : 'درعا' ,
            englishCityName : "Dar'ā"
        },
        {
            arabicCityName : 'دير الزور' ,
            englishCityName : '	Dayr az Zawr'
        },
        {
            arabicCityName : 'دمشق' ,
            englishCityName : '	Dimashq'
        },
        {
            arabicCityName : 'حماة' ,
            englishCityName : '	Ḩamāh'
        },
        {
            arabicCityName : 'حمص' ,
            englishCityName : 'Ḩimş'
        },
        {
            arabicCityName : 'ادلب' ,
            englishCityName : 'Idlib'
        },
        {
            arabicCityName : 'ريف دمشق' ,
            englishCityName : '	Rīf Dimashq'
        },
        {
            arabicCityName : 'طرطوس' ,
            englishCityName : '	Ţarţūs'
        },
    ]

// set Selector by Cities name in arabic
let SelectorContainer = document.getElementById('city-selector') ,
    cityName = document.getElementById('city-name') ,
    date = document.getElementById('data') ;

    FillCitiesNameInSelctor()

function FillCitiesNameInSelctor() {
    SelectorContainer.innerHTML = '' ;
    for( citie of cities ) {
        let option = `<option>${citie.arabicCityName}</option>` ;
        SelectorContainer.innerHTML+= option ;
    }
}

// set paryer Times According to the city
    // the default value
    getPrayersTimingsOfCity('Ḩalab') ;
SelectorContainer.addEventListener( 'change' , function() {
    cityName.innerHTML = this.value ;
    getPrayersTimingsOfCity( this.value )
})

// Get data Frome Adhan API
function getPrayersTimingsOfCity( city  ) {
    let param = {
        country : "SY" ,
        city : city ,
    }
    axios.get( 'http://api.aladhan.com/v1/timingsByCity' ,{
        params: param ,
    }).then( response => {
        let timing = response.data.data.timings ;
        fillTimeForParyer( "Fajr" , timing.Fajr) ;
        fillTimeForParyer( "Sunrise" , timing.Sunrise) ;
        fillTimeForParyer( "Dhuhr" , timing.Dhuhr) ;
        fillTimeForParyer( "Asr" , timing.Asr) ;
        fillTimeForParyer( "Sunset", timing.Sunset) ;
        fillTimeForParyer( "Isha", timing.Isha) ;

        let readable = response.data.data.date.readable ;
        let weekday = response.data.data.date.hijri.weekday.ar ;
        // set The date According to The country
        date.innerHTML = weekday + " " + readable ;
    })
}

function fillTimeForParyer( id , time ) {
    document.querySelector(`.${id}`).innerHTML = time ;
}