Javascript forløb
ProcesbeskrivelseI Javascript-forløbet arbejdede vi i teams med at re-implementere et kommercielt website og gøre det interaktivt. Vi valgte POWER’s hjemmeside (power.dk) og fokuserede på deres landingpage. Vi startede med at opbygge de udvalgte sider i HTML og CSS, så vi havde en statisk version, og derefter begyndte vi at tilføje JavaScript.
Inden vi fik selve opgavebeskrivelsen, brugte vi tid i gruppen på at afstemme, hvordan vi ville gribe det an. Jeg valgte selv at bruge weekenden på at læse op på JavaScript, så jeg var bedre forberedt, da vi gik i gang.
I projektet arbejdede jeg med to konkrete funktioner:
- en søgefunktion til produkter
- en produktkarousel (carousel)
Søgefunktionen er koblet til et inputfelt, hvor brugeren kan skrive, og produkterne bliver filtreret live på siden. Karousellen viser produkter, som brugeren kan navigere imellem via pile.
Vi arbejdede løbende på løsningen og justerede undervejs, i stedet for at planlægge alt fra start.
Prototypen kan ses her: https://pixeldesignstudio.dk/javascriptprojekt2sem/
Metoder og værktøjerI min søgefunktion arbejdede jeg med DOM-manipulation, loops, if/else-logik og data-attributter. Jeg brugte et inputfelt, hvor jeg via JavaScript hentede brugerens tekst og gjorde den case-insensitive ved at konvertere den til uppercase.
Derefter loopede jeg gennem alle produktkort og hentede produktnavnet via en data-product-name attribut på knappen. På den måde kunne jeg sammenligne brugerens input med produktnavnet og styre visningen af elementerne direkte.
Hvis teksten matchede, blev produktet vist, og hvis ikke, blev det skjult. Det gav en dynamisk søgefunktion uden at siden skulle reloade.
Til karousellen arbejdede jeg med en index-baseret løsning, hvor jeg oprettede en slideIndex, som holder styr på det aktive slide. Jeg ændrer indexet med en funktion (plusSlides), og i showSlides sørger jeg for først at skjule alle slides og derefter kun vise det aktive.
Jeg håndterede også edge cases, så karousellen starter forfra, når man når enden. Hvis index bliver større end antal slides, går den tilbage til første slide, og hvis den bliver mindre end 1, hopper den til sidste.
Undervejs brugte jeg en del console.log og DevTools til debugging, især for at forstå hvordan værdierne ændrede sig i takt med brugerinteraktionerne.
Derudover blev jeg via feedback fra underviseren opmærksom på brugen af defer i script-tags, som er en bedre praksis end at placere scripts nederst i HTML’en, særligt i større projekter.
Video med forklaring af kode:
RefleksionDet sværeste for mig i forløbet var at få søgefunktionen til at fungere stabilt. Især det at sammenligne brugerens input med produkterne og sikre, at de rigtige elementer blev vist og skjult i DOM’en, gav udfordringer. Jeg oplevede flere gange, at løsningen næsten fungerede, men at der stadig var små fejl, som gjorde, at den ikke opførte sig helt som forventet. Det krævede en del justeringer og tålmodighed at få det til at spille helt.
Karousellen viste sig også at være udfordrende, fordi den ikke kun handler om logik, men også om brugeroplevelse. Selvom koden teknisk set virkede, kunne selv små uregelmæssigheder i navigationen få hele komponenten til at føles ustabil eller “off” for brugeren. Det gjorde det tydeligt for mig, hvor vigtigt det er, at interaktive elementer både fungerer korrekt og føles naturlige at bruge.
Meget af min læring kom gennem debugging. I starten prøvede jeg mig ofte frem, men hen ad vejen begyndte jeg at arbejde mere systematisk ved at teste små dele af koden ad gangen og følge værdierne trin for trin. Det gav mig en langt bedre forståelse af, hvor problemerne opstod, og gjorde det nemmere at finde frem til konkrete løsninger.
Feedbacken fra underviseren pegede blandt andet på, at min kode kunne være mere struktureret. Mit fokus lå primært på at få funktionaliteten til at virke, men ikke altid på, hvordan koden var organiseret. Det har gjort mig mere bevidst om, at struktur og overblik er lige så vigtigt som selve løsningen, og at det er noget, jeg skal tænke ind fra starten af udviklingsprocessen.
Vi fik også feedback på vores video, hvor vi skulle forklare vores JavaScript. Her blev det tydeligt for mig, at jeg godt forstår min kode, men at jeg kan blive bedre til at formidle mine valg mere præcist og sammenhængende. Det handler ikke kun om at vise, at koden virker, men også om at kunne koble den til relevant teori og forklare, hvorfor man har valgt en bestemt løsning.
Samarbejdet i gruppen var en vigtig del af processen. Vi arbejdede på forskellige måder, hvilket betød, at vi løbende måtte tilpasse os hinanden. På grund af tidspres endte jeg med at tage flere opgaver, end jeg egentlig burde. Det gav mig en erfaring i, hvordan arbejdsfordeling hurtigt kan skride, hvis den ikke er tydeligt aftalt fra start. Fremadrettet vil jeg være mere opmærksom på at fordele opgaver ud fra kompetencer og sikre en mere balanceret arbejdsproces.
Fremadrettet vil jeg arbejde mere bevidst med at strukturere min JavaScript, så det ikke kun fungerer, men også er logisk opbygget og lettere at vedligeholde. Derudover vil jeg fokusere på at blive bedre til at forklare mine valg, så jeg kan formidle min forståelse mere klart.
Jeg vil også arbejde videre med at koble JavaScript og UX, så mine løsninger ikke kun er teknisk velfungerende, men også skaber en mere intuitiv og sammenhængende brugeroplevelse.