docs/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>KosherZmanim demo</title>
    <!--
     This demo uses the unminified version, so that it's easier to step through using the debugger.
     In production, you should use the minified build: `kosher-zmanim.min.js`
      -->
    <script src="https://unpkg.com/kosher-zmanim@0.8.2/dist/kosher-zmanim.js"></script>
  </head>
  <body>
    <h2>KosherZmanim demo</h2>
    <div>You can also open devtools and access <code>KosherZmanim</code> there.</div>
    <br/>

    <table>
      <tr>
        <td><label for="date">Date (ISO 8601)</label></td>
        <td><input id="date"/></td>
      </tr>
      <tr>
        <td><label for="time-zone-id">Timezone ID</label></td>
        <td><input id="time-zone-id" value="America/New_York"/></td>
      </tr>
      <tr>
        <td><label for="location-name">Location Name</label></td>
        <td><input id="location-name" value="Lakewood"/></td>
      </tr>
      <tr>
        <td><label for="latitude">Latitude</label></td>
        <td><input id="latitude" value="40.0821"/></td>
      </tr>
      <tr>
        <td><label for="longitude">Longitude</label></td>
        <td><input id="longitude" value="-74.2097"/></td>
      </tr>
      <tr>
        <td><label for="elevation">Elevation</label></td>
        <td><input id="elevation" value="0"/></td>
      </tr>
      <tr>
        <td><label for="complex">Complex Zmanim</label></td>
        <td><input type="checkbox" id="complex"/></td>
      </tr>
    </table>

    <br/>
    <button id="calculate">Calculate</button>

    <p></p>
    <pre id="output"></pre>

    <script>
      (function() {
        const dateEl = document.querySelector('input#date');
        const timeZoneIdEl = document.querySelector('input#time-zone-id');
        const locationNameEl = document.querySelector('input#location-name');
        const latitudeEl = document.querySelector('input#latitude');
        const longitudeEl = document.querySelector('input#longitude');
        const elevationEl = document.querySelector('input#elevation');
        const complexEl = document.querySelector('input#complex');
        const calculateButtonEl = document.querySelector('button#calculate');
        const outputEl = document.querySelector('#output');

          // Initialize the date field with the current date
        dateEl.value = new Date().toISOString();

        // Add a listener for the Calculate button
        calculateButtonEl.addEventListener('click', () => {
          const options = {
            date: dateEl.value,
            timeZoneId: timeZoneIdEl.value,
            locationName: locationNameEl.value,
            latitude: Number.parseFloat(latitudeEl.value),
            longitude: Number.parseFloat(longitudeEl.value),
            elevation: Number.parseFloat(elevationEl.value),
            complexZmanim: complexEl.checked,
          };

          // Calculate the zmanim to a JSON object
          const json = KosherZmanim.getZmanimJson(options);

          // Output the results
          outputEl.innerText = JSON.stringify(json, null, 2);
        });
      })();
    </script>
  </body>
</html>