Prayer Times

index.html

<h1>Jamat Times</h1>
<table>
  <tr>
    <td>Fajr</td>
    <td>Zuhr</td>
    <td>Asr</td>
    <td class="active">Maghrib</td>
    <td>Isha</td>
  </tr>
  <tr>
    <td>04:40</td>
    <td>13:30</td>
    <td>18:30</td>
    <td class="active">20:30</td>
    <td>21:30</td>
  </tr>
</table>
<a href="#">View Monthly Timetable &rarr;</a>

prayer-times.markdown

Prayer Times

A simple idea to show prayer times for islamic prayers. Using CSS3 animations to indicate the appropriate time.

A Pen by shariq mohammad on CodePen.

License.

script.js

<script type="text/javascript" src="../PrayTimes.js"></script>
Waterloo, ON, Canada

9/4/2019
Fajr	05:07
Sunrise	06:47
Dhuhr	13:19
Asr	16:59
Maghrib	19:50
Isha	21:24
Midnight	01:19
<script type="text/javascript"> var date = new Date(); // today var times = prayTimes.getTimes(date, [43, -80], -5); var list = ['Fajr', 'Sunrise', 'Dhuhr', 'Asr', 'Maghrib', 'Isha', 'Midnight']; var html = ''; html += ''; for(var i in list) { html += ''; html += ''; } html += '
'+ date.toLocaleDateString()+ '
'+ list[i]+ '	'+ times[list[i].toLowerCase()]+ '
'; document.getElementById('table').innerHTML = html; </script>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

html { font-size: 62.5%; }
*, *:before, *:after {
  box-sizing: content-box;
}

body {
  font-size: 1.4rem;
  line-height: 1.5;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: #333;
  background: #ecf0f1;
  text-align: center;
}

h1 {
  text-align: center;
  font-family: 'Varela Round', sans-serif;
  line-height: 1.3;
  margin: 5rem;
  text-transform: uppercase;
}

table {
  line-height: 1;
  width: 100%;
  max-width: 80rem;
  margin: 5rem auto;
  
  td {
    width: 20%;
    text-align: center;
    padding: 1rem;
  }
  
  tr:first-child {
    font-weight: bold;
    font-size: 1.1rem;
    text-transform: uppercase;
  }
  
  tr:last-child {
    font-size: 2.8rem;
  }
  
  span {
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 0;
    vertical-align: top;
  }
  
}

a {
  text-transform: uppercase;
  font-size: 1.4rem;
  font-weight: 400;
  color: #3498db;
  text-decoration: none;
}

<script type="text/javascript" src="../PrayTimes.js"></script>

Waterloo, ON, Canada

9/4/2019
Fajr	05:07
Sunrise	06:47
Dhuhr	13:19
Asr	16:59
Maghrib	19:50
Isha	21:24
Midnight	01:19

<script type="text/javascript"> var date = new Date(); // today var times = prayTimes.getTimes(date, [43, -80], -5); var list = ['Fajr', 'Sunrise', 'Dhuhr', 'Asr', 'Maghrib', 'Isha', 'Midnight']; var html = ''; html += ''; for(var i in list) { html += ''; html += ''; } html += '

'+ date.toLocaleDateString()+ '
'+ list[i]+ '	'+ times[list[i].toLowerCase()]+ '

'; document.getElementById('table').innerHTML = html; </script>

<title> Daily Prayer Timetable </title> <style> body, td, th {font-family: verdana; font-size: 12px; color: #404040;} #timetable {border-width: 1px; border-style: outset; border-collapse: collapse; border-color: gray; width: 9em;} #timetable td, #timetable th {border-width: 1px; border-spacing: 1px; padding: 2px 4px; border-style: inset; border-color: #CCCCCC;} #timetable th {color:black; text-align: center; font-weight: bold; background-color: #F8F7F4;} </style> <script type="text/javascript" src="../PrayTimes.js"></script>

Waterloo, ON, Canada

9/4/2019
Fajr	05:07
Sunrise	06:47
Dhuhr	13:19
Asr	16:59
Maghrib	19:50
Isha	21:24
Midnight	01:19

<script type="text/javascript"> var date = new Date(); // today var times = prayTimes.getTimes(date, [43, -80], -5); var list = ['Fajr', 'Sunrise', 'Dhuhr', 'Asr', 'Maghrib', 'Isha', 'Midnight']; var html = ''; html += ''; for(var i in list) { html += ''; html += ''; } html += '

'+ date.toLocaleDateString()+ '
'+ list[i]+ '	'+ times[list[i].toLowerCase()]+ '

'; document.getElementById('table').innerHTML = html; </script>