Man starte 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.
Nu skal vi ned i CSS’en. Her skal vi beskrive sidens(body) opsætning og hvordan klassen skal se ud for select, altså vores dropdown.
Nu skal vi tilbage til vores HTML boks og skrive div’er ind for de to bokse der viser farverne
I denne opgave skal prøver vi at lære at bruge JavaScript på en meget enkelt dog lidt lang måde, men meget kan kopieres og tilrettes få steder bagefter.
Vi skal også se på hvordan man kan tilgå opgaven på en kortere og måde dog lidt sværere at forstå, hvis ikke man har prøvet den lidt længere måde først/før.
Nu skal vi tilbage til vores CSS boks og skrive klasserne ind for de to bokse der viser farverne, så vi kan se dem.
Vi bliver i CSS boksen. For at vi kan se farvene i den lange version, skal vi så lige lave klasserne der kan kaldes på for at vise hver farve.
Vi hopper videre til vore JS boks og går nu i gang med den første version.
Skriv det ind du ser på billedet. Du vil ikke kunne se at du vælger rød endnu dog, det tager vi i del 8.
Nu skal u så tage og kopiere det du ser på billedet og sætte kopien ind lige under bagefter. Kopien skal så bare være for farven orange så skift alt der hedder “red” ud mvd orange.
Nu skal du kopiere det samme igen(se billede) men sætte det ind under orange delen og nu sørge for at farven yellow skifts ud med red. Og sådan fortsætter du til at du har sat ind for alle farverne.
Billedet viser det du skal kopiere
Nu skal sørge for at man også kan se det vi vælger at skifte(change) imellem. Kort fortalt så siger vi at når vi skifter på dropdown valgene (select id som er colors1) skal functionerne backgroundChange(som vi lige har lavet) køre. Næste del laver vi en function der styrer den korte måde – nemlig changeBgColor.
Nu skal du lave den korte model/function for det andet vindue. Vi er stadig i JS boksen.