Kap 5.5 - Miniuppgift: interaktiv komponent

Mål

• Planera en enkel interaktion innan du kodar.
• Använda extern JavaScript-fil.
• Hämta element, lyssna på event och ändra sidan.
• Testa med mus, tangentbord och webbläsarens konsol.

Uppgift

Bygg en interaktiv komponent på en sida du redan har. Välj en av idéerna eller skapa en egen i samma nivå.

• En menyknapp som öppnar och stänger navigationen.
• En knapp som växlar tema eller kontrastläge.
• En FAQ där svar kan öppnas och stängas.
• Ett formulär som visar tydlig feedback utan sidomladdning.

Krav

• JavaScript ska ligga i en extern fil.
• Minst ett element ska hämtas med querySelector.
• Minst ett event ska hanteras med addEventListener.
• Sidan ska ändras synligt, till exempel text, klass eller feedback.
• Interaktionen ska vara begriplig även om användaren testar långsamt.

Startmall

const button = document.querySelector(".toggle-button");
const panel = document.querySelector(".panel");

button.addEventListener("click", function () {
    panel.classList.toggle("is-open");
});

Självkontroll

• Syns det tydligt vad som händer när användaren klickar?
• Finns det fel i konsolen?
• Fungerar komponenten efter att sidan laddats om?
• Är namn på klasser och variabler begripliga?
• Har du testat med tangentbord om komponenten använder knappar eller formulär?