Availability Finder

by hcanning2012

HTML

<div class="container">
  <header>
    <h1>HCANN | Availability Finder</h1>
    <p class="subtitle">Find the perfect meeting time</p>
  </header>
  <main>
    <p class="instruction">Instruction: Add top 3 times for each attendee</p>
    <div id="attendeeList" class="attendee-list"></div>
    <div class="controls">
      <button id="addAttendeeBtn2" class="btn btn-primary">
        + Add Attendee
      </button>
      <button id="clearAllBtn" class="btn btn-secondary">Reset</button>
    </div>
    <div class="action-section">
      <button id="findTimeBtn" class="btn btn-action">
        Find Available Times
      </button>
    </div>
    <div id="results" class="results hidden">
      <h2>Top Available Times</h2>
      <div id="resultsList"></div>
    </div>
  </main>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, sans-serif;
  background-color: #f5f5f5;
  color: #333;
  line-height: 1.4;
  padding: 0.5rem;
  margin: 0;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

header {
  background: #c00;
  color: #fff;
  padding: 0.75rem 1rem;
  text-align: center;
}

header h1 {
  font-size: 1.2rem;
  margin-bottom: 0;
}

.subtitle {
  font-size: 0.8rem;
  opacity: 0.9;
  margin-top: 0.1rem;
}

main {
  padding: 1rem;
}

.controls {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.instruction {
  font-size: 0.9rem;
  color: #fff;
  background: #28a745;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  margin-bottom: 1rem;
  display: inline-block;
  font-weight: 500;
}

.btn {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
  border: 2px solid transparent;
}

.btn-primary {
  background: #fff;
  color: #cc0000;
  border: 2px solid #cc0000;
  min-width: 120px;
}

.btn-primary:hover {
  background: #f9f9f9;
  color: #a30000;
  border-color: #a30000;
}

.btn-secondary {
  background: #fff;
  color: #cc0000;
  border: 2px solid #cc0000;
  min-width: 120px;
}

.btn-secondary:hover {
  background: #f9f9f9;
  color: #a30000;
  border-color: #a30000;
}

.btn-action {
  background: #fff;
  color: #cc0000;
  border: 2px solid #cc0000;
  width: auto;
  min-width: 120px;
  font-size: 1rem;
  padding: 0.75rem 2rem;
}

.btn-action:hover {
  background: #f9f9f9;
  color: #a30000;
  border-color: #a30000;
}

.btn-remove {
  background: #fff;
  color: #cc0000;
 ...

JavaScript

let attendees = [],
  attendeeCounter = 0;
const attendeeList = document.getElementById("attendeeList"),
  addAttendeeBtn2 = document.getElementById("addAttendeeBtn2"),
  clearAllBtn = document.getElementById("clearAllBtn"),
  findTimeBtn = document.getElementById("findTimeBtn"),
  resultsDiv = document.getElementById("results"),
  resultsList = document.getElementById("resultsList");

function init() {
  (loadFromLocalStorage(), renderAttendees(), attachEventListeners());
}

function attachEventListeners() {
  (addAttendeeBtn2.addEventListener("click", addAttendee),
    clearAllBtn.addEventListener("click", clearAll),
    findTimeBtn.addEventListener("click", findAvailableTimes));
}

function addAttendee() {
  attendeeCounter++;
  const e = {
    id: Date.now(),
    number: attendeeCounter,
    name: "",
    date1: "",
    time1: "",
    date2: "",
    time2: "",
    date3: "",
    time3: "",
  };
  (attendees.push(e), renderAttendees(), saveToLocalStorage());
}

function removeAttendee(e) {
  ((attendees = attendees.filter((t) => t.id !== e)),
    renderAttendees(),
    saveToLocalStorage());
}

function clearAll() {
  confirm("Are you sure you want to clear all attendees?") &&
    ((attendees = []),
    (attendeeCounter = 0),
    renderAttendees(),
    saveToLocalStorage(),
    hideResults());
}

function renderAttendees() {
  let e = `<div class=\"attendee-card demo-row\"><div class=\"attendee-row\"><span class=\"attendee-number\">EX</span> <input type=\"text\" class=\"input-name\" value=\"Name\" disabled> <input type=\"text\" class=\"input-date\" value=\"m/d - 2/5\" disabled> <input type=\"text\" class=\"input-time\" value=\"e.g. 11:30AM\" disabled> <input type=\"text\" class=\"input-date\" value=\"m/d - 2/5\" disabled> <input type=\"text\" class=\"input-time\" value=\"e.g. 11:30AM\" disabled> <input type=\"text\" class=\"input-date\" value=\"m/d - 2/5\" disabled> <input type=\"text\" class=\"input-time\"...