//MAKE: 2.14 Hand-in — Shy Link Is Shy


Saving your work

Use Save as... to save the empty template as "2.14H-ShyLinkIsShy-LastName.html" in your Computer Programming 12 directory.

The assignment

Use functional programming to create a program that moves animates something smoothly in response to clicks, the keyboard, and/or the movement of the mouse.


For example: Poor Link is shy! Click on him to see what happens...

Make it your own

This assignment does not have to use Link. Look at the criteria - as long as you meet those criteria things are great!

Not sure where to start?

These are step by step directions to complete the basic version of this assignment.

Note that this does not include any onclick code

  1. Create an element to move, assign it an id, and change its position mode using CSS.
  2. Create a PROCESS function that will randomly generate and return a distance (maybe from 1 → 200).
  3. Create a PROCESS function that will randomly generate and return a number between 1 and 4 (one for each for up, down, left, and right).
  4. Create four OUTPUT functions called for animating something in each of the four directions (up, down, left, right). Each OUTPUT function should:
  5. Create a MAIN function called mainProcedure that will be triggered when the element is moused over. mainProcedure should:
  6. If you haven't already, check that you have added descriptive comments to each function.
  7. Although it is not required, use console logs at the beginning of each function to tell you which functions are working.