JSFiddle - React, Tailwind, and code Playground

by whenavailable

HTML

<html>

  <body>
    <p>
      ***** Demo *****
    </p>
    <p>
      Hiking Adventures has these available dates:
    </p>
    <input type="checkbox" name="date_time_options" value="2027-06-14 08:00" checked>
    <label>Mon June 14th, 2027 @ 08:00</label>
    <br>
    <input type="checkbox" name="date_time_options" value="2027-07-12 08:00" checked>
    <label>Mon July 12th, 2027 @ 08:00</label>
    <br>
    <input type="checkbox" name="date_time_options" value="2027-07-26 08:00" checked>
    <label>Mon July 26th, 2027 @ 08:00</label>
    <br>
    <input type="checkbox" name="date_time_options" value="2027-08-09 08:00" checked>
    <label>Mon Aug 9th, 2027 @ 08:00</label>
    <br>
    <input type="checkbox" name="date_time_options" value="2027-08-23 08:00" checked>
    <label>Mon Aug 23rd, 2027 @ 08:00</label>
    <br>


    <p>
      Select dates and then click the "Start a Poll" button to use WhenAvailable to 
      find out what times work best for your group.
    </p>

    <button onclick="createPoll()">Start a Poll</button>

    <p>
      Hiking Adventures looks forward to hearing back from you when you have finalized
      the date with your group.
    </p>

    <script>
      function createPoll() {
        const checkedDateTimes = document.querySelectorAll('input[type="checkbox"]:checked');
        const checkedDateTimeValues = [...checkedDateTimes].map(checkbox => checkbox.value);
        const dataToWhenAvailable = JSON.stringify({
          ref: 'Hiking Adventures',
          title: 'Guided hike in Italy',
          dates: checkedDateTimeValues,
          location: 'Verona, Italy',
          tz: 'GMT+01:00 CET Europe/Rome',
          theme: 'theme-free-ah-1003',
          description: 'The hike is 5 days and include breakfast and tracking.'
        });

        const target = 'https://whenavailable.com/create?data=';
        const encodedData = encodeURIComponent(dataToWhenAvailable);
        const...