Make a page that looks like this:

You can use these images:

Upload your solution to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

Create a table showing the population growth rate for countries around the world. It should look like this:

The data comes from the CIA World Fact Book.

There’s lots of data. You can copy from a file with the table already created. It will save you a lot of typing.

Upload your solution to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

Add stripes to your population growth rate table:

Upload your solution to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

Remove the stripes from your table. Then give users the ability to sort your population growth rate table on any column.

Upload your solution to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

Create a page that helps people learn about dogs. The page shows four breeds beginning with B. It should use a <table> to show the dogs.

When the page loads, it looks like this:

Figure 1. Opening screen

When the mouse moves over a dog, two things happen:

• The mouse cursor changes to a hand.
• The breed’s name shows up.

Figure 2. Mouse over

When the user clicks on a dog, details of the breed show:

Figure 3. Show details after click

All of the text is from Wikipedia.

When the user moves the mouse off the dog that was clicked, the details are hidden. For example, this is what happens if the user moves the mouse from the Bichon Frise to the Basenji:

Figure 4. Mouse moved to another dog

Here are the dog images:

The following code might save you some typing.

$('#dog_details').text(
  'The Basenji is a breed of hunting dog that was \
   bred from stock originating in central Africa. \
   Most of the major kennel clubs in the English-speaking \
   world place the breed in the Hound Group; \
   more specifically, it may be classified as belonging \
   to the sighthound type.');

$('#dog_details').text(
  'A Bichon Frise (French, meaning "curly white lap dog") \
   is a small breed of dog of the Bichon type. They are \
   popular pets, similar in appearance to, but larger than, \
   the Maltese. They are a non-shedding breed that requires \
   daily grooming. This lack of shedding makes the Bichon \
   Frise a hypoallergenic breed, which is a very good dog \
   for people who have allergies.');

$('#dog_details').text(
  'The Bloodhound (also known as the St. Hubert hound \
   and Sleuth Hound) is a large breed of dog that was \
   bred originally to hunt deer and wild boar, later \
   specifically to track human beings by scent. It is \
   famed for its ability to follow scents hours or \
   even days old over great distances.');
   
$('#dog_details').text(
  'The borzoi is a breed of domestic dog (Canis lupus \
   familiaris) also called the Russian wolfhound and \
   descended from dogs brought to Russia from central \
   Asian countries. It is similar in shape to a greyhound, \
   and is also a member of the sighthound family.');

The \ is JavaScript’s line continuation character. It lets you split a statement across lines. Mainly it’s used to split long strings, to make them easier to read in a code editor, like NetBeans.

Notes:

• Remember, your page should use a <table> to show the dogs.
• You can bind both click and hover events to the same element.

Upload your solution to your server, and paste the URL below.

(Log in to enter your solution to this exercise.)

Improve your population growth rate table. Make the column headers sticky. As the user scrolls through the page, the column headers (Rank, Country, and Rate) stay in view.

Hint: is there a jQuery plugin you can use?

Upload the solution to your server, and enter the URL.

(Log in to enter your solution to this exercise.)

Figure out a way you can help the user put the data in the population growth rate table into Excel, or another spreadsheet program.

Hint: find out what CSV means.

Upload the solution to your server, and enter the URL.

(Log in to enter your solution to this exercise.)