Section 4a.3. What s the game plan?

4a.3. What's the game plan?

With the HTML and CSS already written, all that's left for you to take care of is the JavaScript. Let's figure out what needs to be done, and start writing some code.

1. Create a new file to store the page's JavaScript code.

   This is the easy part... let's call the new file top5.js.

2. Write a function that adds a CD to the Top 5 list when the CD's cover is clicked on.

   We'll have to add an onClick () event handler to each CD cover image to handle this. Then we can create a new function, called addToTop5().

3. Add a ranking number to each CD, so users can see the order of the Top 5.

   The DOM makes tasks like this pretty easy. We can put this code in addToTop5(), also.

4. Write a function that clears the user's choices and starts over.

   An onClick event handler on the "Start Over" button can handle this, and run another JavaScript function that you'll write. Let's call this new function startOver().

Just Do It

Start out by taking care of Step 1. Create a new file and name it top5.js. Go ahead and create a function called addToTop5() to handle Step 2, and another function named startOver() to handle Step 4. We'll write the code for Step 3 as part of the addToTop5() function, so you don't need a separate function for that step. You can leave all of these functions blank for now; we'll fill each one in as we go through the chapter.

Be sure you've made these changes before you turn the page, and then save your new JavaScript file as top5.js in the top5/ directory, alongside top5.html and top5.css.