CSc 302 Assignment 4



Nov 28
50 pts
Dec 9

Use Javascript to make the trees grow. You may start with this boring plain HTML forest, but the assignment is to allow the trees to grow when you click on them. It should look like the video shown on the right.

When your trees grow, make sure they grow up only. They should not get wider, or move down, or move over. Just get taller. The bottoms of the images must stay fixed, and the tops move.

Feel free to decorate the page further, or to use a different tree image if you have one of reasonable size which you like better.

How To Proceed

  1. Download and extract the contents of this archive. Place the two files, deadforest.html and Winter_Tree_1_by_Merlin2525.png into a folder on your computer.
  2. Open deadforest.html in your browser. You should see the trees, but they won't grow.
  3. Edit deadforest.html using a plain text editor to make changes.
  4. Add a Javascript section to the header. It should contain a function which takes an DOM element as a parameter. It should:
    1. Extract the current height from the element's style.
    2. Convert the height to an integer value with an expression like height = parseInt(height);
    3. Add 10 to the integer height.
    4. Create a new height for the element by assigning it this new value, with the units "px" appended.
  5. Onto each of the tree image tags, add an onClick which calls your function, and sends the parameter this.

When you're ready, post your page on Sandbox, then go here and enter the URL of the page.