Javascript Projekt

Javascript Projekt

Vores første projekt på 2. semester lød opgaven følgende:

“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.”

Proces

Vi var en gruppe på 5 som arbejdede sammen. Jeg var sammen med Marie, og vi endte med at slå os sammen med 3 drenge fra en anden gruppe, som vi ikke har arbejdet sammen med før.

De andre havde tænkt på Burger King som den side vi skulle kode, og det endte vi med at gå med. Siden blev kodet i Html og Css, og nu skulle vi alle implementere vores JS hver for sig. Marie og jeg valgte at lave begge vores JS sammen, for at få mest ud af læringsprocessen som mulig. Vi startede med at lave et banner/slide som en del af forsiden, som skiftede mellem 4 forskellige slides der tilpassede sig af forskellige tidsrum. Vi brugte kontrolstrukturer i JS for at vælge hvordan hvert slide skulle vises afhængig af tidspunktet på dagen. På billedet kan man se vi har brugt ”if-else” til at vælge de tidspunkter det enkelte slide skal vises.

Den anden løsning vi ønskede at tilføje på siden var en søgningsfunktion, så man kunne søge på forskellige mad- og drikkevarer på Burger Kings side. Dette var en smule sværere for mig, at sætte mig ind i men vi tog kampen op og prøvede os frem. Til denne løsning brugte vi arrays, loops og funktioner i vores JS. Man kan se at vi har brugt loop til at finde madvarer på listen. I koden har vi oprettet et array, der hedder items, som indeholder alle de madvarer og drikkevarer, der kan søges på. Vi har defineret flere funktioner i vores kode. Den første er searchItem(), som indeholder al logikken til at søge gennem items-arrayet. Når brugeren indtaster et søgeord og trykker ‘Enter’, kaldes denne funktion, og den bruger loopet til at finde alle relevante madvarer.

Efter søgningen kalder searchItem() funktionen displayResults(), som håndterer visningen af søgeresultaterne. displayResults() opdaterer indholdet på siden ved at tilføje de fundne madvarer til en liste, der vises under søgefeltet.

Vi har brugt arrays til at gemme data, loops til at gennemgå denne data, og funktioner til at strukturere koden og håndtere søgningen og visningen af resultaterne.

Resultat

Samlet fik hele gruppen tilføjet følgende:

• En søgefunktion af Burger Kings madvarer og mm.
• Et kalorieberegner, hvor du se hvor mange kalorier der er i din burger
• Et banner som skifter afhængig af tidspunktet på døgnet
• Et pointspil hvor du kan klikke dig frem til point
• Mulighed for at skrive dig op til et nyhedsbrev

Alt dette skulle gerne indeholde pensum som var en del af opgaven

Reflektioner

Jeg har det generelt problematisk med kodning, jeg kan godt finde ud af det, men det interesserer mig bestemt ikke i sådan grad jeg vil vælge kodnings retningen. Og nu hvor vi skulle lære Javascript var jeg virkelig på bar bund. Jeg synes virkelig at det var besværligt at forstå hvert træk man lavede, men heldigvis var mig og Marie i sammen båd og kunne hjælpe og lære af hinanden.

Jeg kunne godt have tænkt mig, at det var muligt blot at arbejde sammen hende og jeg, da gruppearbejdet med de andre ikke helt fungerede. Generelt var der en bare en stor distance mellem os piger og drengene i gruppen, og det gjorde det svært at lære hvad de foretog sig. Midt i ugen havde jeg personligt nogle issues som forsinkede min arbejdsproces, og jeg ville derfor også bare have opgaven overstået asap.

Jeg havde håbet på at ende ud med at forstå JS bedre end jeg gjorde i dette projekt, men baseret på at vi fik opgaven nærmest sekundet vi kom tilbage fra ferie, og uden noget viden inden for JS så synes jeg det gik godt. Fremadrettet skal jeg nok øve mig mere i at få klarlagt distancen/uvidenheden mellem mig og mine medstuderende, da det gjorde opgaven mere besværlig end den var