Modul 5 · Kapitel 5.5

Miniuppgift: interaktiv komponent

Bygg en liten komponent där JavaScript ändrar något synligt på sidan.

Mål

Du ska visa att du kan...

planera en enkel interaktion
använda en extern JavaScript-fil
hämta element och lyssna på event
ändra sidan synligt
testa med mus, tangentbord och Console

Uppgift

Bygg en komponent på en befintlig sida

Komponenten ska göra en tydlig sak.

Välj en av idéerna i kapitlet eller skapa en egen på samma nivå.

Börja inte med flera funktioner samtidigt.

Välj komponent

Fyra idéer

MenyknappÖppnar och stänger navigationen

TemaVäxlar tema eller kontrastläge

FAQÖppnar och stänger svar

FormulärVisar feedback utan omladdning

Planera först

Beskriv interaktionen i tre steg

StartlägeVad ser användaren först?

HändelseVad gör användaren?

Nytt lägeVad förändras synligt?

Exempelplan

En panel som öppnas

Del	Plan
Startläge	Panelen är dold.
Händelse	Användaren klickar på knappen.
Nytt läge	Panelen visas med klassen `is-open`.

Krav 1

Extern JavaScript-fil

<script src="js/main.js" defer></script>

Beteendet ska ligga i JavaScript-filen, inte direkt i HTML-elementen.

Krav 2

Hämta minst ett element

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

Selektorn ska matcha elementet i din HTML.

Krav 3

Hantera minst ett event

button.addEventListener("click", function () {
  // Ändringen sker här
});

En riktig button fungerar med både mus och tangentbord.

Krav 4

Sidan ska ändras synligt

En klass växlas.
En text ändras.
En panel visas eller döljs.
Feedback visas nära ett formulär.

Användaren ska förstå att något hände.

Krav 5

Läget ska vara begripligt

Otydligt	Tydligt
Knappen säger alltid ”Klicka”.	Knappen säger ”Visa” eller ”Dölj”.
Ingen synlig reaktion.	Panel, text eller feedback ändras.

Startmall 1

Hämta elementen

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

const panel =
  document.querySelector(".panel");

Börja med att kontrollera att selektorerna stämmer.

Startmall 2

Lyssna och växla klass

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

CSS-klassen bestämmer hur panelens öppna läge ser ut.

CSS

Definiera båda lägena

.panel {
  display: none;
}

.panel.is-open {
  display: block;
}

Simulerat exempel

Interaktiv panel

panel.classList.toggle("is-open");

Startläge: panelen är stängd.

Panelens innehåll

JavaScript har växlat klassen is-open.

Test 1

Mus och tangentbord

Klicka på knappen med musen.
Tryck Tab tills knappen får fokus.
Aktivera knappen med Enter.
Aktivera knappen med mellanslag.

Komponenten ska fungera utan mus.

Test 2

Kontrollera Console

Ladda om sidan.
Öppna Console.
Testa komponenten flera gånger.
Rätta alla felmeddelanden.

Kontrollera särskilt att JavaScript hittar rätt element.

Test 3

Ladda om sidan

Komponenten ska fungera även efter en omladdning.

Om den bara fungerar efter andra klick eller manuella ändringar finns ett fel i startläget.

HTML, CSS och JavaScript ska börja i samma läge.

Självkontroll

Innan du är klar

Syns det tydligt vad som händer?
Är Console fri från fel?
Fungerar komponenten efter omladdning?
Är klass- och variabelnamn begripliga?
Fungerar knappen med tangentbord?

Arbetsordning

Bygg i små steg

Skapa fungerande HTML.
Skapa stängt och öppet läge i CSS.
Koppla den externa JavaScript-filen.
Hämta elementen.
Lägg till eventet och klassväxlingen.
Testa innan du bygger mer.

Sammanfattning

En bra liten komponent

gör en sak tydligt
har JavaScript i en extern fil
hämtar element och lyssnar på ett event
ändrar sidan synligt
fungerar med mus och tangentbord utan fel i Console