Hent sliderens query-parameter, lav den om til et tal, og vis et passende hype-niveau.
<form action="/event-pass.html" method="get" aria-label="Event-pass formular">
<div class="form-group">
<label for="nickname">Nickname</label>
<input id="nickname" name="nickname" type="text" value="PixelPanda" minlength="2" required aria-describedby="nickname-error">
<p class="error-message" id="nickname-error">Skriv mindst to tegn</p>
</div>
<div class="form-group">
<label for="portfolio">Portfolio (valgfrit)</label>
<p id="portfolio-hint">Brug en fuld URL, fx https://example.com</p>
<input id="portfolio" name="portfolio" type="url" value="https://example.com" aria-describedby="portfolio-hint portfolio-error">
<p class="error-message" id="portfolio-error">Skriv en gyldig URL</p>
</div>
<div class="form-group">
<fieldset aria-describedby="reason-error">
<legend>Hvad håber du at få med hjem?</legend>
<label for="inspiration">
<input id="inspiration" name="reason" type="radio" value="inspiration" checked required>
Inspiration
</label>
<label for="tools">
<input id="tools" name="reason" type="radio" value="tools">
Praktiske værktøjer
</label>
<label for="network">
<input id="network" name="reason" type="radio" value="network">
Nye kontakter
</label>
</fieldset>
<p class="error-message" id="reason-error">Vælg én mulighed</p>
</div>
<div class="form-group">
<label for="hype">Hype-niveau</label>
<input id="hype" name="hype" type="range" min="0" max="100" value="60">
</div>
<div class="form-group">
<label for="guidelines">
<input id="guidelines" name="guidelines" type="checkbox" value="accepted" required aria-describedby="guidelines-error">
Jeg accepterer eventets retningslinjer
</label>
<p class="error-message" id="guidelines-error">Du skal acceptere retningslinjerne</p>
</div>
<button type="submit">Lav event-pass</button>
</form>
const eventPass = document.querySelector(".event-pass");
if (eventPass) {
const nicknameOutput = document.querySelector(".nickname");
const reasonOutput = document.querySelector(".reason-output");
const hypeLevel = document.querySelector(".hype-level");
const params = new URLSearchParams(location.search);
const nickname = params.get("nickname");
const reason = params.get("reason");
nicknameOutput.textContent = nickname;
reasonOutput.textContent = reason;
// Hent hype som et tal, og vis Høj, Middel eller Lav
}
Hints
const hypeValue = Number(params.get("hype"));
if (hypeValue >= 75) {
hypeLevel.textContent = "Høj";
} else if (hypeValue >= 40) {
hypeLevel.textContent = "Middel";
} else {
hypeLevel.textContent = "Lav";
}