Eyes Follow Mouse Cursor : Frontend Coding Exercises

programming
1

This is the happening spot to discuss solutions to the Eyes Follow Mouse Cursor coding exercises!

:slight_smile:

2

Tried to go minimal with this one.

<style>
html, body {
  height: 100%;
  margin: 0;
}
body, i {
  display: flex;
  align-items: center;
  justify-content: center;
}
p, i {
  aspect-ratio: 1/1;
  width: 12vw;
  border: 1px solid black;
  border-radius: 12vw;
}
i {
  width: 6vw;
  position: relative;
  background: black;
}
</style>
<p><i></i></p>
<p><i></i></p>
<script>
window.onmousemove = ({clientX, clientY}) => document.querySelectorAll("i").forEach(({style}) => [style.left, style.top] = [`${6*clientX/window.innerWidth}vw`, `${6*clientY/window.innerHeight}vw`]);
</script>

JSFiddle version

2 Likes
3

Is the badge supposed to be the same as the bottles of beer :beers: badge? :eyes:

1 Like
4

Haha no! I forgot to update the badge. Let me update that in a few moments and send it over to you :grinning:

5

I think Iā€™m missing a couple of other badges too :eyeup:

6

Fixed all of those right now :slight_smile: You should have badges for all of the exercises!

1 Like