{"id":53,"date":"2019-06-23T12:32:49","date_gmt":"2019-06-23T10:32:49","guid":{"rendered":"http:\/\/maxfest.dk\/port\/?p=53"},"modified":"2019-11-25T15:27:41","modified_gmt":"2019-11-25T14:27:41","slug":"scss-color-picker","status":"publish","type":"post","link":"https:\/\/maxfest.dk\/port\/vearker\/hjemmesider\/scss-color-picker\/","title":{"rendered":"SCSS Color Picker"},"content":{"rendered":"\n

Se l\u00f8sningen her: https:\/\/codepen.io\/maxfestersen\/pen\/NZjjaW.<\/a><\/p>\n\n\n\n

Jeg har udviklet en simpel farvev\u00e6lger med SCSS og JavaScript.<\/p>\n\n\n\n

For at anvende l\u00f8sningen, s\u00e5 bes\u00f8g linket, eller brug den indlejrede version forneden. Der er 4 faner, HTML, SCSS, JS og Resultat. Tryk p\u00e5 resultatsiden for at se, og anvende l\u00f8sningen. I l\u00f8sningen trykker man p\u00e5 en farve. Efter en fare er valgt, vil elementet til venstre skifte til denne farve. Derudover, s\u00e5 v\u00e6lges der en kant til elementet, baseret p\u00e5 om farven er kategoriseret som r\u00f8d, gr\u00f8n eller bl\u00e5.<\/p>\n\n\n\n

P\u00e5 de \u00f8vrige faner kan du se den respektive kode der h\u00f8rer til denne kategori. F.eks. kan SCSS kode ses under SCSS-fanen.<\/p>\n\n\n\n

\n<\/p>\n<\/pre>\n\n\n\n
Opgaven blev udviklet i forbindelse med ans\u00f8gning til et anonymt firma. Opgaveteksten er ogs\u00e5 anonym. Opgaven gik i korte tr\u00e6k ud p\u00e5 at udvikle en SCSS farvev\u00e6lger p\u00e5 under 3 timer. Opgaven blev l\u00f8st, og fik positiv feedback.<\/p>\n\n\n\n
Det er min f\u00f8rste l\u00f8sning der anvender SCSS. <\/p>\n\n\n\n
Fremgang<\/h2>\n\n\n\n
Jeg startede med at oprette HTML-skelettet. Derefter tilf\u00f8jede 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\u00f8jede jeg onclick events i HTML og forbedringer af designet i SCSS og animationer.<\/p>\n\n\n\n
Evaluering<\/h2>\n\n\n\n
Jeg mener at resultatet opfylder m\u00e5let tilfredsstillende. For et f\u00f8rste 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.<\/p>\n\n\n\n
Jeg ville gerne have minimeret brugen af HTML yderligere. Jeg mener ikke at det havde v\u00e6ret n\u00f8dvendigt at lave onclick events i HTML frem for JavaScript. <\/p>\n\n\n\n
Udvalget af farver kunne ogs\u00e5 udvides. F.eks. med darken funktionen fra SCSS.<\/p>\n\n\n\n
Opgaven blev evalueret positivt, og min evaluering blev ogs\u00e5 anerkendt.<\/p>\n","protected":false},"excerpt":{"rendered":"
Se l\u00f8sningen her: https:\/\/codepen.io\/maxfestersen\/pen\/NZjjaW. Jeg har udviklet en simpel farvev\u00e6lger med SCSS og JavaScript. For at anvende l\u00f8sningen, s\u00e5 bes\u00f8g linket, eller brug den indlejrede version forneden. Der er 4 faner, HTML, SCSS, JS og Resultat. Tryk p\u00e5 resultatsiden for at se, og anvende l\u00f8sningen. I l\u00f8sningen trykker man p\u00e5 en farve. Efter en fare…<\/p>\n","protected":false},"author":1,"featured_media":58,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-53","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hjemmesider"],"_links":{"self":[{"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/posts\/53","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/comments?post=53"}],"version-history":[{"count":8,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/posts\/53\/revisions"}],"predecessor-version":[{"id":946,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/posts\/53\/revisions\/946"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/media\/58"}],"wp:attachment":[{"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/media?parent=53"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/categories?post=53"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/tags?post=53"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}