Les 6b

Opdracht 1) Gekleurde invoer

Ga naar deze repl. Je hebt een pagina met invoervelden en een knop. Zorg dat de knop de tekst van elk ingevoerd element rood kleurt.

Probeer dit zo kort mogelijk te doen. Je gebruikt natuurlijk ook document.getElementsByClassName().

Daarnaast gebruik je ook een for-loop:

for (let index = 0; index < lijst.length; index++){
}

Opdracht 2) Random gekleurde invoer

Ga naar deze repl. Neem het volgende array (lijst) op in je JavaScript bestand (en zet er extra kleuren in):

var kleuren = ["red", "blue", "yellow"]

Maak een aantal invoervelden waarin je woorden of een stuk tekst (naar eigen keuze) in kan vullen.

Geef alle invoervelden dezelfde class.

Maak dan een knop die elk ingevoerd element een andere kleur uit het kleurenarray geeft.

Probeer dit zo kort mogelijk te doen (denk aan kiezen uit een lijst van kleuren etc). Je gebruikt uiteraard ook document.getElementsByClassName().

Opdracht 3) Selecteer de tag

Ga naar deze repl.

Maak een HTML pagina met twee knoppen en wat cursieve (=schuingedrukte) en gewone text. Cursieve tekst maak je met de <em>-tag

Met knop 1 selecteer je alle cursieve woorden, en verander je de kleur.

Met knop 2 selecteer je alle cursieve woorden, en verander je de kleur terug.

Er staan wat hints voor de in de code om af te maken.