Esta es la tarea con la que estoy atascado:
Ejercicio 4
Estos son algunos ejemplos de colores tal como se utilizan en CSS: Rojo: hsl (0, 100 %, 50 %) Verde: hsl (100, 100 %, 50 %) Azul: hsl (250, 100 %, 50 %) Nota que sólo el primer número cambia entre estos tonos. Debe usar esto para crear elementos redondos con colores de fondo aleatorios. Además, utilice lo que ha aprendido sobre el posicionamiento para colocar los elementos en posiciones aleatorias al hacer clic en el círculo.
Este es mi código hasta ahora para la tarea:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <style> body{ height:100%; } div { border-radius: 50%; width: 100px; height: 100px; } </style> <script> let bodyEl=document.querySelector("body"); let divEl=document.createElement("div"); divEl.style.backgroundColor=hsl(Math.random()*6); bodyEl.appendChild(divEl); </script> </body> </html>1) backgroundColor necesita un valor de string . Estás pasando valor de número de tipo
divEl.style.backgroundColor=hsl(Math.random()*6); Si ha abierto la console , habría recibido el error como:
Uncaught ReferenceError: hsl is not definedEntonces puedes usar:
const hslValue = `hsl( ${getRandomValue(365)}, ${getRandomValue(100)}%, ${getRandomValue(100)}% )` divEl.style.backgroundColor = hslValue; let bodyEl = document.querySelector("body"); let divEl = document.createElement("div"); const getRandomValue = upto => Math.floor(Math.random() * (upto + 1)); const hslValue = `hsl( ${getRandomValue(365)}, ${getRandomValue(100)}%, ${getRandomValue(100)}% )` divEl.style.backgroundColor = hslValue; bodyEl.appendChild(divEl); div { border-radius: 50%; width: 100px; height: 100px; }Haz clic para ver el círculo en acción, disfruta :)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <style> body { height: 100%; } div { border-radius: 50%; position: absolute; width: 100px; height: 100px; } </style> <script> let bodyEl = document.querySelector("body"); let divEl = document.createElement("div"); divEl.style.backgroundColor = `hsl(${(Math.random() * 100)}, 100%, 50%)`; bodyEl.appendChild(divEl); divEl.addEventListener('click', function() { this.style.backgroundColor = `hsl(${(Math.random() * 100)}, 100%, 50%)`; this.style.top = `${parseInt(Math.random() * 100)}px` this.style.left = `${parseInt(Math.random() * 100)}px` }) console.log(`hsl(${(Math.random() * 100)}, 100%, 50%)`); </script> </body> </html>