Læringsportal for frontend-utviklere

Hva er JavaScript?

JavaScript (JS) er språket som gjør nettsider interaktive.
... HTML lager innholdet, CSS bestemmer utseendet, og JavaScript gir logikk, handlinger og respons når brukeren klikker, skriver eller scroller.

• JavaScript-koden på nettsiden styrer tre viktige funksjoner: mobilnavigasjonen, “Les mer”-knappene og automatisk årstall i bunnteksten.
• Mobilmenyen åpnes og lukkes ved å endre CSS klasser og oppdatere aria-expanded for tilgjengelighet.
• “Les mer”-knappene fungerer ved at JavaScript finner den riktige teksten i hvert kort og viser eller skjuler den når brukeren klikker. I tillegg setter JavaScript inn riktig årstall i footer ved hjelp av new Date().getFullYear(). Disse funksjonene gjør nettsiden mer brukervennlig, moderne og dynamisk.

Illustrasjon av mobilnavigasjon og hamburger-meny

Mobilnavigasjon (hamburger-meny)

querySelector(".nav-toggle") finner menyknappen (☰).
getElementById("site-nav") finner selve navigasjonsmenyen.

... addEventListener("click") gjør at funksjonen kjører når brukeren trykker på knappen.
aria-expanded oppdateres for tilgjengelighet (f.eks. for skjermlesere).
nav.classList.toggle("open") viser eller skjuler menyen ved å legge til eller fjerne CSS-klassen "open".

Les mer / Vis mindre”-funksjon

querySelectorAll(".read-more-btn") finner alle “Les mer”-knappene på siden.

button.closest(".card-body") gjør at hver knapp kun kontrollerer sin egen tekst.

...

moreText er teksten som skal vises/skjules

dots er “...” som vises når teksten er skjult.

hidden er en CSS klasse som skjuler tekst.

Automatisk årstall i footer

getElementById("year") finner <span id="year"> i bunnteksten. ...

new Date().getFullYear() henter det nåværende året fra brukerens datamaskin.
textContent skriver dette årstallet inn i HTML-elementet, slik at fotnoten alltid er oppdatert uten at du trenger å endre den manuelt.