JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<!DOCTYPE html>

<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title lang="en">Conf</title>
    <link href="/intranet/SS/Conference%20Services%20DRAFT/Conference%20Room/Floors/confRoomsStyles.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div id="confRoomContainer">
      <div id="floorList"></div>
      <!-- Container for the dropdowns -->
      <div class="dropdown-container">
        <!-- First Dropdown for Min Cap -->
        <div class="dropdown mr-6">
          <div class="filtTitle">Min Capacity</div>
          <div class="dropdown-header filtBtn update-header sqrR" id="minCapHeader">Any<span class="caret"></span></div>
          <div id="capNums" class="dropdown-options dropHeight">
            <div class="option">Any</div>
            <!-- generated by js -->
          </div>
        </div>
        <div class="vidBtnWrap">
          <div class="dropdown-addon"><label class="dpCb"> <input type="checkbox" id="withVideo" /> <span>with video</span></label></div>
        </div>
        <!-- Second Dropdown for AV Required -->
        <div class="dropdown">
          <div class="filtTitle"> </div>
          <div class="dropdown-header filtBtn" id="avReqHeader">AV Required <span class="caret"></span></div>
          <div class="dropdown-options checkboxes stay-open">
            <div class="checkbox-option"><label class="dpCb"> <input type="checkbox" id="selfService" /> <span> Self service</span></label></div>
            <div class="checkbox-option"><label class="dpCb"> <input type="checkbox" id="msTeams" /> <span> MS Teams w/o SIP</span></label></div>
            <div class="checkbox-option"><label class="dpCb"> <input type="checkbox" id="wiredWireless" /> <span> Wired internet connection</span></label></div>
            <div class="checkbox-option"><label class="dpCb"> <input type="checkbox" id="digWhiteboard" /> <span> Digital Whiteboard</span></label></div>
            <div...

CSS

#confRoomContainer .mr-6 {
  margin-right: -6px !important;
}

#confRoomContainer .sqrR {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}


#confRoomContainer .dropdown-container {
  margin: 20px 20px 20px 0px;
  font-size: 14px;
}

#confRoomContainer .dropdown {
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
  position: relative;
}

#confRoomContainer .filtBtn {
  background-color: #f2f2f2;
  padding: 10px 10px 5px 10px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 6px;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  gap: 8px;
}

#confRoomContainer .filtBtn:hover {
  background-color: #eee;
  border-color: #aaa;
}

.caret {
  cursor: pointer;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  height: 10px;
  left: 7px;
  margin-top: -2px;
  position: relative;
  text-align: left;
  transition: 0.4s ease;
  transform: rotate(0);
  width: 13px;
}
.caret:after, .caret:before {
  background-color: transparent;
  border-bottom: 9px solid #444;
  box-sizing: content-box;
  content: "";
  display: inline-block;
  height: 8px;
  left: 0;
  position: absolute;
  top: 0;
  transition: 0.4s ease;
  width: 1px;
}
.caret:before {
  transform: rotate(-135deg);
}
.caret:after {
  transform: rotate(135deg);
}

.caret.active {
  transform: rotate(0);
  transform: translate(0, -6px);
}
.caret.active:before {
  transform: rotate(-45deg);
}
.caret.active:after {
  transform: rotate(45deg);
}

#confRoomContainer .dropdown-options {
  display: none;
  position: absolute;
  width: calc(100% - 2px);
  z-index: 1;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  background-color: white;
  border: 1px solid #ccc;
}

#confRoomContainer .option,
#confRoomContainer .checkbox-option label {
  padding: 10px;
  display: block;
  cursor: pointer;
}

#confRoomContainer .option:hover,
#confRoomContainer...

JavaScript

document.addEventListener('DOMContentLoaded', function () {
  enableSelectBoxes();
  initializeDropdowns();
  initializeAvHighlight();
  initializeCheckboxFilters();
  initializeResetButton();
  initializeModal();
  initializeFloorFilter(); // Initialize floor filter
  populateTimePickers(); // Initialize time pickers
});

function enableSelectBoxes() {
  var selectBoxes = document.querySelectorAll('div.selectBox');

  selectBoxes.forEach(function (selectBox) {
    var firstOption = selectBox.querySelector('div.selectOptions > span.selectOption:first-child');
    var selectedSpan = selectBox.querySelector('span.selected');
    var selectArrow = selectBox.querySelector('span.selectArrow');

    // Set the displayed value and the value attribute to the first option's value
    selectedSpan.innerHTML = firstOption.innerHTML;
    selectBox.setAttribute('value', firstOption.getAttribute('value'));

    // Event listener for clicking on the box to show/hide options
    selectedSpan.addEventListener('click', toggleOptions);
    if (selectArrow) {
      selectArrow.addEventListener('click', toggleOptions);
    }

    // Function to toggle the display of options
    function toggleOptions() {
      var optionsDiv = selectBox.querySelector('div.selectOptions');
      optionsDiv.style.display = (optionsDiv.style.display === 'block') ? 'none' : 'block';
    }

    // Setup click event for all options within this selectBox
    var options = selectBox.querySelectorAll('span.selectOption');
    options.forEach(function (option) {
      option.addEventListener('click', function () {
        var optionsDiv = this.parentNode;
        optionsDiv.style.display = 'none'; // Hide options list
        selectBox.setAttribute('value', this.getAttribute('value')); // Set the value
        selectBox.querySelector('span.selected').innerHTML = this.innerHTML; // Update the displayed value
      });
    });
  });
}

function initializeDropdowns() {
  const minCapOptionsContainer =...