# Eyes Follow Mouse Cursor : Frontend Coding Exercises

**URL:** https://forum.kirupa.com/t/eyes-follow-mouse-cursor-frontend-coding-exercises/653770
**Category:** programming
**Created:** [September 29, 2022, 3:39am UTC](https://forum.kirupa.com/t/eyes-follow-mouse-cursor-frontend-coding-exercises/653770 "2022-09-29T03:39:28Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [September 29, 2022, 3:39am UTC](https://forum.kirupa.com/t/eyes-follow-mouse-cursor-frontend-coding-exercises/653770/1 "2022-09-29T03:39:28Z")

</div>

This is the happening spot to discuss solutions to the [Eyes Follow Mouse Cursor](https://www.kirupa.com/codingexercises/eyes_follow_mouse.htm) coding exercises!

🙂

---

<div class="post-metadata">

### Author: ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [September 29, 2022, 12:06pm UTC](https://forum.kirupa.com/t/eyes-follow-mouse-cursor-frontend-coding-exercises/653770/2 "2022-09-29T12:06:42Z")

</div>

Tried to go minimal with this one.

```xml
<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](https://jsfiddle.net/659espkz/)

---

<div class="post-metadata">

### Author: ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [September 29, 2022, 12:08pm UTC](https://forum.kirupa.com/t/eyes-follow-mouse-cursor-frontend-coding-exercises/653770/3 "2022-09-29T12:08:02Z")

</div>

Is the badge supposed to be the same as the bottles of beer 🍻 badge? 👀

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [September 29, 2022, 2:03pm UTC](https://forum.kirupa.com/t/eyes-follow-mouse-cursor-frontend-coding-exercises/653770/4 "2022-09-29T14:03:18Z")

</div>

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

---

<div class="post-metadata">

### Author: ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [September 29, 2022, 3:35pm UTC](https://forum.kirupa.com/t/eyes-follow-mouse-cursor-frontend-coding-exercises/653770/5 "2022-09-29T15:35:49Z")

</div>

I think I’m missing a couple of other badges too :eyeup:

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [September 29, 2022, 10:11pm UTC](https://forum.kirupa.com/t/eyes-follow-mouse-cursor-frontend-coding-exercises/653770/6 "2022-09-29T22:11:32Z")

</div>

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