Files seperated

js.js

@@ -0,0 +1,47 @@
+document.addEventListener("DOMContentLoaded", function() {
+
+            const astroCircle = document.getElementById("astroCircle");
+
+            const labels = [
+                "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"
+            ];
+
+            const circleSize = astroCircle.offsetWidth;
+            const centerX = circleSize / 2;
+            const centerY = circleSize / 2;
+
+            const radius = circleSize / 2;
+
+            // numbers will be placed OUTSIDE the circle
+            const numberRadius = radius + 25;
+
+            for (let i = 0; i < 12; i++) {
+
+                const angleDeg = i * 30;
+                const angleRad = (angleDeg - 90) * Math.PI / 180;
+
+                // draw segment divider
+                const line = document.createElement("div");
+                line.classList.add("segment-line");
+                line.style.transform = `translateX(-50%) rotate(${angleDeg}deg)`;
+                astroCircle.appendChild(line);
+
+                // place number in center of segment
+                const midAngle = angleDeg + 15;
+                const midRad = (midAngle - 90) * Math.PI / 180;
+
+                const x = centerX + numberRadius * Math.cos(midRad);
+                const y = centerY + numberRadius * Math.sin(midRad);
+
+                const number = document.createElement("div");
+                number.classList.add("segment-number");
+                number.innerText = labels[i];
+
+                number.style.left = `${x}px`;
+                number.style.top = `${y}px`;
+
+                astroCircle.appendChild(number);
+
+            }
+
+        });