Projektbeskrivelse
I dette projekt skulle vi i grupper vælge et eksisterende kommercielt website, som vi skulle reimplementere ved hjælp af HTML, CSS og JavaScript. Vi skulle udvælge enkelte sider fra hjemmesiden og genskabe deres visuelle udtryk og opbygning. Derudover skulle vi selv vælge, hvordan JavaScript kunne bruges til at gøre løsningen interaktiv.
Et krav til projektet var, at hvert gruppemedlem skulle implementere nok JavaScript til at demonstrere det pensum, vi havde arbejdet med. Den færdige løsning skulle afleveres som en fungerende online prototype sammen med et link til kildekoden på GitHub. Derudover skulle vi lave en fælles video på 4 til 8 minutter, hvor vi gennemgår udvalgte dele af vores JavaScript-kode.
Jeg var i gruppe med Laura og Patrick, og vi valgte at arbejde med eBay.
Processen
Vi startede projektet med at undersøge forskellige kommercielle hjemmesider, som kunne være interessante at arbejde med. Til sidst valgte vi eBay, da hjemmesiden indeholder mange forskellige produkter, visuelle elementer og interaktive funktioner, som gav os gode muligheder for at arbejde med både HTML, CSS og JavaScript.
Herefter begyndte vi at undersøge eBays opbygning og udvælge de dele af hjemmesiden, som vi ville reimplementere. Vi arbejdede først med HTML for at skabe sidens grundlæggende struktur. Derefter brugte vi CSS til at arbejde med blandt andet farver, typografi, afstande, produktkort og placeringen af de forskellige elementer, så vores løsning kom til at ligne eBays visuelle udtryk.
Da den grundlæggende opbygning var på plads, begyndte vi at implementere JavaScript. Her arbejdede vi blandt andet med arrays, funktioner, loops, events og manipulation af DOM’en. Vi brugte JavaScript til at generere og vise produkter dynamisk frem for at skrive alle produkterne direkte ind i HTML-filen.
Vi lavede blandt andet forskellige produktkarruseller, hvor oplysninger om billeder, produktnavne og priser blev gemt i arrays. JavaScript blev derefter brugt til at gennemgå indholdet og vise de forskellige produkter på hjemmesiden. Vi arbejdede også med en pop-up, som kunne åbnes gennem brugerens interaktion med siden. På den måde fik vi anvendt JavaScript til at skabe funktioner, der minder om dem, man møder på en rigtig webshop.
Vi delte al vores kode gennem GitHub, så alle tre gruppemedlemmer havde adgang til de samme filer og kunne følge med i ændringerne. Selvom vi havde mulighed for at arbejde hver for sig, valgte vi at sidde meget sammen under projektet. Det gjorde det lettere at sparre, løse problemer og gennemgå koden i fællesskab.
Som afslutning på projektet skal vi lave en fælles video, hvor vi hver især gennemgår udvalgte dele af vores JavaScript-kode og forklarer, hvordan den demonstrerer pensum. Her skal vi blandt andet pege på de relevante dele af koden og forklare, hvordan de forskellige funktioner og interaktive elementer fungerer.
Udfordringer
En af de største udfordringer i projektet har været arbejdet med JavaScript. Jeg synes stadig, at JavaScript kan være svært at forstå, særligt når flere funktioner og dele af koden skal arbejde sammen. Det har krævet meget afprøvning og fejlfinding at få de interaktive elementer til at fungere som ønsket.
Det har også været udfordrende at skulle reimplementere en professionel hjemmeside som eBay. Hjemmesiden indeholder mange detaljer og funktioner, og vi blev derfor nødt til at udvælge, hvilke dele der var vigtigst at fokusere på.
Refleksion
Jeg synes, at det har været et spændende og lærerigt projekt, fordi vi har fået mulighed for at arbejde mere praktisk med JavaScript og bruge det til at skabe en interaktiv hjemmeside. Det har gjort det lettere for mig at se, hvordan JavaScript kan bruges sammen med HTML og CSS, og hvordan de tre dele tilsammen skaber en fungerende digital løsning.
Gennem projektet har jeg fået en bedre forståelse for blandt andet arrays, funktioner, loops, events og DOM-manipulation. Det har især været lærerigt at arbejde med produktkarrusellerne, fordi vi her kunne se, hvordan informationer fra et array kunne bruges til automatisk at oprette og ændre indhold på hjemmesiden.
Samarbejdet med Laura og Patrick har fungeret rigtig godt. Vi har været gode til at hjælpe hinanden og arbejde sammen om de udfordringer, der opstod undervejs. Selvom vi alle skulle have vores egne dele af JavaScript-koden, har vi siddet meget sammen og løst opgaverne i fællesskab. Det har skabt en god arbejdsproces, hvor vi kunne forklare koden for hinanden og finde løsninger sammen.
GitHub har samtidig gjort det muligt for os alle at have adgang til den nyeste version af projektet. Det har givet mig en bedre forståelse for, hvordan man kan dele kode og samarbejde om et fælles udviklingsprojekt.
Samlet set har projektet givet mig mere erfaring med at udvikle en interaktiv hjemmeside og omsætte JavaScript-pensum til konkrete funktioner. Selvom arbejdet med JavaScript og reimplementeringen af en professionel hjemmeside har været udfordrende, oplever jeg, at projektet har gjort mig mere tryg ved kodning og givet mig en større forståelse for samspillet mellem struktur, design og interaktion.