Se løsningen her: https://codepen.io/maxfestersen/pen/NZjjaW.
Jeg har udviklet en simpel farvevælger med SCSS og JavaScript.
For at anvende løsningen, så besøg linket, eller brug den indlejrede version forneden. Der er 4 faner, HTML, SCSS, JS og Resultat. Tryk på resultatsiden for at se, og anvende løsningen. I løsningen trykker man på en farve. Efter en fare er valgt, vil elementet til venstre skifte til denne farve. Derudover, så vælges der en kant til elementet, baseret på om farven er kategoriseret som rød, grøn eller blå.
På de øvrige faner kan du se den respektive kode der hører til denne kategori. F.eks. kan SCSS kode ses under SCSS-fanen.
1
Opgaven blev udviklet i forbindelse med ansøgning til et anonymt firma. Opgaveteksten er også anonym. Opgaven gik i korte træk ud på at udvikle en SCSS farvevælger på under 3 timer. Opgaven blev løst, og fik positiv feedback.
Det er min første løsning der anvender SCSS.
Fremgang
Jeg startede med at oprette HTML-skelettet. Derefter tilføjede jeg styling til tabellen og cellerne. Herefter definerede jeg udgangs farver, og begyndte jeg at udvikle funktionalitet til at variere farverne med SCSS funktionen “lighten”. Til sidst tilføjede jeg onclick events i HTML og forbedringer af designet i SCSS og animationer.
Evaluering
Jeg mener at resultatet opfylder målet tilfredsstillende. For et første projekt i SCSS, har det lykkedes meget godt, og jeg har kunne anvende mange af funktionerne der findes i SCSS, men ikke CSS. Herunder indlejret opstilling, variabler, SCSS &, mixins, regnestykker i SCSS-format, if statements og for loops.
Jeg ville gerne have minimeret brugen af HTML yderligere. Jeg mener ikke at det havde været nødvendigt at lave onclick events i HTML frem for JavaScript.
Udvalget af farver kunne også udvides. F.eks. med darken funktionen fra SCSS.
Opgaven blev evalueret positivt, og min evaluering blev også anerkendt.