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

Use them to create a page that looks like this:

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

Download these three images:

Write a page that starts looking like this:

When the user clicks on the cat or the horse:

When the user clicks on the dog:

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

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

Download these images to your computer:

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:

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

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:

Figure 1. Sample

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

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

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:

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:

Figure 2. One safe click

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

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:

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:

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

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

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:

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

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