How to auto generate divs with javascript?-CodePudding

I made a basic javascript code so you can poke divs with you mouse.

Unfortunately I have to add them manualy but i wanna add so much of them with a pattern. First i decided to use grid but i guessed it wont work because divs (which i call them squares from now on :D) can change their position.

So I was about to ask, how can I create a javascript code that i can spawn them until they fill the screen.

Also i have another question which is realted to this project, How can i make these squares just decors. I mean by decors i dont want them to effect the webside at all, when the blocks goes out of the screen the body starts to expend, is there any way to avoid that?

(Also it will be better if you make the snippet full screen!)

speedX = 0
speedY = 0


square = document.getElementsByClassName("square")

document.onmousemove=function(e){
    speedX = e.movementX;
    speedY = e.movementY;

    posX = e.pageX;
    posY = e.pageY;

}


setInterval(() => {

    movement = Math.sqrt(speedX*speedX   speedY*speedY)
    speed = movement * 10

}, 100);



function AddSquare(){
    const newDiv = document.createElement("div")
    const parent = document.querySelector(".background")
    newDiv.classList.add("square")
    parent.appendChild(newDiv)

}


for (let i = 0; i < square.length; i  ) {
    const element = square[i];

    element.style.backgroundColor = element.getAttribute("color")

    element.addEventListener('mouseover',() => {
        const y = speedY
        const x = speedX
    
        const rad = Math.atan2(y, x)
        yAxis = movement * Math.sin(rad)
        xAxis = movement * Math.cos(rad)
    
        element.style.left = `${Math.round(element.getBoundingClientRect().x   xAxis * 3)}px`
        element.style.top = `${Math.round(element.getBoundingClientRect().y   yAxis * 3)}px`

        element.style.transform = `rotate(${rad * (180/Math.PI)}deg)`
    
    
    });
    
}

body{
    margin: 0;
    width: 100vw;
    height: 100vh;
    display: flex;

}

.square{
    background-color: lightcoral;
    width: 75px;
    height: 75px;
    position: absolute;
    transform: rotate(0deg);

    transition: all ease-out 0.5s;
    
}

#Header{
    font-size: italic;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

    <link rel="stylesheet" href="css.css">

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

    <div >
        <div  style="top: 150px; left: -20px;" color="lightcoral"></div>
        <div  style="top: 150px; left: 80px;" color="bisque"></div>
        <div  style="top: 150px; left: 180px;" color="lightcoral"></div>
        <div  style="top: 150px; left: 280px;" color="aquamarine"></div>
        <div  style="top: 150px; left: 380px;" color="bisque"></div>
        <div  style="top: 150px; left: 480px;" color="lightcoral"></div>
        <div  style="top: 150px; left: 580px;" color="aquamarine"></div>
        <div  style="top: 150px; left: 680px;" color="bisque"></div>
        <div  style="top: 150px; left: 780px;" color="lightcoral"></div>
        <div  style="top: 150px; left: 880px;" color="aquamarine"></div>
        <div  style="top: 150px; left: 980px;" color="bisque"></div>
        <div  style="top: 150px; left: 1080px;" color="lightcoral"></div>
    
        <div  style="top: 250px; left: -30px;" color="cadetblue"></div>
        <div  style="top: 250px; left: 70px;" color="cadetblue"></div>
        <div  style="top: 250px; left: 170px;" color="greenyellow"></div>
        <div  style="top: 250px; left: 270px;" color="yellowgreen"></div>
        <div  style="top: 250px; left: 370px;" color="cadetblue"></div>
        <div  style="top: 250px; left: 470px;" color="greenyellow"></div>
        <div  style="top: 250px; left: 570px;" color="yellowgreen"></div>
        <div  style="top: 250px; left: 670px;" color="cadetblue"></div>
        <div  style="top: 250px; left: 770px;" color="greenyellow"></div>
        <div  style="top: 250px; left: 870px;" color="yellowgreen"></div>
        <div  style="top: 250px; left: 970px;" color="cadetblue"></div>

    
        <div  style="top: 350px; left: -40px;" color="lightcoral"></div>
        <div  style="top: 350px; left: 60px;" color="bisque"></div>
        <div  style="top: 350px; left: 160px;" color="lightcoral"></div>
        <div  style="top: 350px; left: 260px;" color="aquamarine"></div>
        <div  style="top: 350px; left: 360px;" color="bisque"></div>
        <div  style="top: 350px; left: 460px;" color="lightcoral"></div>
        <div  style="top: 350px; left: 560px;" color="aquamarine"></div>
        <div  style="top: 350px; left: 660px;" color="bisque"></div>
        <div  style="top: 350px; left: 760px;" color="lightcoral"></div>
        <div  style="top: 350px; left: 860px;" color="aquamarine"></div>
        <div  style="top: 350px; left: 960px;" color="bisque"></div>
    </div>

    Work in progress...

    <div >
        <div >
            <div ><h1 id="Header">Work in progress...</h1></div>
        </div>
    </div>


    <script type="text/javascript" src = "javascript.js"></script> 

