Chicago burger
I denne opgave arbejdede vi i grupper med at genskabe et eksisterende website ved hjælp af HTML, CSS og JavaScript.
Jeg var i gruppe med Josefine og Esben fra hold 1, og vi tog udgangspunkt i Chicago Burgers hjemmeside.
Processen
Formålet var at omsætte et eksisterende design til en fungerende prototype og samtidig vise vores forståelse for frontend-udvikling især hvordan JavaScript kan bruges til at skabe interaktive løsninger.
Analyse af hjemmesiden
Vi startede med at analysere den originale side og udvælge de vigtigste elementer. I stedet for at kopiere hele siden valgte vi at fokusere på de mest centrale funktioner:
- Forside
- Menu
- Take away-afdelinger
- Kontakt
Vi prioriterede overskuelighed og brugervenlighed frem for lange beskrivelser af brand og produkter.
Struktur i HTML
Herefter byggede vi sidens grundstruktur i HTML. Vi oprettede blandt andet:
- En header med navigation
- En hero-sektion med titel
- En menu-sektion
- En sektion med take away-afdelinger
- En kontaktside med formular og information
HTML fungerede som fundamentet, som vi senere kunne style og gøre interaktivt.
Design med CSS
I CSS arbejdede vi med at skabe et visuelt udtryk, der passede til burger/diner-temaet. Vi brugte farver som rød/pink til at fremhæve vigtige elementer og blå til kontrast, mens en lys baggrund gav en varm stemning.
Layoutet blev bygget med grid og flexbox, så indholdet blev nemt at overskue. Menuen blev fx vist som kort i et grid, og det samme gjaldt for afdelinger
JavaScript og interaktivitet
JavaScript var en central del af opgaven, da det gjorde siden dynamisk. Vi oprettede et array med burgerdata (navn, pris, type og billede), og i stedet for at skrive hvert element manuelt i HTML, genererede vi dem automatisk via JavaScript. Det gør løsningen mere fleksibel og nem at opdatere.
renderMenu()
Vi udviklede en funktion, renderMenu(), som håndterer visningen af burgerne. Den rydder først menuen, tjekker hvilken kategori der er valgt og opretter derefter de relevante elementer i DOM’en. På den måde kan indholdet ændres uden at genindlæse siden.
Filtrering
Vi tilføjede filterknapper, så brugeren kan sortere menuen. Ved hjælp af data-attributter og JavaScript kan vi vise fx alle burgere eller kun bestemte typer som oksekød. Her arbejdede vi med events, arrays, betingelser og DOM-manipulation.
Take away-afdelinger
Til afdelingerne brugte vi også et array med data som navn, billede og status. Status blev styret af en boolean, som automatisk viste “Åben nu” eller “Lukket” med forskellig styling.
Kontaktformular
Experience the fusion of imagination and expertise with Études Architectural Solutions.
Resultatet
Resultatet blev en funktionel prototype af Chicago Burgers website, hvor vi arbejdede med at genskabe udvalgte dele ved hjælp af HTML, CSS og JavaScript.
Vi valgte at forenkle siden og gøre den mere brugervenlig og overskuelig. I stedet for at fokusere på lange tekstsektioner lagde vi vægt på konkrete funktioner og interaktion.
Prototypen indeholder blandt andet en filtrerbar menu, hvor brugeren kan sortere mellem forskellige burgere, dynamisk genererede produktkort, en oversigt over take away-afdelinger samt en kontaktformular med simpel validering.
Vores løsning kan ses her:
Vores video kan ses her(Shoutout til Esben):
Refleksion
Jeg oplevede, at opgaven gav en god indsigt i, hvordan de forskellige dele af frontend spiller sammen i praksis. HTML blev brugt til at opbygge strukturen, CSS stod for det visuelle design, og JavaScript tilføjede interaktivitet og gjorde siden mere dynamisk. Opgaven var til tider lidt udfordrende, især når vi skulle få JavaScript og DOM-manipulation til at spille korrekt sammen, men det gjorde også, at jeg lærte mere undervejs.
Noget af det, jeg især tog med mig, var arbejdet med arrays og funktioner i forbindelse med gentagende indhold som produktkort. I stedet for at skrive det samme HTML flere gange, kunne vi generere indholdet ud fra data i JavaScript. Det gjorde både løsningen mere fleksibel og lettere at vedligeholde.
Jeg fik også en bedre forståelse for DOM-manipulation, fordi vi aktivt ændrede indholdet på siden baseret på brugerens handlinger. Det kom tydeligt til udtryk i filterfunktionen, hvor menuen opdateres afhængigt af, hvilken kategori brugeren vælger.
Hvis projektet skulle videreudvikles, ville det være oplagt at arbejde mere med JavaScript-funktionaliteten. For eksempel kunne vi implementere en egentlig kurv, hvor brugeren kan tilføje og fjerne produkter samt se en samlet pris. Derudover kunne man gøre åbningstiderne mere realistiske ved at basere dem på det aktuelle tidspunkt i stedet for faste værdier.