Circle-Generator 1.0

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Circle of Divs</title>
  <style>
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
    }

    .circle-container {
      position: relative;
      width: 600px;
      height: 600px;
      background-color: red;
    }

    .circle-div {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 16px;
      background-color: blue;
    }
  </style>
  
  <script>
  	function positionDivsInCircle(numDivs, radius, parentDiv) {
      const centerX = parentDiv.clientWidth / 2;
      const centerY = parentDiv.clientHeight / 2;

      for (let i = 0; i < numDivs; i++) {
        const angle = (i / numDivs) * 2 * Math.PI;
        const x = centerX + radius * Math.cos(angle);
        const y = centerY + radius * Math.sin(angle);

        const div = document.createElement('div');
        div.className = 'circle-div';
        div.innerText = i + 1;
        div.style.left = x - 25 + 'px'; // Adjusting for the div size
        div.style.top = y - 25 + 'px'; // Adjusting for the div size
        parentDiv.appendChild(div);
      }
    }    
    
  </script>
</head>

<body>
  <div id="circle-container" class="circle-container"></div>
  <script>
    const circleContainer = document.getElementById('circle-container');
		positionDivsInCircle(20, 275, circleContainer);
  </script>
</body>
</html>