Hent style og color fra select-felterne og goal fra textarea. Brug dem til at tilpasse event-passets farve, profil og målsætning.
<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>
<div class="form-group">
<fieldset>
<legend>Hvad interesserer dig?</legend>
<label for="html">
<input id="html" name="interest" type="checkbox" value="HTML" checked>
HTML
</label>
<label for="css">
<input id="css" name="interest" type="checkbox" value="CSS" checked>
CSS
</label>
<label for="javascript">
<input id="javascript" name="interest" type="checkbox" value="JavaScript">
JavaScript
</label>
</fieldset>
</div>
<div class="form-group">
<label for="style">Pass-stil</label>
<select id="style" name="style">
<option value="playful" selected>Legende</option>
<option value="tech">Tech</option>
<option value="editorial">Editorial</option>
</select>
</div>
<div class="form-group">
<label for="color">Pass-farve</label>
<select id="color" name="color">
<option value="orange" selected>Orange</option>
<option value="blue">Blå</option>
<option value="purple">Lilla</option>
</select>
</div>
<div class="form-group">
<label for="goal">Hvad vil du gerne bygge?</label>
<textarea id="goal" name="goal">En lille interaktiv prototype</textarea>
</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 chipOne = document.querySelector(".chip-one");
const chipTwo = document.querySelector(".chip-two");
const chipThree = document.querySelector(".chip-three");
const profileOutput = document.querySelector(".pass-profile");
const goalOutput = document.querySelector(".goal-output");
const params = new URLSearchParams(location.search);
const nickname = params.get("nickname");
const reason = params.get("reason");
const hypeValue = Number(params.get("hype"));
const interests = params.getAll("interest");
nicknameOutput.textContent = nickname;
reasonOutput.textContent = reason;
if (hypeValue >= 75) {
hypeLevel.textContent = "Høj";
} else if (hypeValue >= 40) {
hypeLevel.textContent = "Middel";
} else {
hypeLevel.textContent = "Lav";
}
chipOne.textContent = interests[0] || "Ingen interesser valgt";
chipTwo.textContent = interests[1] || "";
chipThree.textContent = interests[2] || "";
// Hent style, color og goal
// Brug color som eventPass.dataset.color
// Vis goal, og vælg en profiltekst ud fra style
}
Hints
const style = params.get("style");
const color = params.get("color");
const goal = params.get("goal");
eventPass.dataset.color = color;
goalOutput.textContent = goal;
if (style === "tech") {
profileOutput.textContent = "Code explorer";
} else if (style === "editorial") {
profileOutput.textContent = "Visual thinker";
} else {
profileOutput.textContent = "Creative builder";
}