Interaktive CSS-øvelser

<main>
  <section>
    <h2>Formular</h2>
    <p>Submit formularen til <code>/summary.html</code> og byg summary-siden fra query strings.</p>

    <form aria-label="Profile form" action="/summary.html">
      <div class="form-group">
        <label for="first_name">First name</label>
        <input value="Ada" id="first_name" name="first_name" type="text" required />
      </div>

      <div class="form-group">
        <label for="last_name">Last name</label>
        <input value="Lovelace" id="last_name" name="last_name" type="text" required />
      </div>

      <div class="form-group">
        <label for="department">Department</label>
        <select id="department" name="department" required>
          <option value="">Choose a department</option>
          <option value="Frontend" selected>Frontend</option>
          <option value="Backend">Backend</option>
          <option value="Design">Design</option>
        </select>
      </div>

      <div class="form-group">
        <fieldset>
          <legend>Favourite languages</legend>
          <label for="html">
            <input checked type="checkbox" id="html" name="language" value="HTML" />
            HTML
          </label>
          <label for="css">
            <input checked type="checkbox" id="css" name="language" value="CSS" />
            CSS
          </label>
          <label for="javascript">
            <input type="checkbox" id="javascript" name="language" value="JavaScript" />
            JavaScript
          </label>
        </fieldset>
      </div>

      <div class="form-group">
        <label for="message">Message</label>
        <textarea id="message" name="message" required>I would like to practise form actions.</textarea>
      </div>

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

      <button>Show summary</button>
    </form>
  </section>
</main>

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

  const firstName = searchParams.get("first_name");
  const lastName = searchParams.get("last_name");
  const fullName = `${firstName} ${lastName}`;
  const department = searchParams.get("department");
  const message = searchParams.get("message");
  const languages = searchParams.getAll("language").join(", ");

  const sliderValue = Number(searchParams.get("slider"));
  let sliderMessage = "Low volume";
  if (sliderValue < 30) {
    sliderMessage = "Low volume";
  } else if (sliderValue < 70) {
    sliderMessage = "Medium volume";
  } else {
    sliderMessage = "High volume";
  }

  summary.innerHTML = `
    <article class="card">
      <h2>${fullName}</h2>
      <small class="department">${department}</small>
      <p class="langs">${languages}</p>
      <p><q>${message}</q></p>
      <p class="value" style="--val: ${sliderValue}">
        <span>${sliderMessage} (${sliderValue}%)</span>
      </p>
    </article>
  `;
}

Hints

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

const firstName = searchParams.get("first_name");
const lastName = searchParams.get("last_name");
const fullName = `${firstName} ${lastName}`;
const department = searchParams.get("department");
const message = searchParams.get("message");
const languages = searchParams.getAll("language").join(", ");

const sliderValue = Number(searchParams.get("slider"));
let sliderMessage;
if (sliderValue < 30) {
  sliderMessage = "Low volume";
} else if (sliderValue < 70) {
  sliderMessage = "Medium volume";
} else {
  sliderMessage = "High volume";
}

summary.innerHTML = `
  <article class="card">
    <h2>${fullName}</h2>
    <small class="department">${department}</small>
    <p class="langs">${languages}</p>
    <p><q>${message}</q></p>
    <p class="value" style="--val: ${sliderValue}">
      <span>${sliderMessage} (${sliderValue}%)</span>
    </p>
  </article>
`;

Formular

Submit formularen til /summary.html og byg summary-siden fra query strings.