Projektbeskrivelse:
I arbejder, som udgangspunkt, sammen i jeres allerede eksisterende projekt 4 teams.
Hvert team finder et kommercielt website som skal re-implementeres i HTML, CSS og JavaScript(JS).
Der skal kun implementeres enkelte og udvalgte sider i HTML og CSS, siderne skal implementeres med JavaScript efter eget valg og kreativitet.
Hvert teammedlem skal implementere nok Javascript til at indeholde og demonstrere pensum.
Aflevering (14. februar. 2025 kl 16.00 kl 16.00) på itsLearning:
- Link til løsningen dvs en fungerende online interaktiv prototype (HTML, CSS, JAVASCRIPT).
- i et link til Github -Kildekode (eg. HTML, CSS, Javascript).
- Link til en fælles video (youtube), 4-8 minutter hvor teamet forklarer udvalgt JS kode, som demonstrerer hele pensum.
Proces:
Jeg skulle arbejde sammen med min studiegruppe og veninder: Cecilie, Signe og Mathilde. Vi påbegyndte projektet ved at vælge en hjemmeside at tage udgangspunkt i, og vores valg faldt på Selected Femme. Under vores research fandt vi, at Selected Femme havde en overskuelig og enkel hjemmeside, hvor vi nemt kunne udvælge forskellige JavaScript-elementer at arbejde med.
Allerede den første dag gik vi i gang med at kode siden i HTML og CSS for at skabe en grundlæggende ramme at arbejde videre ud fra. Denne del stod Cecilie og Signe primært for, mens jeg brugte tiden på at sætte mig bedre ind i JavaScript, da jeg syntes, det var en udfordrende disciplin at forstå. Efterfølgende fordelte vi forskellige JavaScript-funktioner mellem os, og jeg valgte at lave en zoom-effekt, hvor musemarkøren forvandles til et forstørrelsesglas, når den føres hen over produktbillederne.
Det er ingen hemmelighed, at jeg fra starten fandt JavaScript svært at forstå. Jeg gik derfor til opgaven ved først at tage udgangspunkt i en guide fra W3 Schools (Image Magnifier Glass), hvor jeg forsøgte at forstå koden trin for trin. Selvom jeg brugte lang tid på denne metode, lykkedes det mig ikke helt at få koden til at give mening, hvilket gjorde mig en smule frustreret.
Heldigvis fik jeg en bedre oplevelse dagen efter. Jeg ændrede taktik og fandt i stedet en YouTube-video, hvor en mand kodede zoom-effekten trin for trin og forklarede processen undervejs. (https://www.youtube.com/watch?v=qXOINUX5Po8) Denne metode fungerede langt bedre for mig, selvom det stadig krævede tid og tålmodighed. Jeg så videoen flere gange og forstod lidt mere for hver gang. Til at begynde med fulgte jeg videoens instruktioner slavisk, men efterhånden fik jeg en bedre forståelse og kunne selv begynde at tilpasse koden, så den passede til vores gruppes projekt og design.
De efterfølgende dage brugte jeg på at færdiggøre zoom-effekten og opnåede en god forståelse af de fleste dele af koden. Undervejs blev jeg dog opmærksom på, at mit kodestykke ikke dækkede hele pensum. Heldigvis lykkedes det mig at inkludere de manglende elementer på cirka en halv dags tid.
Mod slutningen af projektet samlede vi alt vores arbejde i den endelige fil. I denne proces stødte vi på nogle udfordringer, da vi alle havde arbejdet i de samme dokumenter. Flere af os havde brugt de samme HTML-elementer, men givet dem forskellige navne, hvilket skabte konflikter i koden. Denne situation kunne have været undgået med bedre kommunikation fra starten, men vi fandt heldigvis en løsning, så hjemmesiden blev færdig til tiden.
Som en del af opgaven skulle vi også aflevere en video, hvor vi gennemgik og forklarede et stykke JavaScript-kode, der indeholdt alle pensumelementer. Her valgte vi at tage udgangspunkt i Signes kode. I stedet for at lade én person stå for hele præsentationen, valgte vi (til min glæde) at dele koden op mellem os fire, så vi på skift kunne forklare hver vores del. Jeg synes, dette var en god beslutning, da det gav os alle mulighed for at øve os i at formidle vores arbejde – noget, der også bliver relevant til eksamen.
Resultat:
Refleksion:
I løbet af JavaScript-projektet har jeg fået både faglige og personlige erfaringer, der har styrket min forståelse af programmering og samarbejde. Selvom jeg fra starten fandt JavaScript udfordrende, har processen lært mig vigtigheden af at tilpasse mine læringsmetoder og arbejde målrettet for at nå mine mål.
Min første tilgang til at forstå zoom-effekten, ved at følge en guide fra W3 Schools, viste sig at være svær at gennemskue. Det var frustrerende at bruge lang tid uden at opnå den ønskede forståelse. Ved at skifte strategi og i stedet følge en trin-for-trin YouTube-video fik jeg dog en bedre læringsoplevelse. Videoens visuelle og mundtlige forklaringer gjorde det nemmere for mig at forstå koden, selvom det stadig krævede gentagelser og tålmodighed. Denne erfaring har lært mig, at forskellige læringsmetoder kan være afgørende for min forståelse – og at det er vigtigt at skifte tilgang, hvis jeg støder på en mental blokering.
I samarbejdsprocessen oplevede vi udfordringer, da vi alle arbejdede i de samme dokumenter uden at have koordineret brugen af HTML-elementer og navngivning. Dette skabte konflikter i koden, som vi måtte bruge tid på at rette op på. Denne udfordring kunne have været undgået med bedre kommunikation fra start, hvilket er en vigtig læring, som jeg vil tage med mig til fremtidige projekter.
Afslutningsvis var jeg særligt tilfreds med, at vi valgte at præsentere Signes JavaScript-kode i videoen ved at dele forklaringen op mellem os alle. Selvom én person kunne have stået for præsentationen, gav denne løsning os alle mulighed for at øve os i at formidle vores arbejde, hvilket også er relevant for den kommende eksamen.
Samlet set har projektet lært mig, at selvom JavaScript kan være komplekst, kan en målrettet og tålmodig tilgang, kombineret med de rette læringsmetoder, føre til gode resultater. Derudover har jeg fået øjnene op for, hvor vigtigt det er at kommunikere klart og koordinere opgaverne i et gruppearbejde for at undgå unødvendige fejl og misforståelser.