{"id":280,"date":"2026-04-30T10:18:00","date_gmt":"2026-04-30T10:18:00","guid":{"rendered":"https:\/\/proces.theresaeggersen.dk\/?page_id=280"},"modified":"2026-05-06T18:46:51","modified_gmt":"2026-05-06T18:46:51","slug":"javascript","status":"publish","type":"page","link":"https:\/\/proces.theresaeggersen.dk\/index.php\/javascript\/","title":{"rendered":"JavaScript"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull has-global-padding is-layout-constrained wp-container-core-group-is-layout-8199378c wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)\">\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-2bf980eb wp-block-group-is-layout-constrained\">\n<h1 class=\"wp-block-heading has-text-align-center has-x-large-font-size\">Chicago burger<\/h1>\n\n\n\n<div style=\"height:1.25rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">I denne opgave arbejdede vi i grupper med at genskabe et eksisterende website ved hj\u00e6lp af HTML, CSS og JavaScript. <\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">Jeg var i gruppe med Josefine og Esben fra hold 1, og vi tog udgangspunkt i Chicago Burgers hjemmeside.<\/p>\n\n\n\n<div style=\"height:1.25rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-image alignwide size-full is-style-rounded is-style-rounded--1\"><img loading=\"lazy\" decoding=\"async\" width=\"1921\" height=\"921\" src=\"https:\/\/proces.theresaeggersen.dk\/wp-content\/uploads\/2026\/04\/Skaermbillede-2026-04-30-113716.png\" alt=\"\" class=\"wp-image-296\" srcset=\"https:\/\/proces.theresaeggersen.dk\/wp-content\/uploads\/2026\/04\/Skaermbillede-2026-04-30-113716.png 1921w, https:\/\/proces.theresaeggersen.dk\/wp-content\/uploads\/2026\/04\/Skaermbillede-2026-04-30-113716-300x144.png 300w, https:\/\/proces.theresaeggersen.dk\/wp-content\/uploads\/2026\/04\/Skaermbillede-2026-04-30-113716-1024x491.png 1024w, https:\/\/proces.theresaeggersen.dk\/wp-content\/uploads\/2026\/04\/Skaermbillede-2026-04-30-113716-768x368.png 768w, https:\/\/proces.theresaeggersen.dk\/wp-content\/uploads\/2026\/04\/Skaermbillede-2026-04-30-113716-1536x736.png 1536w\" sizes=\"auto, (max-width: 1921px) 100vw, 1921px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull has-background has-global-padding is-layout-constrained wp-container-core-group-is-layout-73128380 wp-block-group-is-layout-constrained\" style=\"background-color:#7e9873;margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)\">\n<div class=\"wp-block-group has-medium-font-size is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-8af32dba wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading has-text-align-center is-style-default\">Processen<\/h2>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer wp-container-content-4f2ccadb\"><\/div>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">Form\u00e5let var at oms\u00e6tte et eksisterende design til en fungerende prototype og samtidig vise vores forst\u00e5else for frontend-udvikling is\u00e6r hvordan JavaScript kan bruges til at skabe interaktive l\u00f8sninger.<\/p>\n<\/div>\n\n\n\n<div style=\"margin-top:0;margin-bottom:0;height:33px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-d525a65d wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-container-core-column-is-layout-da384c3e wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading has-text-align-left is-style-default has-body-font-family has-medium-font-size\" style=\"font-style:normal;font-weight:600\">Analyse af hjemmesiden<\/h3>\n\n\n\n<p class=\"has-text-align-left wp-block-paragraph\">Vi startede med at analysere den originale side og udv\u00e6lge de vigtigste elementer. I stedet for at kopiere hele siden valgte vi at fokusere p\u00e5 de mest centrale funktioner:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Forside<\/li>\n\n\n\n<li>Menu<\/li>\n\n\n\n<li>Take away-afdelinger<\/li>\n\n\n\n<li>Kontakt<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-left wp-block-paragraph\">Vi prioriterede overskuelighed og brugervenlighed frem for lange beskrivelser af brand og produkter.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-container-core-column-is-layout-da384c3e wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading has-text-align-left is-style-default has-body-font-family has-medium-font-size\" style=\"font-style:normal;font-weight:600\">Struktur i HTML<\/h3>\n\n\n\n<p class=\"has-text-align-left wp-block-paragraph\">Herefter byggede vi sidens grundstruktur i HTML. Vi oprettede blandt andet:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>En header med navigation<\/li>\n\n\n\n<li>En hero-sektion med titel<\/li>\n\n\n\n<li>En menu-sektion<\/li>\n\n\n\n<li>En sektion med take away-afdelinger<\/li>\n\n\n\n<li>En kontaktside med formular og information<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-left wp-block-paragraph\">HTML fungerede som fundamentet, som vi senere kunne style og g\u00f8re interaktivt.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-container-core-column-is-layout-da384c3e wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading has-text-align-left is-style-default has-body-font-family has-medium-font-size\" style=\"font-style:normal;font-weight:600\">Design med CSS<\/h3>\n\n\n\n<p class=\"has-text-align-left wp-block-paragraph\">I CSS arbejdede vi med at skabe et visuelt udtryk, der passede til burger\/diner-temaet. Vi brugte farver som r\u00f8d\/pink til at fremh\u00e6ve vigtige elementer og bl\u00e5 til kontrast, mens en lys baggrund gav en varm stemning.<\/p>\n\n\n\n<p class=\"has-text-align-left wp-block-paragraph\">Layoutet blev bygget med grid og flexbox, s\u00e5 indholdet blev nemt at overskue. Menuen blev fx vist som kort i et grid, og det samme gjaldt for afdelinger<\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--20)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-3a88641f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading has-text-align-left is-style-default has-body-font-family has-medium-font-size\" style=\"font-style:normal;font-weight:600\">JavaScript og interaktivitet<\/h3>\n\n\n\n<p class=\"has-text-align-left wp-block-paragraph\">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\u00f8r l\u00f8sningen mere fleksibel og nem at opdatere.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading has-text-align-left is-style-default has-body-font-family has-medium-font-size\" style=\"font-style:normal;font-weight:600\">renderMenu()<\/h3>\n\n\n\n<p class=\"has-text-align-left wp-block-paragraph\">Vi udviklede en funktion, <code>renderMenu()<\/code>, som h\u00e5ndterer visningen af burgerne. Den rydder f\u00f8rst menuen, tjekker hvilken kategori der er valgt og opretter derefter de relevante elementer i DOM\u2019en. P\u00e5 den m\u00e5de kan indholdet \u00e6ndres uden at genindl\u00e6se siden.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:18px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-d525a65d wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-container-core-column-is-layout-da384c3e wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading has-text-align-left is-style-default has-body-font-family has-medium-font-size\" style=\"font-style:normal;font-weight:600\">Filtrering<\/h3>\n\n\n\n<p class=\"has-text-align-left wp-block-paragraph\">Vi tilf\u00f8jede filterknapper, s\u00e5 brugeren kan sortere menuen. Ved hj\u00e6lp af data-attributter og JavaScript kan vi vise fx alle burgere eller kun bestemte typer som oksek\u00f8d. Her arbejdede vi med events, arrays, betingelser og DOM-manipulation.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-container-core-column-is-layout-da384c3e wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading has-text-align-left is-style-default has-body-font-family has-medium-font-size\" style=\"font-style:normal;font-weight:600\">Take away-afdelinger<\/h3>\n\n\n\n<p class=\"has-text-align-left wp-block-paragraph\">Til afdelingerne brugte vi ogs\u00e5 et array med data som navn, billede og status. Status blev styret af en boolean, som automatisk viste \u201c\u00c5ben nu\u201d eller \u201cLukket\u201d med forskellig styling.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-container-core-column-is-layout-da384c3e wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading has-text-align-left is-style-default has-body-font-family has-medium-font-size\" style=\"font-style:normal;font-weight:600\">Kontaktformular<\/h3>\n\n\n\n<p class=\"has-text-align-left wp-block-paragraph\">Experience the fusion of imagination and expertise with \u00c9tudes Architectural Solutions.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull has-accent-4-background-color has-background has-global-padding is-layout-constrained wp-container-core-group-is-layout-36f65c2d wp-block-group-is-layout-constrained\" style=\"margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)\">\n<div class=\"wp-block-group alignwide has-global-padding is-layout-constrained wp-container-core-group-is-layout-90edb088 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-189a6e74 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:40%\">\n<p class=\"has-large-font-size wp-block-paragraph\">Resultatet<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Resultatet blev en funktionel prototype af Chicago Burgers website, hvor vi arbejdede med at genskabe udvalgte dele ved hj\u00e6lp af HTML, CSS og JavaScript.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vi valgte at forenkle siden og g\u00f8re den mere brugervenlig og overskuelig. I stedet for at fokusere p\u00e5 lange tekstsektioner lagde vi v\u00e6gt p\u00e5 konkrete funktioner og interaktion.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vores l\u00f8sning kan ses her:<\/p>\n\n\n\n<ul style=\"line-height:1.75\" class=\"wp-block-list is-style-default\">\n<li><a href=\"https:\/\/fjolle.online\/java\">https:\/\/fjolle.online\/java<\/a> <\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Vores video kan ses her(Shoutout til Esben):<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full is-style-rounded is-style-rounded--2\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"529\" data-id=\"297\" src=\"https:\/\/proces.theresaeggersen.dk\/wp-content\/uploads\/2026\/04\/image-3-1024x529-1.png\" alt=\"\" class=\"wp-image-297\" srcset=\"https:\/\/proces.theresaeggersen.dk\/wp-content\/uploads\/2026\/04\/image-3-1024x529-1.png 1024w, https:\/\/proces.theresaeggersen.dk\/wp-content\/uploads\/2026\/04\/image-3-1024x529-1-300x155.png 300w, https:\/\/proces.theresaeggersen.dk\/wp-content\/uploads\/2026\/04\/image-3-1024x529-1-768x397.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/figure>\n\n\n\n<figure class=\"wp-block-image size-full is-style-rounded is-style-rounded--4\"><img loading=\"lazy\" decoding=\"async\" width=\"724\" height=\"367\" src=\"https:\/\/proces.theresaeggersen.dk\/wp-content\/uploads\/2026\/04\/image-1-1.png\" alt=\"\" class=\"wp-image-299\" srcset=\"https:\/\/proces.theresaeggersen.dk\/wp-content\/uploads\/2026\/04\/image-1-1.png 724w, https:\/\/proces.theresaeggersen.dk\/wp-content\/uploads\/2026\/04\/image-1-1-300x152.png 300w\" sizes=\"auto, (max-width: 724px) 100vw, 724px\" \/><\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:21px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-embed alignwide is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Js forklaring Chicago Burger\" width=\"500\" height=\"375\" src=\"https:\/\/www.youtube.com\/embed\/wpvUaAEMpwA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignwide has-global-padding is-layout-constrained wp-container-core-group-is-layout-c312811a wp-block-group-is-layout-constrained\" style=\"margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--50)\">\n<div class=\"wp-block-group alignwide has-global-padding is-layout-constrained wp-container-core-group-is-layout-90edb088 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-189a6e74 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p class=\"has-text-align-center has-large-font-size wp-block-paragraph\">Refleksion<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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\u00f8jede interaktivitet og gjorde siden mere dynamisk. Opgaven var til tider lidt udfordrende, is\u00e6r n\u00e5r vi skulle f\u00e5 JavaScript og DOM-manipulation til at spille korrekt sammen, men det gjorde ogs\u00e5, at jeg l\u00e6rte mere undervejs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Noget af det, jeg is\u00e6r 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\u00e5de l\u00f8sningen mere fleksibel og lettere at vedligeholde.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Jeg fik ogs\u00e5 en bedre forst\u00e5else for DOM-manipulation, fordi vi aktivt \u00e6ndrede indholdet p\u00e5 siden baseret p\u00e5 brugerens handlinger. Det kom tydeligt til udtryk i filterfunktionen, hvor menuen opdateres afh\u00e6ngigt af, hvilken kategori brugeren v\u00e6lger.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-right:0;margin-left:0\">Hvis projektet skulle videreudvikles, ville det v\u00e6re oplagt at arbejde mere med JavaScript-funktionaliteten. For eksempel kunne vi implementere en egentlig kurv, hvor brugeren kan tilf\u00f8je og fjerne produkter samt se en samlet pris. Derudover kunne man g\u00f8re \u00e5bningstiderne mere realistiske ved at basere dem p\u00e5 det aktuelle tidspunkt i stedet for faste v\u00e6rdier.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Chicago burger I denne opgave arbejdede vi i grupper med at genskabe et eksisterende website ved hj\u00e6lp 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\u00e5let var at oms\u00e6tte et eksisterende design til en fungerende prototype og samtidig [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-280","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/proces.theresaeggersen.dk\/index.php\/wp-json\/wp\/v2\/pages\/280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/proces.theresaeggersen.dk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/proces.theresaeggersen.dk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/proces.theresaeggersen.dk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/proces.theresaeggersen.dk\/index.php\/wp-json\/wp\/v2\/comments?post=280"}],"version-history":[{"count":4,"href":"https:\/\/proces.theresaeggersen.dk\/index.php\/wp-json\/wp\/v2\/pages\/280\/revisions"}],"predecessor-version":[{"id":326,"href":"https:\/\/proces.theresaeggersen.dk\/index.php\/wp-json\/wp\/v2\/pages\/280\/revisions\/326"}],"wp:attachment":[{"href":"https:\/\/proces.theresaeggersen.dk\/index.php\/wp-json\/wp\/v2\/media?parent=280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}