Til JavaScript Real Life-projektet valgte vi i gruppen af gå med H&M’s hjemmeside, da vi syntes at der var mange funktionaliteter, som man kunne rekreere med JavaScript. Vi lavede en liste over de funktioner vi kunne finde, og fik hjælp af Thomas til at vurdere hvilke der opfyldte pensum. Derefter uddelte vi opgaverne. Jeg stod for HTML af index (forsiden), samt et billedgalleri i bunden af produktsiden.
Jeg begyndte at lave forsiden først, da den skulle bruges som udgangspunkt for nogle af de andres opgaver. Denne var rimelig hurtig at lave, bortset fra, at der allerede var merging conflicts. Der var lidt utydig kommunikation omkring hvorvidt headeren skulle laves i HTML/CSS eller i JS – derfor sprang jeg den over og lavede resten af siden. Dog var der nogle i gruppen, som begyndte at lave headeren, imens jeg lavede siden (jeg var HELDIGVIS lige begyndt at tage en pause – så ingen crazy conflicts) — lidt frustrerende og klart noget, som vi skal have snakket om *inden* projekt 4 og 5 (for det var altså *min* opgave 🥴).
Anyways, fordi jeg var tutor var der flere af dagene, hvor jeg ikke kunne arbejde på projektet eller få vejledning. Derfor begyndte jeg først på mit JS flere dage efter, hvor Tiffany hjalp mig med at forklare hvordan jeg laver objekter, som jeg kan bruge i et array. Jeg skulle nemlig lave et galleri, hvor der både var billeder, produktnavn samt pris.
Til at starte med lavede jeg containeren til alle mine objekter. Dette gjorde jeg ved at bruge ‘getElementById’ på min div i DOM’en og lavede den til en const kaldet ‘galleryContainer’. Derefter lavede jeg en funktion, som tager parametrene ‘image’, ‘productName’ & ‘price’. Efterfølgende lavede jeg variabler (const) til hvert af elementerne, der skulle være i galleriet. Ved at skrive ‘new’ foran ‘Product’ (navnet på funktionen), oprettes der et nyt objekt med disse værdier. Dermed havde jeg fået oprettet alle de enkelte objekter, som skulle være i galleriet. Efterfølgende lavede jeg endnu en variabel kaldet ‘gallery’ hvori jeg indsatte alle navnene på mine objekter. Derefter lavede jeg et for-loop for at gå hele galleriet igennem, så alle mine objekter vises. Heri indsatte jeg noget nyt/mere HTML ved at bruge ‘galleryContainer = innerHTML +=’, som tilføjede sådan noget som ‘kr.’, pris, produktnavn og billede. Med dette var galleriet oprettet og det var med det samme muligt at scrolle igennem det ved at scrolle sideways. På H&M’s hjemmeside har de også muligheden for at trykke på frem- og tilbageknapper, så dette valgte jeg også at lave. Her lavede jeg to knapper i mit HTML og gav dem et id, hvilket jeg tog fat i, i JS med ‘getElementById’. Til denne del brugte jeg ChatGPT, da det ikke fungerede da jeg prøvede at følge tutorials fra YouTube. Det var egentlig også meningen, at der kun skulle scrolles met ét objekt ad gangen, men dette kunne jeg ej heller få til at fungere. Derfor rykkes der i stedet fra den ene ende til den anden, når man trykker på frem og tilbage. Ligeledes skal man trykke to gange på knapperne, for at de bliver inaktive, hvilket selvfølgelig heller ikke er helt meningen. På knapperne blev der, med hjælp fra chatten, tilføjet ‘addEventListener(“click”)’, hvori den tager fat i const’en ‘scrollAmount’, som styrer hvor meget der rykkes i galleriet (som jeg ikke kunne finde ud af at ændre).
Sidst, men ikke mindst, gjorde jeg, så knapperne var inaktive, når man ike kunne trykke sig længere gennem galleriet. Dette gjorde jeg med en funktion med if/else, hvori det blev “afgjort” om kanppen skulle være aktiv (at der stadig var mere af galleriet at scrolle igennem), eller om den skulle være inaktiv/disabled (hvis man var scrollet helt til den ene ende, og der ikke længere var mere at scrolle igennem).
Jeg var så heldig at få lov til at skulle lave videoen, yay. Dog blev vi i gruppen enige om, at Dictes JS-stykke var det bedste ift. forklaring af kode, men også visualiseringen i videoen. Men fordi jeg nu skulle forklare et stykke kode, som jeg ikke selv har lavet, blev jeg nødt til at lave et manuskript, som jeg kunne følge. Jeg fik derved sat mig ret godt ind i hendes kode, og lærte også hvordan man får sådan noget som e-mail og adgangskode til at “passe sammen” – det ville jeg absolut ikke have nogen som helst idé om før dette. Videoen kan ses nedenfor:
Refleksion
Mangler…
Derfor var det også vigtigt at jeg satte mig ind i, hvad koden betød, da noget af det også var noget, som vi ikke havde haft om i undervisningen.