Interaktive CSS-øvelser

<main>
  <section class="program-finder">
    <h2>Find dit program</h2>
    <p>Vælg filtre og submit formularen. Resultaterne vises under formularen, og valgene ligger i URL'en som query strings.</p>

    <form aria-label="Find program">
      <div class="form-group">
        <label for="day">Dag</label>
        <select id="day" name="day">
          <option value="Fredag" selected>Fredag</option>
          <option value="Lørdag">Lørdag</option>
          <option value="Søndag">Søndag</option>
        </select>
      </div>

      <div class="form-group">
        <label for="type">Type</label>
        <select id="type" name="type">
          <option value="Workshop" selected>Workshop</option>
          <option value="Talk">Talk</option>
          <option value="Showcase">Showcase</option>
        </select>
      </div>

      <div class="form-group">
        <label for="level">Niveau</label>
        <select id="level" name="level">
          <option value="Begynder" selected>Begynder</option>
          <option value="Let øvet">Let øvet</option>
          <option value="Avanceret">Avanceret</option>
        </select>
      </div>

      <button>Find events</button>
    </form>

    <section class="results" data-results>
      <p class="empty-state">Dine programforslag vises her, når du har valgt filtre.</p>
    </section>
  </section>
</main>

const results = document.querySelector("[data-results]");
const daySelect = document.querySelector("#day");
const typeSelect = document.querySelector("#type");
const levelSelect = document.querySelector("#level");

if (results) {
  const paramsString = window.location.search;
  const searchParams = new URLSearchParams(paramsString);

  if (paramsString) {
    const day = searchParams.get("day");
    const type = searchParams.get("type");
    const level = searchParams.get("level");

    daySelect.value = day;
    typeSelect.value = type;
    levelSelect.value = level;

    results.innerHTML = `
      <article class="program-card">
        <p class="eyebrow">${day} · ${type} · ${level}</p>
        <h2>${type}: Campus Culture Lab</h2>
        <p>Et programforslag baseret på de filtre, der ligger i URL'en.</p>

        <details>
          <summary>Se praktisk info</summary>
          <p>Tid: 10.00-11.30</p>
          <p>Lokale: Studio 2</p>
        </details>

        <button popovertarget="event-info">Læs mere</button>
      </article>

      <div popover id="event-info">
        <h3>Om sessionen</h3>
        <p>Sessionen er tænkt som en kort, praktisk introduktion til interaktive weboplevelser.</p>
      </div>
    `;
  }
}

/

Hints

const results = document.querySelector("[data-results]");
const paramsString = window.location.search;
const searchParams = new URLSearchParams(paramsString);

const day = searchParams.get("day");
const type = searchParams.get("type");
const level = searchParams.get("level");

results.innerHTML = `
  <article class="program-card">
    <p class="eyebrow">${day} · ${type} · ${level}</p>
    <h2>${type}: Campus Culture Lab</h2>
    <p>En praktisk session for studerende, der vil bygge en lille interaktiv prototype.</p>
  </article>
`;

Find dit program

Vælg filtre og submit formularen. Resultaterne vises under formularen, og valgene ligger i URL'en som query strings.

Dine programforslag vises her, når du har valgt filtre.