praytime
Version:
A JavaScript library for calculating prayer times.
105 lines (85 loc) • 3.46 kB
HTML
<html>
<head>
<title>Yearly Prayer Timetable</title>
<meta name="author" content="Hamid Zarrabi-Zadeh">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="../src/praytime.js"></script>
</head>
<body>
<div class="header">
<form class="form" action="javascript:update();">
Latitude: <input type="text" value="43.65" id="latitude" size="4" onchange="update();">
Longitude: <input type="text" value="-79.4" id="longitude" size="4" onchange="update();">
Year: <input type="text" value="2011" id="year" size="4" onchange="update();">
Time Zone: <select id="timezone" onchange="update();" style="width: 140px;"></select>
Method:
<select id="method" onchange="update()">
<option value="MWL">Muslim World League (MWL)</option>
<option value="ISNA" selected="selected">Islamic Society of North America (ISNA)</option>
<option value="Egypt">Egyptian General Authority of Survey</option>
<option value="Makkah">Umm al-Qura University, Makkah</option>
<option value="Karachi">University of Islamic Sciences, Karachi</option>
<option value="Tehran">Institute of Geophysics, University of Tehran</option>
<option value="Jafari">Leva Research Institute, Qum</option>
<option value="France">Muslims of France</option>
<option value="Russia">Spiritual Administration of Muslims of Russia</option>
<option value="Singapore">Islamic Religious Council of Singapore</option>
</select>
</form>
</div>
<pre>
Date Fajr Sunrise Dhuhr Asr Maghrib Isha
-----------------------------------------------------
</pre>
<div id="timetable"></div>
<div class="footer">
Powered by: <a href="https://praytimes.org">PrayTimes.org</a>
</div>
<script type="text/javascript">
const praytime = new PrayTime();
$('#year').value = (new Date()).getFullYear();
initTimeZoneList();
update();
function update() {
const lat = $('#latitude').value;
const lng = $('#longitude').value;
const timezone = $('#timezone').value;
const method = $('#method').value;
const year = $('#year').value;
// set prayer times parameters
praytime.method(method).location([lat, lng]).timezone(timezone);
$('#timetable').innerHTML = '<pre>' + makeTable(year) + '</pre>';
}
function makeTable(year) {
const date = new Date(+year, 0, 1);
const endDate = new Date(+year + 1, 0, 1);
const labels = ['Fajr', 'Sunrise', 'Dhuhr', 'Asr', 'Maghrib', 'Isha'];
let table = '';
while (date < endDate) {
const times = praytime.getTimes(date); // get prayer times
const day = date.toLocaleString('en-US', { month: 'short', day: '2-digit' });
table += day + '\t' + labels.map(label => times[label.toLowerCase()]).join('\t') + '\n';
date.setDate(date.getDate() + 1); // next day
}
return table;
}
function initTimeZoneList() {
const defaultZone = 'America/Toronto';
const timezones = Intl.supportedValuesOf("timeZone") || [defaultZone];
const selectElement = $('#timezone');
timezones.forEach((timezone) => {
const option = document.createElement('option');
option.value = timezone;
option.textContent = timezone;
if (timezone === defaultZone) { option.selected = true; }
selectElement.appendChild(option);
});
}
function $(selector) {
return document.querySelector(selector);
}
</script>
</body>
</html>