JavaScript real-life projekt
Vi startede 2. semester med en introduktion til semesterets forløb, hvor der var mulighed for at stille spørgsmål undervejs. I denne forbindelse blev vi introduceret til netværksdagen samt det kommende JavaScript-projekt, og i den anledning skulle vi tage stilling til semesterets første gruppearbejde, som vi selv sammensatte grupperne til. Efterfølgende fulgte en uge med undervisning i JavaScript og en uge med fokus på projektet.
Opgaven bestod i at arbejde i grupper om at re-implementere udvalgte sider fra et eksisterende kommercielt website ved hjælp af HTML, CSS og JavaScript. Projektet havde fokus på at opbygge en fungerende, interaktiv prototype, hvor JavaScript blev anvendt til at demonstrere det gennemgåede pensum. Løsningen blev afleveret som et online website med tilhørende kildekode i et fælles GitHub-repository samt en fælles videoforklaring af udvalgte JavaScript-løsninger.
Gruppen bestod af Rikke, Louise, Caroline og Sarah Lykke.
Introduktion og opstart af projektet
Efter en uges undervisning i JavaScript modtog vi projektets opgavebeskrivelse om mandagen. Vi mødtes i klassen og fik en kort gennemgang af opgaven, inden vi satte os sammen i gruppen. Vi besluttede hurtigt, at vi gerne ville arbejde med Brandts Kunstmuseum, da hjemmesiden allerede var inspirerende i forhold til forskellige JavaScript-funktioner.
Vi oprettede et fælles repository på GitHub, hvilket vi alle var spændte på, da vi frygtede, at der kunne opstå mange merge conflicts. Vi gennemgik GitHub ganske kort og kommunikerede løbende og tydeligt undervejs i processen for at undgå at overskrive hinandens kode.
Da vi havde re-implementeret forsiden, drøftede vi, hvilke funktioner vi ønskede at skabe eller genskabe med JavaScript. Efter vi havde truffet beslutning om funktionerne, fordelte vi opgaverne mellem os, så alle fik mulighed for at arbejde med JavaScript, der opfyldte kravet om at demonstrere hele pensum. Jeg fik til opgave at udvikle et dynamisk billedgalleri og igangsatte herefter processen.
Et dynamisk billedgalleri
Jeg har genskabt et dynamisk billedgalleri, som Brandts Kunstmuseum allerede havde på deres eksisterende hjemmeside ved hjælp af HTML og JavaScript. I HTML strukturen har jeg oprettet en fast ramme bestående af en viewport, en track og navigationsknapper, mens selve indholdet i galleriet genereres dynamisk i JavaScript. Dette gør løsningen fleksibel og nem at udvide med nye billeder og informationer.
Galleriets indhold er baseret på et array af objekter, hvor hver udstilling indeholder titel, dato og billedsti. Ved hjælp af et loop gennemløbes arrayet, og for hvert objekt oprettes der et galleri-element i DOM’en med billede og tilhørende tekst. På den måde undgår jeg gentagende HTML og sikrer, at galleriet automatisk opdateres, hvis data ændres. Der er desuden tilføjet en klik-event til hvert billede, som giver feedback til brugeren og demonstrerer brugen af events.
For at skabe navigation i galleriet har jeg anvendt knapper, som ved klik flytter galleriet horisontalt. Dette styres ved hjælp af variabler, der holder styr på den aktuelle position samt bredden på hvert galleri-element. Ved hjælp af if-betingelser sikrer jeg, at galleriet ikke kan rykkes længere end det første eller sidste billede. Selve bevægelsen sker ved at ændre track-elementets transform-egenskab, hvilket giver en glidende forskydning.
Koden aktiveres først, når siden er færdigindlæst, for at sikre at alle elementer og billeder er tilgængelige. Herefter beregnes galleriets maksimale bevægelse ud fra bredden på indholdet og viewporten. Undervejs har jeg anvendt console.log til debugging og kontrol af værdier. Samlet set demonstrerer billedgalleriet anvendelse af hele pensum.
Videoforklaring af burgermenu
Refleksion
Det har været en super spændende og ikke mindst lærerig proces at arbejde intens med JavaScript. Jeg havde på forhånd hørt flere nævne, at JavaScript skulle være noget af det sværeste at lære i forbindelse med kodning og programmering, men jeg havde besluttet mig for, at jeg gerne ville danne mit eget indtryk, og det var en rigtig god beslutning. Jeg kan virkelig mærke, at jeg efter eksamensprojektet på 1. semester har opnået en dybere forståelse for HTML og CSS, og dette gjorde det meget lettere at bygge ovenpå med JavaScript. Jeg har virkelig nydt at kunne fordybe mig, og det overrasker mig meget, at jeg har fået så stor en interesse for kodning. Jeg synes, at det er enormt spændende at arbejde med, og jeg håber, at mine kompetencer bliver endnu bedre i forbindelse med de kommende projekter.
Jeg havde ikke indstillet mig på, at vi allerede skulle danne grupper til netværksdagen og til JavaScript projektet den første undervisningsdag på 2. semester, og det udfordrede mig til at starte med. Vi startede med at forventningsafstemme i gruppen, og jeg mærkede hurtigt, at vi alle fire ønskede at komme godt i mål med projektet, og at der var plads til at have forventninger, uden at det skal føles som et pres. Vi har virkelig haft en god kommunikation gennem hele processen, og vi har været gode til at hjælpe hinanden undervejs. Det har virkelig været en behagelig oplevelse, og vi har formået at skabe rammerne for et samarbejde, hvor der både har været plads til sparring, læring, og massere af hyggelige stunder. Jeg har ligeledes lært, at man ikke bør være bange for at arbejde i GitHub, og at det faktisk fungerer ganske udemærket, så længe at man har en god kommunikation med hinanden.
Jeg er spændt på de kommende projekter og glæder mig til at kunne implementere min nye viden fra de to ugers intense arbejde med JavaScript.