How do I make a div-element move to a random position and also get random color when it is clicked u-CodePudding

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>

CodePudding user response：

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;
}

CodePudding user response：

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>