This is the task that I am stuck with:
Exercise 4
Here are some examples of colors as they are used in CSS: Red: hsl (0, 100%, 50%) Green: hsl (100, 100%, 50%) Blue: hsl (250, 100%, 50%) Note that only the first number changes between these tones. You should use this to create round elements with random background colors. In addition, use what you have learned about positioning to place the elements in random positions when you click on the circle.
This is my code so far for the task:
<!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 needs a string value. You are passing value of type number
divEl.style.backgroundColor=hsl(Math.random()*6);
If you have opened the console, then you would have gotten the error as:
Uncaught ReferenceError: hsl is not defined
So you can use:
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;
}Click to see the circle in action, enjoy :)
<!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>