Exercises: A Web page with images

You should do the four 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: Three dogs

Here are some images. Right-click and save to download them to your computer.

Kieran

CC

Renata

Background

Use them to create a page that looks like this:

Output

Hints:

  • Here’s some HTML: <p><img id="kieran" src="kieran.jpg" alt="Kieran"></p>
  • You can use # in CSS to select an item with a given id.
  • Don’t use text-align. The last image does not go all the way to the right. It just gets indented more.

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

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

Exercise: The best animal

Download these three images:

Cat

Dog

Horse

Write a page that starts looking like this:

Start state

When the user clicks on the cat or the horse:

Incorrect

When the user clicks on the dog:

Correct

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

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

Exercise: Money counter

Download these images to your computer:

One dollar bill

Two dollar bill

Five dollar bill

Ten dollar bill

Write a page that shows the images. When the user clicks on an image, the page updates a total by the appropriate amount. Here’s some sample output:

Output

Hint: I used pseudocode like this:

When someone clicks on a bill:
Get the current total from the page.
Add the bill's value to the total.
Show the new total on the page.

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

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

Optional

Exercise: A dog slideshow

Make a slideshow of dog photos with captions. Your show should be at least four slides long.

  • Find some dog images that you can legally use.
  • Add funny captions to them with a graphics program.
  • Make a slideshow page with forward and back arrows that work. Find images you can legally use.
  • Show a text caption below each image, as well as the one on the image itself.
  • Use seamless tiles for the page background.
  • Add a header to the page. Use seamless tiles for the header area as well.
  • Add borders around the header and photo.

Here is a page sample. Use different images and captions for your solution:

Sample

Figure 1. Sample

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

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

Exploding tennis balls

Most of us dogs like to chase tennis balls. Renata loves it. But you have to be careful.

Create a page that starts off like this:

Start state

Figure 1. Start state

The user clicks on a tennis ball. If the ball is safe, then the page adds one to the number of balls clicked:

One safe click

Figure 2. One safe click

The user clicks another ball. If that’s safe:

Two safe clicks

Figure 3. Two safe clicks

The count keeps going up, as long as the user clicks on safe balls. But if the user clicks on an exploding ball:

Boom

Figure 4. Boom!

How does your code know whether a ball is safe? By the class. Here’s some HTML:

<img class="safe" src="ball.jpg" alt="Toy">
<img class="safe" src="ball.jpg" alt="Toy">
<img class="boom" src="ball.jpg" alt="Toy">
<img class="safe" src="ball.jpg" alt="Toy"><br>

Figure 5. First row of balls

Three of balls have a class of safe. One has a class of boom. Click on a safe ball, and the number of balls gets updated. Click on a boom ball, and the Boom! message appears.

Here’s the photo:

Ball

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: Tic tac toe game

Create a two-player tic tac toe game. Two people take turns clicking on the grid.

This video explains.

One more thing. If a cell already has an X or O in it, clicking it does nothing.

Here are three images you can use:

X

O

Blank

Before you start, read this article.

Some code that might help:

  <script type="text/javascript">
    var turn = "x";
    var turn_count = 0;
    $(document).ready(function() {

The variables turn and turn_count are declared outside $(document).ready(). They’ll keep their values between clicks.

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

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

Exercise: New tic tac toe game

Improve the tic tac toe game.

  1. Add a New Game button, that resets the game back to the beginning.
  2. Keep track of the number of games played. Show that on the page.

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

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


How to...

Lessons

User login

Log in problems? Try here


Dogs