Head Rush Ajax

268

Chapter 4.5

Create JS le Add CD to Top 5

Start over

Add CD rankings

There are several things left to do in order to nish up addToTop5(). Let’s gure out

exactly what needs to be done, and then get to the code on the next page.

What’s left to do?

Add a new CSS class for CD rankings

1

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 le:

.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;

}

Create a new <span> element and

set up its CSS class

2

Create a new text node and set its

text to the CD ranking

3

Add the text node to the <span>,

and the <span> to the <div>

4

Make sure only 5 CDs can be

added to the Top 5 listings

5

Add this CSS to your top5.

css le before going on.

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.

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.

This is just connecting the new nodes

to the DOM tree, to make sure the

CD ranking appears in the web page.

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.

css and a little more dom

This involves your ...