Practice Midterm 3 Key

1. HTML/CSS Interpreting

The desired rendering is as follows:

Oh, WOW, what a well designed page!!

another cow

cow

I never saw a purple cow,
I never hope to see one.
But I can tell you anyhow
I'd rather see than be one.

3. JavaScript

The solution of the rendered gradient (from gradient.js) is as follows:

window.onload = function() {
    var gradient = document.getElementById("gradient");
    for (var i = 0; i < 20; i++) {
        var square = document.createElement("div");
        var color = 255 - 10 * i;
        var xy = 10 * i;
        var size = 400 - 2 * xy;
        square.style.backgroundColor = "rgb(" + color + ", " + color + ", " + color + ")";
        square.style.width = size + "px";
        square.style.height = size + "px";
        square.style.position = "absolute";
        square.style.left = xy + "px";
        square.style.top = xy + "px";
        gradient.appendChild(square);
    }
};