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!