Java Script

Gruppe: Emilie Esther, Mads, Mikkel, Nina og mig

Opgavebeskrivelse

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 (5. sept. 2025 kl 16.00 kl 16.00) på itsLearning: 

Link til en fælles video (youtube), 4-8 minutter hvor teamet forklarer udvalgt JS kode, som demonstrerer hele pensum.

Link til løsningen dvs en fungerende online interaktiv prototype (HTML, CSS, JAVASCRIPT).

i et link til Github  -Kildekode (eg. HTML, CSS, Javascript). 

Process

Lær Java Script!

Forstå Java Script!

Bliv frustreret over Java Script!


Nå!! Vi startede med at finde en hjemmeside, Årslev Bibliotek, hvor vi hver især skulle tilføje noget JavaScript. Efter en fælles brainstorm fordelte vi opgaverne, og jeg valgte at lave en favoritliste-funktion. Ideen var, at brugeren kunne gemme bøger, de synes om – lidt som når man lægger varer i en kurv, bare uden at man kan købe dem.

Jeg begyndte med at lave et array med seks forskellige bøger, hvor jeg tilføjede titel, forfatter og et billede til hver. Derefter arbejdede jeg med at få bøgerne vist på siden i rækker af to. Det drillede lidt i starten, fordi layoutet ikke ville stå, som jeg gerne ville have det. Jeg prøvede mig frem og justerede både HTML og CSS, indtil det så rigtigt ud.

I JavaScript-delen skulle jeg bruge noget af det, vi har haft i pensum – fx DOM, for loops og if/else-sætninger. Det var ret svært for mig at få det hele til at hænge sammen i starten, især hvordan man faktisk bruger DOM’en i praksis. Jeg eksperimenterede med at oprette HTML-elementer gennem JavaScript og få dem vist på siden. Jeg brugte et for loop til at vise alle bøgerne fra mit array og en if/else-sætning til favoritknappen, så der kom en pop-up, hvis man prøvede at tilføje den samme bog igen.

min kode endte ud i dette.

Reflection

Det, der gik godt, var, at jeg fik et færdigt produkt ud på siden – min favoritliste virkede, som jeg havde tænkt det. Det var en stor tilfredsstillelse at se, hvordan alt det, jeg havde arbejdet på, faktisk fungerede i praksis. At kunne trykke på en favoritknap og få en pop-up til at vise, at bogen allerede var tilføjet, føltes som et lille “aha”-øjeblik, hvor man virkelig ser resultatet af sin kode.

Undervejs stødte jeg på flere udfordringer, især med JavaScript. Der er så mange funktioner og måder at kombinere dem på, at det hurtigt kan blive forvirrende. Jeg havde fx problemer med DOM-manipulation, if/else-sætninger og med at få bøgerne vist i rækker af to. Nogle gange virkede layoutet slet ikke, som jeg havde forestillet mig, og jeg måtte eksperimentere med både HTML og CSS, før det fungerede.

Jeg spurgte Thomas om hjælp flere gange for at finde løsninger, men selv når man får hjælp, er det vigtigt, at man selv forstår, hvad man laver. Det har været frustrerende nogle gange, især når jeg følte, at jeg ikke kunne omsætte teorien til noget konkret. For eksempel kunne jeg forstå, hvordan et for loop skulle fungere i en lille øvelse, men når jeg skulle bruge det til at generere HTML-elementer for hver bog i favoritlisten, gik det galt flere gange, og det gav en form for skriveblokering.

Jeg har lært, at JavaScript kræver tålmodighed, gentagelse og små eksperimenter. Små opgaver hjælper med at forstå teorien, men det kræver virkelig øvelse at omsætte det til noget virkeligt. Jeg har også mærket, hvor hurtigt detaljer kan forsvinde, hvis man ikke bruger dem jævnligt, og hvor vigtigt det er at prøve igen og teste forskellige løsninger, indtil det virker.

Jeg vil gerne blive mere sikker i kodning og overkomme de små blokeringer, der opstår, når opgaverne bliver mere komplekse. Jeg ser frem til at arbejde videre med JavaScript i fremtidige projekter og håber gradvist at opbygge mere selvtillid og forståelse for, hvordan alle elementer – arrays, loops, DOM og events – hænger sammen.