UI Components Easy

Time-Off Request Widget

A time-off request form widget for HR/employee management. Includes leave type selector, date range, reason field, and a running list of pending/approved requests.

Open in Lab

css vanilla-js

Targets: JS HTML

Code

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

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: #0f172a;
  color: #f1f5f9;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}

/* ── Container ── */
.tor-container {
  width: min(520px, 100%);
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #141e33;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 1.25rem;
  overflow: hidden;
}

/* ── Header ── */
.tor-header {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1.375rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tor-header__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 0.625rem;
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  display: grid;
  place-items: center;
}

.tor-header__title {
  font-size: 1rem;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.2;
}

.tor-header__subtitle {
  font-size: 0.8rem;
  color: #64748b;
  margin-top: 0.15rem;
}

/* ── Form ── */
.tor-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.375rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Field ── */
.tor-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.tor-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #94a3b8;
}

.tor-label__optional {
  font-weight: 400;
  color: #475569;
}

/* ── Inputs ── */
.tor-input,
.tor-select,
.tor-textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.625rem;
  color: #f1f5f9;
  font-size: 0.875rem;
  font-family: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  width: 100%;
}

.tor-input,
.tor-select {
  padding: 0.6rem 0.875rem;
  height: 40px;
}

.tor-textarea {
  padding: 0.65rem 0.875rem;
  resize: vertical;
  min-height: 72px;
  line-height: 1.55;
}

.tor-input:focus,
.tor-select:focus,
.tor-textarea:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
}

.tor-input::placeholder,
.tor-textarea::placeholder {
  color: #334155;
}

/* ── Custom select ── */
.tor-select-wrap {
  position: relative;
}

.tor-select {
  appearance: none;
  cursor: pointer;
  padding-right: 2.25rem;
}

.tor-select option {
  background: #1e2d45;
  color: #f1f5f9;
}

.tor-select-arrow {
  position: absolute;
  right: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #475569;
}

/* ── Date row ── */
.tor-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

/* ── Days display ── */
.tor-days-display {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: #475569;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.5rem;
  padding: 0.5rem 0.875rem;
  transition: color 0.2s ease;
}

.tor-days-display.has-days {
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.18);
  background: rgba(56, 189, 248, 0.06);
}

/* ── Error ── */
.tor-error {
  font-size: 0.8rem;
  color: #f87171;
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.18);
  border-radius: 0.5rem;
  padding: 0.5rem 0.875rem;
}

/* ── Submit button ── */
.tor-submit {
  width: 100%;
  padding: 0.65rem 1rem;
  background: #38bdf8;
  color: #0c1a2e;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  border: none;
  border-radius: 0.625rem;
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.tor-submit:hover {
  background: #7dd3fc;
  box-shadow: 0 4px 18px rgba(56, 189, 248, 0.28);
}

.tor-submit:active {
  transform: scale(0.98);
}

.tor-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.tor-submit.success {
  background: #34d399;
  color: #022c22;
}

/* ── Request list ── */
.tor-requests {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.tor-requests__title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tor-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ── List item ── */
.tor-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.625rem;
  animation: slide-in 0.3s ease both;
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tor-item__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  color: #475569;
  flex-shrink: 1;
  overflow: hidden;
}

.tor-item__range {
  font-size: 0.8375rem;
  font-weight: 500;
  color: #cbd5e1;
  white-space: nowrap;
}

.tor-item__type {
  font-size: 0.775rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tor-item__type::before {
  content: "·";
  margin-right: 0.35rem;
}

/* ── Status badges ── */
.tor-badge {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2em 0.6em;
  border-radius: 9999px;
}

.tor-badge--pending {
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
}

.tor-badge--approved {
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
}

.tor-badge--denied {
  background: rgba(248, 113, 113, 0.12);
  color: #f87171;
}

/* ── Date input Chrome/Safari color fix ── */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.4);
  cursor: pointer;
}

