//STYLE: Work from general to specific

Develop things in small chunks that work

By now, you have had the experience of typing in a large chunk of code and... nothing. Just a bunch of errors. And a really frustrating time figuring out where the errors are coming from.

There is a way around this. If you develop your code in very small chunks at a time and get each chunk working, it is much, much, MUCH easier to debug your mistakes.

So if you are not trying out your code every five minutes or less, you are probably doing it the hard way. I would recommend building your assignment in the following steps:

  1. Get the basics working:
    Look at the code at the top of this example, type it in and get it working. Pay special attention to:
    • the jQuery linking code
    • the animateHeading function
    • the CSS code for #animateID
    • and the HTML code for the body

  2. Get the program recognizing keystrokes:
    Remember the first example from Keyboard control? Steal the Javascript and HTML code from it, and incorporate it into the <script> and <body> areas of your code.
  3. Get different actions happening for different keys:
    Then add the code from the if () statement from the next part of the lesson, but change the functions for the different key codes. (Perhaps animateUp();, etc.?)
  4. Define the different action functions:
    Look at the last part of Keyboard control. Use this as inspiration to organize your action functions.
  5. Add the jQuery animation:
    In particular, look at the last example on this page that refers to relative movement.
  6. Clean it up and submit:
    Check you code for good style, indentation, modular functions, intelligent commenting (including INPUT, PROCESS, and OUTPUT labels), etc. Then hand it in...