I have successfully designed a captivating header, and now I am faced with the challenge of randomly placing star-shaped divs throughout it. These stars are implemented as spans with a 'star' class, which is stylized by CSS to create an actual star shape. However, my dilemma arises when attempting to position these 50 stars in random locations across the header. I initially tried generating a random number and assigning it to the star class's margins, but this resulted in all stars having the same margin values. My goal is to use percentage-based margin-top and margin-left properties to achieve the desired random positioning effect. Despite multiple attempts at setting these percentages directly on the div elements, I have been unable to achieve the desired randomness in placement. You can view a demo of my code on CodePen. Here is a snippet of my code:
<div class="header" id="head">
<div class="starholder" id="holdstar">
</div>
<div class="top_nav">
<i class="fa fa-bars"></i>
</div>
<div class="text text-center">
<p id="name">Nick <span id="lastname">D</span</p>
</div>
<div class="mtn1">
</div>
<div class="mtn2">
</div>
<div class="mtn3">
</div>
$(document).ready(function() {
//Name hinge
$("#name").click(function() {
$(".text").addClass("bounce");
setTimeout(function() {
$(".text").removeClass("bounce");
}, 3000);
});
// create stars and place them at random
function createStar() {
var holder = document.getElementById("holdstar");
for (var i = 0; i < 50; i++) {
var percent = Math.floor((Math.random() * 100) + 1);
var string = percent + "%"
var percenttwo = Math.floor((Math.random() * 100) + 1);
var stringtwo = percenttwo + "%";
var star = document.createElement("span");
star.className = "star";
$(".star").css({
"margin-top": string,
"margin-left": stringtwo
});
document.getElementById("holdstar").appendChild(star);
}
};
createStar();
});
I have scoured various resources for solutions, yet none seem to address the issue when dealing with multiple divs. Any assistance would be greatly appreciated.