Coding
BEM
I vores projekt har vi brugt BEM-metoden til at sikre en vedligeholdelsesvenlig og overskuelig kodebase. Et godt eksempel på dette kan ses i toggle-card-sektionen. Her har vi brugt –modifier-mønsteret til at differentiere mellem forskellige tilstande af toggle-kortet:
Block: toggle-card repræsenterer hele toggle-kort-komponenten.
Element: toggle-card__icon, toggle-card__label og toggle-card__circle definerer de individuelle dele af toggle-kortet.
Modifier: –inactive og –active bruges til at style kortet forskelligt afhængigt af dets tilstand. F.eks. vises inaktive tilstande i dæmpede farver, mens aktive tilstande er fremhævede for at indikere funktionalitet.
Semantiske elementer
<main>
main-elementet fungerer som hovedcontaineren for landingpagen og gør det tydeligt, hvor det primære indhold ligger.
<h1>, <h2>, <h3>
<h1>: Bruges til sidens hovedtitel, såsom “Hjem,” for at fremhæve det vigtigste fokus.
<h2>: Anvendes til sekundære sektioner som “Du har sparet” eller “Varmekilder,” hvilket opdeler siden i overskuelige dele.
<h3>: Bruges til underoverskrifter inden for komponenter, som for eksempel navne på værelser eller labels på toggles, for at give yderligere hierarkisk struktur.
<article>
Bruges specifikt til individuelle komponenter som toggles for at understrege deres selvstændige natur.
CSS-Animation
Vi implementerede en simpel shake-animation i vores design for at øge interaktiviteten og brugervenligheden, især i redigeringsfunktionen på vores landingpage. Animationen giver visuel feedback til brugeren ved at simulere en rystende bevægelse, hvilket er velkendt fra andre moderne grænseflader, som f.eks. Apples widget-redigeringsskærm.
Javascript
Drag and drop
Vi har anvendt JavaScript til at implementere interaktivitet på vores landingpage, hvor brugeren kan redigere og omarrangere layoutet ved hjælp af drag-and-drop-funktionalitet. Dette giver brugeren frihed til at tilpasse deres brugeroplevelse og forbedrer den overordnede anvendelighed.
Redigeringstilstand
Funktionen starter med en toggle, der aktiverer redigeringstilstanden. Når denne er aktiveret, tilføjes klassen .shaking til kortene, hvilket aktiverer rysteanimationen for at indikere, at kortene kan redigeres.
Drag-and-Drop Funktionalitet
LorNår et kort bliver klikket eller berørt i redigeringstilstand, starter drag-and-drop-funktionen. Først gemmes det aktuelle kort som draggedElement, og et placeholder-element oprettes for at bevare kortets oprindelige position.
Funktionen opretter et midlertidigt placeholder-element, der holder pladsen for kortet. Derudover beregnes offset-værdier, så kortet kan placeres korrekt i forhold til musens eller fingerens position.
Bevægelse af Kort
Når brugeren bevæger musen eller fingeren, opdateres kortets position dynamisk. Dette sikrer en flydende og præcis drag-and-drop-oplevelse.
Denne funktion opdaterer kortets left og top position baseret på musens eller fingerens nuværende placering, hvilket gør det muligt for brugeren at flytte kortet til det ønskede sted.
Afslut Drag-and-Drop
Når brugeren slipper kortet, udskiftes placeholder-elementet med det flyttede kort. Samtidig nulstilles de midlertidige stilarter for at sikre, at kortet integreres problemfrit i layoutet.
Denne funktion afslutter drag-and-drop-processen ved at genindsætte kortet på det nye sted og fjerne placeholder-elementet.
Mobil Support
For at sikre funktionalitet på mobil har vi implementeret en dobbelttryk-funktion, der aktiverer drag-and-drop. Dette gør det muligt for brugere med touch-enheder at flytte kortene lige så nemt som på desktop.
Denne del af koden sikrer, at dobbelttryk på touch-enheder aktiverer drag-and-drop-funktionen, hvilket forbedrer brugeroplevelsen for mobilbrugere.
Vi har brugt mere Javascript i vores kode, dog valgte vi at highlighte den vigtigste del af vores projekt, at bevæge og redigere cards
Validering af koden
Under valideringen af vores HTML fandt vi, at koden generelt var velstruktureret, men der opstod en enkelt fejl og flere warnings. Fejlen skyldtes manglende img-tags, da disse hentes dynamisk fra en ekstern API. Da dette ikke er noget, vi kan kontrollere, påvirker det ikke den samlede funktionalitet.
En gennemgående warning lød: “Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections, or else use a div element instead for any cases where no heading is needed.” Dette skyldes vores beslutning om at bruge section-tags konsekvent for semantisk struktur, selv i tilfælde hvor der ikke var behov for en overskrift.
Denne tilgang sikrer tilgængelighed og gør det lettere for søgemaskiner og skærmlæsere at forstå koden. Selvom warnings blev påpeget, er de ikke kritiske, da vores valg stemmer overens med vores mål om semantisk HTML.
