12/02/24 – 16/02/24
I dette projekt skulle vi arbejde sammen i vores projekt 4 grupper, om at re-implementere sider, fra en allerede eksisterende kommerciel hjemmeside, ved brug af JavaScript, HTML og CSS. Hvert gruppemedlem skulle implementerer nok kode til, at det ville dække over hele pensum.
I vores gruppe valgte vi at tage udgangspunkt i webshoppen etsy.com.
Klik her, for at se vores endelige resultat, hvor vi alle har været indeover kodningen. Og klik her, for at se en video hvor vi forklarer en specifik del af vores kode, som indeholder hele pensum.
Dag 1 – 12/02
I dag startede vi med at undersøge forskellige kommercielle hjemmesider som vi kunne tage udgangspunkt i, til projektet. Vi kom frem til at vi gerne ville bruge Etsys hjemmeside, da den indeholder mange funktioner lavet med JS. Inden projektet gik i gang, havde Freya oprettet et repository til gruppen, inde på GitHub, så vi kunne dele vores kode med hinanden. Derefter lavede vi en hurtig dagsorden for ugen, så vi havde et groft overblik over hvad vi skulle nå at lave. Til sidst undersøgte vi hvilke elementer fra siden vi ville re-implementerer og hvordan det kunne gøres ved at bruge hele pensum, hvorefter vi så uddelegerede opgaverne til hinanden.
Dag 2 – 13/02
Vi mødtes hjemme hos Freya, hvor vi hver gik i gang med at kode en bestemt del af siden. Jeg havde valgt at kode et slideshow gallery, med produktbilleder. Da jeg endnu ikke er super skarp i JS, valgte jeg at tage udgangspunkt i en tutorial der ligger på w3schools.com, da den dækker over hele pensum. Jeg downloadede tre gratis billeder fra freepik.com, som jeg kunne bruge til mit slideshow, hvorefter jeg smed dem ind i Photoshop, for at gøre dem alle firkantede og optimerer dem. Jeg forsøgte derefter at lave nogle ændringer til koden, for at få det til at ligne det slideshow der var på Etsys hjemmeside, men det viste sig at være noget mere udfordrende for mig end jeg havde regnet med. Derfor gik det meste af dagen, med at prøve mig frem og oprette en masse nye dokumenter for at eksperimenterer med forskellige måder det kunne kodes på.
Dag 3 – 14/02
I dag brugte vi det meste af dagen på at få kodet hver vores del færdig. Jeg blev færdig med slideshowet og er ret tilfreds med slutresultatet.
Derudover fik vi også noget vejledning af Thomas, da vi havde nogle spørgsmål til ham ift. afleveringen af opgaven, samt hvorvidt vores kode dækkede over pensum.
Dag 4 – 15/02
I dag fokuserede vi på at blive helt færdig med hver vores dele af koden, hvorefter vi én ad gangen, indsatte alle vores kodestykker ind i vores fælles repository på GitHub. Efter vi havde rodet lidt rundt med det og rettet lidt i koden, fik vi til sidst det hele til at passe sammen. Derefter skrev vi et manuskrift til den video vi skulle aflevere, hvor vi besluttede os for at forklarer den kode jeg havde lavet til slide-showet. Da manuskriftet var færdigt optog jeg min skærm, så jeg kunne fremvise min kode og hvordan den så ud i browseren, i mens jeg indtalte lyden hvor jeg forklarer, hvordan koden virker.
Dag 5 – 16/02
I dag fik vi så afleveret opgaven, med et link til vores GitHub, samt et link til siden, hvor vi havde lagt vores kode online og selvfølgelig også et link til videoen der forklarer koden, som vi lagde op på YouTube.
Refleksion
JavaScript er ikke et kode sprog jeg er særlig stærk i endnu, så det var til tider en udfordring for mig at komme igennem det her projekt. Men jeg blev tilfreds med mit resultat og selvom at vores sammenlagte kode ser noget rodet ud, er jeg også tilfreds med den, taget i betragtning af at vi blev en smule tidspressede til sidst. Jeg synes det blev lidt bøvlet at arbejde med GitHub, i hvert fald når man gør som vi gjorde, med at smide kodestykker sammen, der alle skal tilhøre ét HTML-dokument. Men jeg tænker at det fungerer meget bedre hvis man i fremtidige projekter, uddelegerer separate sider, så hver person koder hver deres HTML med tilknyttet JS og CSS. Men generelt set synes jeg projektet har været nyttigt og lærerigt og jeg tænker helt bestemt at min oplevelse med JS-projektet, vil hjælpe mig meget i de kommende projekter.