(function () {
  "use strict";

  const form = document.getElementById("tor-form");
  const startInput = document.getElementById("start-date");
  const endInput = document.getElementById("end-date");
  const daysWrap = document.getElementById("days-display");
  const daysText = document.getElementById("days-text");
  const errorEl = document.getElementById("tor-error");
  const submitBtn = document.getElementById("tor-submit");
  const list = document.getElementById("tor-list");

  if (!form) return;

  /* ── Day calculation ─────────────────────────────────── */
  function calcDays() {
    const start = startInput.value;
    const end = endInput.value;

    if (!start || !end) {
      daysText.textContent = "Select dates to calculate duration";
      daysWrap.classList.remove("has-days");
      return null;
    }

    const startDate = new Date(start + "T00:00:00");
    const endDate = new Date(end + "T00:00:00");
    const diff = Math.round((endDate - startDate) / 86_400_000);

    if (diff < 0) {
      daysText.textContent = "End date must be after start date";
      daysWrap.classList.remove("has-days");
      return -1;
    }

    const days = diff + 1; // inclusive of both start and end
    daysText.textContent = days === 1 ? "1 day" : `${days} days`;
    daysWrap.classList.add("has-days");
    return days;
  }

  startInput.addEventListener("change", calcDays);
  endInput.addEventListener("change", calcDays);

  /* ── Format a date string "YYYY-MM-DD" as "Mon DD, YYYY" ── */
  function formatDate(isoStr) {
    const d = new Date(isoStr + "T00:00:00");
    return d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
  }

  /* ── Build a range label ─────────────────────────────── */
  function buildRange(start, end) {
    const s = new Date(start + "T00:00:00");
    const e = new Date(end + "T00:00:00");

    const sLabel = s.toLocaleDateString("en-US", { month: "short", day: "numeric" });

    if (start === end) return formatDate(start);

    // Same month + year: "Mar 3–7, 2026"
    if (s.getMonth() === e.getMonth() && s.getFullYear() === e.getFullYear()) {
      return `${sLabel}–${e.getDate()}, ${e.getFullYear()}`;
    }

    // Different month: "Mar 28 – Apr 1, 2026"
    const eLabel = e.toLocaleDateString("en-US", { month: "short", day: "numeric" });
    return `${sLabel} – ${eLabel}, ${e.getFullYear()}`;
  }

  /* ── Map select value → display label ───────────────── */
  const typeLabels = {
    vacation: "Vacation",
    sick: "Sick Leave",
    personal: "Personal",
    parental: "Parental Leave",
    bereavement: "Bereavement",
  };

  /* ── Calendar SVG shared markup ─────────────────────── */
  const calIcon = `<svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
    <line x1="16" y1="2" x2="16" y2="6"/>
    <line x1="8" y1="2" x2="8" y2="6"/>
    <line x1="3" y1="10" x2="21" y2="10"/>
  </svg>`;

  /* ── Prepend new item to the request list ────────────── */
  function prependRequest(range, typeLabel) {
    const li = document.createElement("li");
    li.className = "tor-item";
    li.dataset.status = "pending";
    li.innerHTML = `
      <div class="tor-item__meta">
        ${calIcon}
        <span class="tor-item__range">${range}</span>
        <span class="tor-item__type">${typeLabel}</span>
      </div>
      <span class="tor-badge tor-badge--pending">Pending</span>
    `;
    list.insertBefore(li, list.firstChild);
  }

  /* ── Show / hide error ───────────────────────────────── */
  function showError(msg) {
    errorEl.textContent = msg;
    errorEl.hidden = false;
  }

  function clearError() {
    errorEl.hidden = true;
    errorEl.textContent = "";
  }

  /* ── Submit handler ──────────────────────────────────── */
  form.addEventListener("submit", function (e) {
    e.preventDefault();
    clearError();

    const leaveTypeEl = document.getElementById("leave-type");
    const leaveType = leaveTypeEl.value;
    const start = startInput.value;
    const end = endInput.value;

    // Validation
    if (!leaveType) {
      showError("Please select a leave type.");
      leaveTypeEl.focus();
      return;
    }

    if (!start || !end) {
      showError("Please select both a start date and an end date.");
      (start ? endInput : startInput).focus();
      return;
    }

    const days = calcDays();
    if (days < 0) {
      showError("End date must be on or after start date.");
      endInput.focus();
      return;
    }

    // Success state
    submitBtn.disabled = true;
    submitBtn.textContent = "Submitted!";
    submitBtn.classList.add("success");

    // Add to list
    const range = buildRange(start, end);
    const typeLabel = typeLabels[leaveType] || leaveType;
    prependRequest(range, typeLabel);

    // Reset form after brief pause
    setTimeout(function () {
      form.reset();
      submitBtn.disabled = false;
      submitBtn.textContent = "Submit Request";
      submitBtn.classList.remove("success");
      daysText.textContent = "Select dates to calculate duration";
      daysWrap.classList.remove("has-days");
    }, 1800);
  });
})();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Time-Off Request</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="tor-container">

    <!-- Header -->
    <div class="tor-header">
      <div class="tor-header__icon" aria-hidden="true">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
          <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
          <line x1="16" y1="2" x2="16" y2="6"/>
          <line x1="8" y1="2" x2="8" y2="6"/>
          <line x1="3" y1="10" x2="21" y2="10"/>
        </svg>
      </div>
      <div>
        <h2 class="tor-header__title">Request Time Off</h2>
        <p class="tor-header__subtitle">Submit a leave request for your manager's approval</p>
      </div>
    </div>

    <!-- Form -->
    <form class="tor-form" id="tor-form" novalidate>

      <!-- Leave type -->
      <div class="tor-field">
        <label class="tor-label" for="leave-type">Leave Type</label>
        <div class="tor-select-wrap">
          <select class="tor-select" id="leave-type" name="leaveType" required>
            <option value="" disabled selected>Select leave type…</option>
            <option value="vacation">Vacation</option>
            <option value="sick">Sick Leave</option>
            <option value="personal">Personal</option>
            <option value="parental">Parental Leave</option>
            <option value="bereavement">Bereavement</option>
          </select>
          <svg class="tor-select-arrow" aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="6 9 12 15 18 9"/>
          </svg>
        </div>
      </div>

      <!-- Date range row -->
      <div class="tor-row">
        <div class="tor-field">
          <label class="tor-label" for="start-date">Start Date</label>
          <input class="tor-input" type="date" id="start-date" name="startDate" required />
        </div>
        <div class="tor-field">
          <label class="tor-label" for="end-date">End Date</label>
          <input class="tor-input" type="date" id="end-date" name="endDate" required />
        </div>
      </div>

      <!-- Days calculated -->
      <div class="tor-days-display" id="days-display" aria-live="polite">
        <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="10"/>
          <polyline points="12 6 12 12 16 14"/>
        </svg>
        <span id="days-text">Select dates to calculate duration</span>
      </div>

      <!-- Error message -->
      <p class="tor-error" id="tor-error" role="alert" hidden></p>

      <!-- Reason -->
      <div class="tor-field">
        <label class="tor-label" for="reason">
          Reason <span class="tor-label__optional">(optional)</span>
        </label>
        <textarea class="tor-textarea" id="reason" name="reason" rows="3" placeholder="Briefly describe the reason for your leave…"></textarea>
      </div>

      <!-- Submit -->
      <button class="tor-submit" type="submit" id="tor-submit">Submit Request</button>

    </form>

    <!-- Recent requests list -->
    <div class="tor-requests">
      <h3 class="tor-requests__title">Recent Requests</h3>

      <ul class="tor-list" id="tor-list" aria-label="Leave request history">

        <li class="tor-item" data-status="pending">
          <div class="tor-item__meta">
            <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
              <line x1="16" y1="2" x2="16" y2="6"/>
              <line x1="8" y1="2" x2="8" y2="6"/>
              <line x1="3" y1="10" x2="21" y2="10"/>
            </svg>
            <span class="tor-item__range">Dec 23–25, 2025</span>
            <span class="tor-item__type">Vacation</span>
          </div>
          <span class="tor-badge tor-badge--pending">Pending</span>
        </li>

        <li class="tor-item" data-status="approved">
          <div class="tor-item__meta">
            <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
              <line x1="16" y1="2" x2="16" y2="6"/>
              <line x1="8" y1="2" x2="8" y2="6"/>
              <line x1="3" y1="10" x2="21" y2="10"/>
            </svg>
            <span class="tor-item__range">Jan 15–19, 2026</span>
            <span class="tor-item__type">Sick Leave</span>
          </div>
          <span class="tor-badge tor-badge--approved">Approved</span>
        </li>

        <li class="tor-item" data-status="denied">
          <div class="tor-item__meta">
            <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
              <line x1="16" y1="2" x2="16" y2="6"/>
              <line x1="8" y1="2" x2="8" y2="6"/>
              <line x1="3" y1="10" x2="21" y2="10"/>
            </svg>
            <span class="tor-item__range">Feb 3, 2026</span>
            <span class="tor-item__type">Personal</span>
          </div>
          <span class="tor-badge tor-badge--denied">Denied</span>
        </li>

      </ul>
    </div>

  </div>

  <script src="script.js"></script>
</body>
</html>

A complete HR leave management widget with a request form and a live request history list. The JavaScript automatically calculates the number of days selected, validates the form on submit, and prepends the new request to the history list with a PENDING badge.

Features

Automatic day-count calculation as date inputs change
Client-side validation: start date must not exceed end date
Five leave types: Vacation, Sick Leave, Personal, Parental Leave, Bereavement
Live request list with color-coded PENDING, APPROVED, and DENIED status badges
Brief success state after submission before form reset