Til dette projekt skulle vi i teams finde et kommercielt website og lave udvalgte sider i HTML, CSS og JavaScript. Jeg var på hold med Monica, Nima og Selin, og vi valgte jysk.dk. Vi snakkede med Thomas og blev enige om at tage hver vores underside, og jeg endte med tilbudssiden.

Jeg skal være ærlig… JavaScript er virkelig IKKE min stærke side, og det hele føles lidt overvældende i starten. Men jeg fik det til at virke, og her er hvad jeg lavede:

Alert og velkomst: Når man åbner siden, popper der en alert op der siger “Velkommen til JYSK!”. Jeg lavede også en overskrift med document.createElement, som bliver sat ind øverst på siden med prepend. Det var en af de første ting jeg fik til at virke, og det gav lidt selvtillid.

Pris-slider: Man kan trække i to sliders for at vælge min- og max-pris. Jeg brugte getElementById til at finde sliderne og addEventListener(“input”) til at lytte efter ændringer. Der er også en funktion der sørger for at min ikke kan blive højere end max – det tog mig lidt tid at finde ud af.

Filtrering med checkboxes: Under kategori og mærker kan man sætte flueben, og under “Alle filtre” kan man se en samlet oversigt over hvad man har valgt. Jeg brugte querySelectorAll til at finde alle checkboxes og forEach til at loope igennem dem. Det var nok den del der tog længst tid, fordi alt skulle opdateres på samme tid.

Favorit-knappen: Hvert produkt har et lille hjerte man kan klikke på. Det skifter mellem ♡ og ♥ med classList.toggle. Den var faktisk ret satisfying at få til at virke.

Tilføj til kurv: Når man klikker “Tilføj til kurv” popper der en lille besked op der siger fx “ESTHER er tilføjet til kurven!”. Den finder produktnavnet med closest og querySelector, og lukker sig selv efter 3 sekunder med setTimeout. Man kan også lukke den manuelt med krydset.

Video forklaring af egen kode:

Links:

Monica: Github – Hjemmeside

Nima: Github – Hjemmeside

Selin: Github – Hjemmeside

Refleksion:

Kodning er ikke min ting, og det her projekt var svææææært for mig. Jeg brugte lang tid på at forstå hvordan addEventListener virker, og hvordan man får forskellige elementer til at snakke sammen. Men det at vi skulle lave en video hvor vi forklarede vores kode tvang mig til faktisk at forstå hvad der sker, i stedet for bare at følge tutorials blindt.

Det sværeste var filtreringsdelen – at få pris-slider, checkboxes og “Alle filtre”-oversigten til at opdatere sammen. Ej, det hele var faktisk meget svært… Meeen det nemmeste var nok favorit-knappen, classList.toggle er bare nice. Jeg kan mærke at det bliver lidt nemmere jo mere man sidder med det, men det kræver bare virkelig tålmodighed.