Learn More
Resend Email
3
CaptainRant
9h

Today I wrote: a mousetrail program. lol

<html>
<head>
<title>mouse trail</title>
</head>
<body>

<script>
/* elements */
let elements = [];

for(let i=0; i<5; i++) {
let div = document.createElement("div");
div.style.position = "absolute";
div.style.left += (30*i) + "px";
div.style.width = "10px";
div.style.height = "10px";
div.style.backgroundColor = "blue";
elements[i] = div;
document.body.appendChild(div);
}

/* mousex, mousey */
document.body.addEventListener("mousemove", event => {
let mouseX = event.clientX;
let mouseY = event.clientY;

for(let i=0; i<elements.length; i++) {
/* timeout */
setTimeout(() => { elements[i].style.left = mouseX + (10*i)}, (50*i));
setTimeout(() => { elements[i].style.top = mouseY + (10*i)}, (50*i));
}
});

</script>
</body>
</html>

rant

javascript

practice

mousetrail

random
Favorite
Ranter
Comments
  • 1
    9h
    Nice, but be more js-y. elements.push does exist and elements.forEach.
  • 1
    9h
    @retoor Yes, I intentionally kept it super old school. lol. I wonder what the time complexity / linear complexity is of the Array.push() in js. In the book I read it mentioned that trees are a more performing data structure in that sense.
  • 0
    2h
    @CaptainRant Yeah, but there is a breakpoint, when you can outperform a linear iteration, but 5 is not it XD
Related Rants
devRant © 2021 Hexical Labs LLC
Privacy Policy  |  Terms of Service
Add Comment