Interaktive CSS-øvelser

<main>
  <section>
    <h2>Søg efter materialer</h2>
    <p>Formularen bruger en almindelig GET-request, så valgene bliver til query strings i URL'en.</p>

    <form aria-label="Søg efter materialer" action="/results.html">
      <div class="form-group">
        <label for="query">Søgeord</label>
        <input value="portfolio" id="query" name="query" type="search" required />
      </div>

      <div class="form-group">
        <label for="category">Kategori</label>
        <select id="category" name="category" required>
          <option value="">Vælg kategori</option>
          <option value="Web" selected>Web</option>
          <option value="Design">Design</option>
          <option value="Content">Content</option>
        </select>
      </div>

      <div class="form-group">
        <fieldset>
          <legend>Formater</legend>
          <label for="article">
            <input checked type="checkbox" id="article" name="format" value="Artikel" />
            Artikel
          </label>
          <label for="video">
            <input checked type="checkbox" id="video" name="format" value="Video" />
            Video
          </label>
          <label for="template">
            <input type="checkbox" id="template" name="format" value="Template" />
            Template
          </label>
        </fieldset>
      </div>

      <div class="form-group">
        <label for="level">Niveau</label>
        <input id="level" name="level" type="range" min="0" max="100" value="45" />
      </div>

      <button>Søg</button>
    </form>
  </section>
</main>

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

  const query = searchParams.get("query");
  const category = searchParams.get("category");
  const formats = searchParams.getAll("format").join(", ");
  const level = Number(searchParams.get("level"));

  let levelText;
  if (level < 30) {
    levelText = "Begynder";
  } else if (level < 70) {
    levelText = "Let øvet";
  } else {
    levelText = "Avanceret";
  }

  results.innerHTML = `
    <article class="result-card">
      <p class="eyebrow">Din søgning</p>
      <h2>${query}</h2>
      <p>Kategori: <strong>${category}</strong></p>
      <p>Formater: ${formats}</p>
      <p class="level" style="--val: ${level}">
        <span>${levelText} (${level}%)</span>
      </p>
    </article>
  `;
}

Hints

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

const query = searchParams.get("query");
const category = searchParams.get("category");
const formats = searchParams.getAll("format").join(", ");
const level = Number(searchParams.get("level"));

let levelText;
if (level < 30) {
  levelText = "Begynder";
} else if (level < 70) {
  levelText = "Let øvet";
} else {
  levelText = "Avanceret";
}

results.innerHTML = `
  <article class="result-card">
    <p class="eyebrow">Din søgning</p>
    <h2>${query}</h2>
    <p>Kategori: <strong>${category}</strong></p>
    <p>Formater: ${formats}</p>
    <p class="level" style="--val: ${level}">
      <span>${levelText} (${level}%)</span>
    </p>
  </article>
`;

Søg efter materialer

Formularen bruger en almindelig GET-request, så valgene bliver til query strings i URL'en.