Section 4a.16. What s left to do?

4a.16. What's left to do?

There are several things left to do in order to finish up addToTop5(). Let's figure out exactly what needs to be done, and then get to the code on the next page.

1. Add a new CSS class for CD rankings

   Here's the CSS you need to overlay the ranking on the CD cover image, and handle the white-on-black coloring. Add this CSS to your top5.css file:

        .rank {     position:         absolute;     text-align:       center;     top:              20px;     font-size:        small;     background-color: black;     color:            white;     border:           thin solid white;     width:            20px;     z-index:          99;     }     Add this CSS to your top5. css file before going on. 

   
   

2. Create a new <span> element and set up its CSS class

   This involves your top5.html file.

   Let's call this class "rank", and set it up so that CD rankings will overlay the CD cover images with white-on-black text.

3. Create a new text node and set its text to the CD ranking

   The rest of this all applies to your addToTop5() JavaScript fiunction.

   We've already got the number of CDs, so we just need to add one to that, and set that new number as the current CD's ranking.

4. Add the text node to the <span>, and the <span> to the <div>

   This is just connecting the new nodes to the DOM tree, to make sure the CD ranking appears in the web page.

5. Make sure only 5 CDs can be added to the Top 5 listings

   Since we have a count of the CDs, this is a simple check to make sure there aren't more than 5 at any time.

Just Do It

It's time to fire up your text editor and finish off addToTop5(). Your job is to take care of steps 2 through 5 listed on the last page by adding code to the addToTop5() function. Think you're ready for the challenge?

See if you can fill in all the missing code blanks. We've added some notes to help you out. Be sure to finish this exercise before turning the page.

 function addToTop5() {   var imgElement = this;   var top5Element = document.getElementById("top5");   var numCDs = 0;   for (var i=0; i<top5Element.childNodes.length; i++) {     if (top5Element.childNodes[i].nodeName.toLowerCase() == "img") {       numCDs = numCDs + 1;     }    }    if (________ >=Make sure only 5 CDs can be added to the Top 5 listings. ____) {       alert("You already have 5 CDs. Click \"Start Over\" to try again.");       return;    }    top5Element.appendChild(imgElement);    imgElement.onclick = null;    var newSpanElement = ___________You may have to flip way back to    the first few pages of Chapter 4 if you get stuck on this one..createElement  (__________);    _______________.className   = "________"; "className" is used to assign a    CSS class to an element.    var newTextElement = document.________________(numCDs + 1);    newSpanElement._____________(newTextElement);The text can go at the "end"    of the <span>'s children (since there aren't any).    ______________What should be the parent of the   <span> element?.insertBefore  (_______________The first argument   to insertBefore() is the node to insert., imgElement); }