JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<button class="bookBtn"> <span>Request Booking</span> </button>
<div id="modal" class="modal" style="display: none;">
  <div class="modal-content"><span class="close">×</span>
    <div id="bookRoomForm" style="display: block;">
      <h2>Request Booking - NY</h2>
      <div class="emailPreview">
        <span class="req">* Required</span>
        <p>Booking request on behalf of: <input type="text" id="onBehalf"></p>
        <p>Preference for specific floor(s) and/or room(s)? <input type="text" id="flRoom" style="max-width: 100px; width: 100%;"></p><sup>Insert the actual meeting start time. Do not add additional time for set up.</sup>
        <p style="margin: 0px !important;display:inline-block;padding-right: 10px;">
        <span class="req">*</span>From: <input type="date" id="datePickerFrom" placeholder="dd-mm-yyyy"> at <select id="hourPickerFrom"></select>:<select id="minutePickerFrom"></select><select id="ampmPickerFrom"></select></p>
        <div class="tooltip">
          <div class="icon">i</div>
          <div class="tooltiptext">
            <div class="toolTxt">Please make sure to contact the Security team to arrange access for any external visitors who need access to the office before/after business hours. (Before 9:30 or after 5:30)</div>
          </div>
        </div>
        <p style="margin-top: 5px;"><span class="req">*</span>To: <input type="date" id="datePickerTo" placeholder="dd-mm-yyyy"> at <select id="hourPickerTo"></select>:<select id="minutePickerTo"></select><select id="ampmPickerTo"></select></p>
        <p>Number of in-person Davis Polk attendees: <input type="number" id="dpAttend" style="max-width: 100px; width: 100%;" value="0"></p>
        <p style="display:inline;padding-right: 10px;"><span class="req">*</span>Number of in-person external attendees: <input type="number" id="exAttend" style="max-width: 100px; width: 100%; display:inline-block;" value="0"></p>
        <div class="tooltip">
          <div class="icon">i</div>
        ...

CSS

.infoList li {
  margin-bottom: 0px !important;
}

.fadeModal {
  animation: fadeModal 0.5s forwards, slideUp 0.5s forwards;
}

@keyframes fadeModal {
  to {
    opacity: 0;
  }
}

@keyframes slideUp {
  to {
    height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* Keyframes for modal fade-in */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Keyframes for zoom-in */
@keyframes zoomIn {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

/* Keyframes for zoom-out */
@keyframes zoomOut {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(0);
  }
}

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 99;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.6);
  /* Black w/ opacity */
  animation: fadeIn 0.5s forwards;
}

.modal-content {
  position: relative;
  margin: 40px auto;
  padding: 20px;
  width: 80%;
  max-width: 900px;
  transform: scale(0);
  /* Start with a smaller scale */
  animation: zoomIn 0.5s forwards;
  /* Animation for zooming in */
  border-radius: 6px;
  background-color: #fff;
  /* Ensure background for content */
}

.modal-content img {
  width: 100%;
  border-radius: 6px;
}

.modal-content #caption {
  margin: auto;
  display: inline-block;
  padding: 10px 0;
}

.close {
  position: absolute;
  top: 0px;
  right: 0px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  background: #5d5d5d80;
  line-height: .6;
  border-radius: 0px 6px 0px 6px;
  padding: 6px 5px 5px 5px;
  cursor: pointer;
}

.close:hover,
.close:focus {
  background: #140be2;
  cursor: pointer;
}

.emailPreview {
  padding: 10px;
  border: 1px solid #d6d5db;
 ...

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  initializeModal();
  populateTimePickers();
});

function initializeModal() {
  var modal = document.getElementById("modal");
  var modalContent = document.querySelector(".modal-content");
  var span = document.getElementsByClassName("close")[0];
  var currentIndex = 0;

  document.querySelectorAll('.bookBtn').forEach(function(btn) {
    btn.onclick = function() {
      modal.style.display = "block";
      document.getElementById('bookRoomForm').style.display = 'block'; // Show booking form
    }
  });

  // When the user clicks on <span> (x), close the modal
  span.onclick = function() {
    modal.style.display = "none";
  }

  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }

  // Handle submit button click
  document.getElementById('submitBooking').addEventListener('click', function() {
    var flRoom = document.getElementById('flRoom').value;
    var onBehalf = document.getElementById('onBehalf').value;
    var dateF = formatDate(document.getElementById('datePickerFrom').value);
    var hourF = document.getElementById('hourPickerFrom').value;
    var minuteF = document.getElementById('minutePickerFrom').value;
    var ampmF = document.getElementById('ampmPickerFrom').value;
    var dateT = formatDate(document.getElementById('datePickerTo').value);
    var hourT = document.getElementById('hourPickerTo').value;
    var minuteT = document.getElementById('minutePickerTo').value;
    var ampmT = document.getElementById('ampmPickerTo').value;
    var dpAttend = document.getElementById('dpAttend').value;
    var exAttend = document.getElementById('exAttend').value;
    var totAttend = dpAttend + totAttend;
    var avNeeds = document.getElementById('avNeeds').value;
    var foodBev = document.getElementById('foodBev').value;
    var cmNum =...