Javascript

OPGAVER TIL HTML & CSS – JS – COLOR MIXER

Opgave 8

Opgave 8 – Del 1

Først skal vi igennem disse trin

Lav en ny pen i codepen.io
Gå op i HTML boksen og skriv dette ind:

Bemærk at linje 3 skal være tom, det er fordi vi skal bruge den senere.

Opgave 8 – Del 2

Nu skal vi ned i CSS’en. Her skal vi beskrive hvordan klassen skal se ud for oveskriftTxt og colorsRGB.

Opgave 8 – Del 3

Nu skal vi tilbage til vores HTML boks og skrive vores select med dertil options ind. Options virker som en dropdown.

Du skal bagefter kopiere hele dette kode stykke fra linje 3 til og med linje 17.
Tryk enter så du kommer ned på en tom linje 18 og sæt det nu ind.
HUSK at ændre på emoji eller navn til grøn og id’en skal nu hedde “colorGreen“.

Kopier igen og lav for blå, med id’en “colorBlue“.

Man starter med et select tag og inde i det tag tilsætter man options. firkanterne er emojis, dem får du frem ved at trykke Windows tasten og ^ tasten samtidig. Hvis ikke du kan finde dette så skriv ordet for farven i stedet.

Opgave 8 – Del 4

Vi bliver i HTML boksen og kopier en linje 3 til og med linje 17 en sidste gang. Men nu skal det ændres på både id’en og på alle value, husk at bruge punktummer og ikke komma.

Opgave 8 – Del 5

Vi går nu ned i CSS boksen. For skal nu beskrive klasserne for colorProcent.

Opgave 8 – Del 6

Vi går nu tilbage til HTML boksen. For vi skal gøre klar til boksen farven skal vises i og senere kode boksen også.

Opgave 8 – Del 7

Vi går nu igen ned i CSS boksen, så vi kan beskrive colorBowl(rammen) og colorBowl-inside(der farven vises).

Opgave 8 – Del 8

Vi hopper tilbage til HTML’en en sidste gang og skriver nu ind for code boksen der viser koden for farven.

Opgave 8 – Del 9

Vi hopper tilbage til CSS’en sidste gang også og beskriver nu klasserne ind for colorTxt, code-wrapper, textarea og code-wrapper button.

Opgave 8 – Del 10

Vi hopper videre til vore JS boks og går nu i gang med at lave vores variabler.

Opgave 8 – Del 11

Vi går videre til at skrive vores function ind. Variablerne herinde i functionen er lokale da de kun skal bruges ind i functionen. Variablerne er sat til 255 for R(rød), G(grøn) og B(blå), hvor White er sat til 1 da opacity rangerer fra 0(usynlig) til 1(synlig) alt i mellem fx 0.5 svarer til halvsynlig/halvusynlig.

Vi skriver så at alt efter hvilken option value der vælges i dropdown så skal farverne der tages den procentsats af farven for variablen R, samme for G og B. Men for White virker value i HTML’en også her, så vi henviser blot til variablen.

Til sidst sætter vi delen ind for koden boksen så vi kan se koden.

Opgave 8 – Del 12

Nu skal vi så sørge for at farven så også vises i boksen, altså at functionen køres når der skiftes værdier på Rød, Grøn, Blå og Styrken(White) på farven

Opgave 8 – Del 13

Vi er stadig i JS boksen og skriver nu det sidste ind. Functionen for at kopiere koden.