April 2025 - 6. Sprint
Det første, jeg gør, er at oprette en ny section med id’et andre-produkter
. Dette ersimpel HTML-opstilling og tillader mig at skabe et overblik over sektionen og tilpasse CSS’en til det. Herefter har jeg tilføjet nogle div med classer, så jeg kan ramme de enkelte klasser i CSS’en. Img
er for at tilføje billederne til knapperne. Ellers er der bare tilføjet noget simpelt tekst for at fortælle, hvad det er for en knap.
Det næste, der sker, er, at jeg har tilføjet et id, som jeg skal bruge til at oprette noget JavaScript-funktionalitet. Derudover har jeg tilføjet nogle classer, et billede og den tekst p
, der skal stå inde i popupen.
Nedenstående, vi ser nu, er den tilhørende CSS, jeg bruger til at style min popup og alt, hvad den indebærer. Det er blandt andet baggrundsfarven, hvor på skærmen den skal være, størrelsen på den, selve cookie-billedet, knappen for at acceptere cookies og luk-knappen.
Der er ingen funktionalitet bag knappen, andet end at den blot er visuel og åbner og lukker ved tryk. Det, der sker her, er, at jeg først og fremmest skal ramme den her popup. Det gør jeg ved at hente de forskellige id’er med document.getElementById().
Ud fra det laver jeg en funktion, hvor jeg siger, at display = ‘none’
. Popupen bliver egentlig vist hele tiden, men jeg har gjort den ikke synelig. Så tilføjer jeg en EventListener
med en click-funktion, som går ind og blokerer den her display, der før var none
. Nu bliver den vist. Resten giver lidt sig selv. console.log
er for, at jeg selv kan se i konsollen, hvad der bliver klikket på.