<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://apis.google.com/js/api.js"></script>
  <style>
    body {
      background-color: transparent;
    }

    h1 {
      color: black;
    }

    #prayerTimes {
      margin-top: 20px;
      border-collapse: collapse;
    }

    #prayerTimes span {
      display: block;
      padding: 10px;
      border-bottom: 1px solid lightgrey;
      color: black;
    }

    #prayerTimes span:last-child {
      border-bottom: none;
    }
  </style>
</head>
<body>
  <h1>Islamic Prayer Times</h1>
  <table id="prayerTimes"></table>

  <script>
    // Load the Google Sheets API
    gapi.load('client', initClient);

    // Initialize the API client and make the request
    function initClient() {
      gapi.client.init({
        apiKey: 'YOUR_API_KEY',
        discoveryDocs: ['https://sheets.googleapis.com/$discovery/rest?version=v4'],
      }).then(fetchPrayerTimes);
    }

    // Fetch the prayer times from the Google Sheet
    function fetchPrayerTimes() {
      gapi.client.sheets.spreadsheets.values.get({
        spreadsheetId: 'YOUR_SPREADSHEET_ID',
        range: 'Sheet1!A2:E', // Assuming prayer times are in columns A to E, starting from row 2
      }).then(function(response) {
        var prayerTimesData = response.result.values;
        var currentDate = new Date().toLocaleDateString();

        // Find the row with the current date
        var row = prayerTimesData.find(function(row) {
          return row[0] === currentDate;
        });

        // Extract prayer times from the row
        var prayerTimes = row.slice(1);

        // Display prayer times on the web page
        var prayerTimesElement = document.getElementById('prayerTimes');
        prayerTimesElement.innerHTML = '';

        for (var i = 0; i < prayerTimes.length; i++) {
          var prayerTime = prayerTimes[i];
          var prayerName = getPrayerName(i);

          var rowElement = document.createElement('tr');
          var prayerNameCell = document.createElement('td');
          var prayerTimeCell = document.createElement('td');

          prayerNameCell.innerHTML = prayerName;
          prayerTimeCell.innerHTML = prayerTime;

          rowElement.appendChild(prayerNameCell);
          rowElement.appendChild(prayerTimeCell);
          prayerTimesElement.appendChild(rowElement);
        }
      });
    }

    // Helper function to get prayer name based on index
    function getPrayerName(index) {
      var prayerNames = ['Fajr', 'Dhuhr', 'Asr', 'Maghrib', 'Isha'];
      return prayerNames[index];
    }
  </script>
  
  <script src="https://apis.google.com/js/client.js?onload=initClient"></script>
</body>
</html>

Introduce your brand

Take a minute to write an introduction that is short, sweet, and to the point.

Sign up