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

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

Table of Contents

    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!

    William Imoh

    20 posts

    Developer, Developer Advocate, Changing the world one semi-colon at a time!