Velg farge og rotasjon s. 135-136

Klikk på knappen "Kjør koden".

Nå ser du hvordan koden på side 135-135 i læreboken fungerer.

Skriver du denne koden og legger inn en fil av en ugle vil du se at uglen

roterer:-)

Skriv inn/rediger koden:

<!DOCTYPE html> <html> <head> <style> body { background-color: olive; } #ugle { width: 300px; margin: 150px; transition: 0.5s; } </style> </head> <body> <div> <input type="color" id="fargevelger"> <input type="range" id="rotasjonsvelger" min="0" max="360" value="0"> </div> <img id="ugle" src="Ugle.svg"> <script> var ugle = document.getElementById("ugle"); var rotasjonsvelger = document.getElementById("rotasjonsvelger"); var fargevelger = document.getElementById("fargevelger"); fargevelger.onchange = function() { document.body.style.background = fargevelger.value; } rotasjonsvelger.onchange = function() { ugle.style.transform = "rotate(" + rotasjonsvelger.value + "deg)"; } </script> </body> </html>

Resultat av koden: