Exercises: A Web page with tables

You should do the five recommended exercises. Do the optional exercises if you want more practice.

Exercises in the Explore section are more challenging. You may need to use HTML and CSS that isn’t covered in CoreDogs. Get ready to Google!

Recommended

Exercise: Money images

Make a page that looks like this:

Money images

You can use these images:

One front

One back

Five front

Five back

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

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

Exercise: Population growth rate

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

Growth rate

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

Exercise: Population growth rate with stripes

Add stripes to your population growth rate table:

Growth rate striped

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

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

Exercise: Sortable population growth rate table

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

Optional

Exercise: Dog browser - Bs

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:

Opening screen

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.

Mouse over

Figure 2. Mouse over

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

Show details after click

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:

Mouse moved to another dog

Figure 4. Mouse moved to another dog

Here are the dog images:

Basenji

Bichon Frise

Bloodhound

Borzoi

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

Explore

These challenging exercises may use HTML not covered in CoreDogs. Get ready to Google!

Exercise: Sticky headers

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

Exercise: Download table data

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


How to...

Lessons

User login

Log in problems? Try here


Dogs