JSFiddle - React, Tailwind, and code Playground

by ShaCP

HTML

<div class="event_list_container">
        <div class="event_list_controls">
            <button class="create_event">Create event</button>
        </div>
        <div class="event_cards_container"></div>
    </div>

JavaScript

const setUpUtilities = () => {
  function HTMLparser(HTMLstring) {
    const parser = document.createElement("div");
    parser.innerHTML = HTMLstring;
    const parsed = parser.firstElementChild;
    return parsed;
  }

  const qS = (selector, scope = document) => scope.querySelector(selector);
  const qSA = (selector, scope = document) => scope.querySelectorAll(selector);

  function querySelectorFrom(selector, elements) {
    return Array.prototype.filter.call(elements, (element) => 
   element.matches(selector))
  }

  return  {
    HTMLparser,
    qS,
    qSA,
    querySelectorFrom
  };
}

const {
  HTMLparser,
  qS,
  qSA,
  querySelectorFrom
} = setUpUtilities();

const eventListSetup = () => {
  const eventListData = [];

  // set up modal to add / edit event cards in event list
  // as well as the event data object stored for every card
  const modalSetup = () => {
    // form inside modal for updating / editting event data
    const modalForm = `
  <form class="event_modal_form">
  <label class="data_input_container text_input_container">
      Date<input type="date" class="data_input date_input">
  </label>
  <label class="data_input_container text_input_container">
      Summary<textarea class="data_input event_input event_summary_input"></textarea>
  </label>
  <label class="data_input_container text_input_container">
      Description<textarea class="data_input event_input event_description_input"></textarea>
  </label>
  <div class="data_input_container image_input_container">
      <div class="data_input image_input">
          <div class="event_image_container">IMG</div>
          <input type="file" class="image_picker">
      </div>
  </div>
  <button class="save_event_button event_modal_button" type="submit">Save Event</button>
  </form>
  `;

    // add form to modal then parse modal
    const modal = HTMLparser(`
  <div class="modal_container">
  ${modalForm}
  </div>
  `);

    return modal;
  };

  // get modal
  const modal =...