I am struggling to position a set of circles around a parent div in my code. I want 6 circles to form a circle around the parent div, but they are not lining up correctly. Can someone help me identify what I'm doing wrong?
var div = 360 / 6;
var radius = 150;
var parentdiv = document.getElementById('parentdiv');
var offsetToParentCenter = parseInt(parentdiv.offsetWidth / 2); //assumes parent is square
var offsetToChildCenter = 20;
var totalOffset = offsetToParentCenter - offsetToChildCenter;
var elementList = document.querySelectorAll(".circle");
for (var i = 0; i <= elementList.length; i++) {
elementList[i].style.position = 'absolute';
var y = Math.sin((div * i) * (Math.PI / 180)) * radius;
var x = Math.cos((div * i) * (Math.PI / 180)) * radius;
elementList[i].style.top = (y + totalOffset).toString() + "px";
elementList[i].style.left = (x + totalOffset).toString() + "px";
}.container label {
cursor: pointer;
height: 150px;
width: 150px;
display: table-cell;
text-align: center;
padding: 20px 10px 10px 20px;
vertical-align: middle;
border-radius: 50%;
background: green;
}
.container input[type="checkbox"] {
display: none;
}
#parentdiv {
position: relative;
width: 150px;
height: 150px;
background-color: #ac5;
border-radius: 150px;
margin: 150px;
}
.div2 {
position: absolute;
width: 40px;
height: 40px;
background-color: #ac5;
border-radius: 100px;
}<div id="parentdiv"></div>
<div class="container">
<input type="checkbox" id="test1">
<div class="circle">
<label for="test1" class="inner">Test 1</label>
</div>
<input type="checkbox" id="test2">
<div class="circle">
<label for="test2" class="inner">Test 2</label>
</div>
<input type="checkbox" id="test3">
<div class="circle">
<label for="test3" class="inner">Test 3</label>
</div>
<input type="checkbox" id="test4">
<div class="circle">
<label for="test4" class="inner">Test 4</label>
</div>
<input type="checkbox" id="test5">
<div class="circle">
<label for="test5" class="inner">Test 5</label>
</div>
<input type="checkbox" id="test6">
<div class="circle">
<label for="test6" class="inner">Test 6</label>
</div>
</div>