Code Challenge #4: Build An Eye-Tracking Alien with JavaScript

By William Imoh

Hi and welcome to our Code Challenge #4. This week on the challenge we shall be delving into mouse tracking with JavaScript and simple animations with CSS.

The Challenge

The challenge is basically to build this Alien from Mars. We were browsing CodePen and saw this awesome CSS alien built by Eduardo Sada. View the original CodePen here: https://codepen.io/eduardosada/pen/mRZevM

We’ve taken the CSS alien and added JavaScript. Notice the cool thing about our alien when you move your cursor around?

The alien’s eye moves and always tracks your mouse cursor.

Try to implement that feature using JavaScript. You can use CodePen or any other similar means to try the challenge and do well to share the link with us.

Requirement

Complete this awesome challenge using JavaScript.

  • Use JavaScript to make the alien’s eye follow your mouse cursor
  • You shouldn’t have to write any extra HTML/CSS for the mouse-tracking. Only JavaScript for this part

Bonus

Our Alien blinks occasionally, you could implement that also. For this part, you will need to add a CSS animation.

Resources

Check out the base code for the HTML and CSS without the eye tracking effect and the blinking.

Feel free to fork this base CodePen as your starting point for this challenge.

Community

  • Join the Slack Group to Interact with others in the Slack Channel #codechallenge.
  • Post your solutions and issues on twitter with the hashtag #scotchchallenge
  • Post your solutions in the comments.

Solution

The solution to this challenge will be released on Monday. Happy coding!

Source:: scotch.io