</body>
</html>

CodePudding user response：

You may have a function that given a container will be filled with how many squares can fit inside as long as there is still avaiable width and available height in the target.

Here in this demo I better factored your code and added a main function called drawSquares that gets called when the button reDRAW is clicked. Each time the squares are redrawn, the target content is emptied.

I'm using a button to trigger the box drawing because the available space depends on the size of the area when the action is fired. For example you can expand the snippet and decide to redraw the squares to have the whole new area filled again.

You may decide to call the action on document ready or when the window gets resized.

let mouse = {
  speedX: 0,
  speedY: 0,
  posX: 0,
  posY: 0,
  movement: 0,
  speed: 0
}

//on mousemove update the moouse object
document.onmousemove = function(e) {
  mouse.speedX = e.movementX;
  mouse.speedY = e.movementY
  mouse.posX = e.pageX;
  mouse.posY = e.pageY;
}

//refresh the mouse movement and speed every 100ms
setInterval(() => {
  mouse.movement =
    Math.sqrt(Math.pow(mouse.speedX, 2)   Math.pow(mouse.speedY, 2));
  mouse.speed = mouse.movement * 10;
}, 100);

//add a square div in parent element
function addSquare(parent) {
  const newDiv = document.createElement("div");
  newDiv.classList.add("square")
  parent.appendChild(newDiv)
  return newDiv;
}

//add squares in the parent element filling the available size
//gap is the space between squares, size is the edge of the square
//if skipbefore is false it will begin to draw the next square also if it won't fit entirely
function addSquares(parent, gap, size, skipbefore = true) {

  const squares = [];

  let rect = parent.getBoundingClientRect();
  const availableWidth = rect.width;
  const availableHeight = rect.height;

  let top = 100;
  while (top < availableHeight) {
    let left = 0;
    if (skipbefore && top   size > availableHeight)
      break;
    while (left < availableWidth) {
      if (skipbefore && left   size > availableWidth)
        break;
      const square = addSquare(parent);
      square.style.left = `${left}px`;
      square.style.top = `${top}px`;
      squares.push(square);
      left  = gap   size;
    }
    top  = gap   size;
  }

  return squares;
}

//onmoveover event handler
const squareOnMouseOver = (event) => {
  const element = event.target;

  const y = mouse.speedY;
  const x = mouse.speedX;

  const rad = Math.atan2(y, x);
  yAxis = mouse.movement * Math.sin(rad);
  xAxis = mouse.movement * Math.cos(rad);

  const rect = element.getBoundingClientRect();

  const left = Math.round(rect.x   xAxis * 3);
  const top = Math.round(rect.y   yAxis * 3);

  element.style.left = `${left}px`;
  element.style.top = `${top}px`;
  const o = rad * (180 / Math.PI);
  element.style.transform = `rotate(${o}deg)`;
}

//resets the .target parent and redraw the squares inside it
function drawSquares() {

  const parent = document.querySelector('.target');
  parent.innerHTML = '';
  const squares = addSquares(parent, 25, 75);

  const colors = [
    'lightcoral',
    'bisque',
    'aquamarine',
    'cadetblue',
    'greenyellow',
    'yellowgreen'
  ];

  squares.forEach(square => {
    const iColor = Math.floor(Math.random() * (colors.length - 1));
    const color = colors[iColor];
    square.style.background = color;
    square.addEventListener('mouseover', squareOnMouseOver);
  });
}

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
}

.square {
  background-color: lightcoral;
  width: 75px;
  height: 75px;
  position: absolute;
  transform: rotate(0deg);
  transition: all ease-out 0.5s;
}

#Header {
  font-size: italic;
}

.background {
  width: 100%;
  height: 100%;
}

.target {
  display: block;
  width: 100%;
  height: 100%;
}

#draw {
  font-size: 20px;
  padding: .2em 1em;
  cursor: pointer;
}

.container .row .col > * {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link el="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<body>
  <div >

    <span>Work in progress...</span>

    <div >
      <div >
        <div >
          <h1 id="Header">Work in progress...</h1>
          <button id="draw" onclick="drawSquares()">reDRAW</button>
        </div>
      </div>
    </div>

    <div ></div>
  </div>
</body>