Jeg udvikler en notifikationsside baseret på en styleguide og mockup, som integreres i et større website. Ved hjælp af vanilla JavaScript, semantisk HTML og genanvendelig CSS skaber jeg en funktionel og tilgængelig løsning optimeret til både desktop og mobil.
Jeg opsætter et kodemiljø og klargør filer til typografi, HTML, CSS, JavaScript og grundlæggende styling.
Jeg strukturerer HTML ved at opdele dokumentet i body, main og sections. Et fuldt projekt ville også inkludere header og footer. Jeg færdiggør én section ad gangen med HTML og CSS, og sikrer semantisk HTML for bedre tilgængelighed, inkl. alt-tekster, title og meta description i head-sektionen.
Jeg klargør CSS-dokumentet med en reset af base styling, opsætter CSS-variabler til farver, spacing og border-radius, importerer skrifttyper og anvender basal styling på typografi, billeder og knapper.
CSS-variablerne sikrer konsistens og gør det nemt at ændre farver, spacing og border-radius i hele projektet, hvilket bidrager til en effektiv arbejdsproces.
Jeg programmerer en media query for korrekt mobilvisning, der justerer containerens bredde med flex-direction og grid. Jeg tilføjer også visuel feedback på interaktive elementer for bedre brugervenlighed.
Jeg bruger vanilla JavaScript til at fange relevante HTML-elementer med document.querySelector og querySelectorAll, hvor forEach bruges til at loope igennem flere elementer, og querySelector anvendes for enkeltstående elementer.
Den første funktion looper igennem ulæste notifikationer, opdaterer stylingen, fjerner røde prikker med klassen "hidden" og opdaterer tekstindholdet i numberEl for at vise korrekt antal ulæste notifikationer.
Den sidste del tilføjer en eventListener til hver notifikation, så de kan markeres som "læst" ved klik. Ved klik fjernes den blå baggrund og røde prik, og antallet af ulæste notifikationer opdateres i toppen af siden.
Padding-klassen adskiller læste og ulæste notifikationer og sikrer korrekt tælling. Notifikationer med padding tælles ikke som ulæste, og ('.notification:not(.padding)') vælger kun de uden padding-klassen for at opdatere tælleren.
Siden er en del af en større grænseflade, men opgaven fokuserer på notifikationssiden. CSS-variabler sikrer konsistens ved fremtidige udvidelser. Da siden står alene, fører links ikke til indlæg eller billeder. Opgaven følger styleguiden for at matche mockup'en.
Funktionaliteten kunne være mere effektiv med Vue.js, hvor data binding med { ref } kunne udnyttes. Koden ville også være nemmere at vedligeholde, hvis projektet voksede, da den ville være mere overskuelig.