Lab 7: Colors, timers, and beyond

Programming the Web: An Introduction

shortcut to main problems


General instructions

Console exercises

Consider three HTML elements:

a text input field

this “paragraph” of text

Type something into the above input text field. Using the browser’s JavaScript console, try these examples, in order, one at a time:

> let textField = domGetElement('in');
> domGetContent(textField)
> domSetContent(textField, 'watch this!');

> let span = domGetElement('text-span');
> domGetContent(span)
> domSetContent(span, domGetContent(textField));

> let blob = domGetElement('blob');
> domGetStyle(blob, 'backgroundColor')
> domSetStyle(blob, 'backgroundColor', 'red');
> domSetStyle(blob, 'backgroundColor', '#55aaff');
> domSetStyle(blob, 'backgroundColor', 'rgb(200, 100, 50)');
> domSetStyle(blob, 'width', 200);   // this won't work but try it anyway
> domSetStyle(blob, 'width', '200px');
> let bogus = domGetElement('bad-idea');
> domGetStyle(bogus, 'backgroundColor')

> function stretch() { domSetStyle(blob, 'height', '500px'); }
> setTimeout(stretch, 3000);   // then wait 3 seconds!

Main exercises

For the rest of the lab, you need to download and unzip this archive. It consists of several files (including dom-helpers.js). You will work mostly in lab7.js, but will also want to look over (and possibly make a few changes to) lab7.html and lab7.css. You should test your work by loading (and reloading when necessary) lab7.html in your browser. (You may still find it helpful to tests parts of your work in the console.) You are encouraged to try my solution to see the tasks assigned below in action.

The page you are building is intended to be a hodgepodge of ideas: an array of numbers which you can step through, expand and modify; a square whose size, position and color depend on the values of those arrays; a slider that controls the color (grayscale) of the header text at the top of the page; a rectangle that moves (somewhat) randomly after a few seconds; and a countdown timer based on one of the values in the array.

Familiarize yourself with the functions that have been completed for you in lab7.js, in particular, write, redisplay and relocateBlock.

You may find it helpful to review the “timer box” example demonstrated in class (download the archive).

Remember to access DOM elements and their styles using the functions provided for you in dom-helpers.js. You should expect to use domGetElement, domGetContent, domSetContent, and domSetStyle.

  1. Complete the function randomMove() so that it sets the left style property of the moving-rectangle element to be a random number of pixels between 0 and 500. Test your function by calling it from the the console. Use domGetElement and domSetStyle.

  2. Augment the reset function so that it tells the browser to invoke randomMove three seconds after being called. Use setTimeout. You can test by either reloading the page or clicking the “reset” button and then waiting three seconds.

  3. Complete updateCells so that it copies (at most) three numbers in gNumbers, starting at position gFirstPos into the displayed cells. Most of the code has been written for you. The idea is that each step in the loop copies one element from gNumbers into one of the displayed cells. Use domSetContent to effect the change as hinted in the ... comment. You can test your function by reloading (or clicking the “reset” button) - the first few numbers of gNumbers (2, 3, and 5, by default) should now be displayed in the cells. You can further test the function by clicking the “next” button which calls the next function (implemented for you) which, in turns calls redisplay which calls updateCells. (redisplay also calls reclocateBlock which has also been implemented for you - it makes the square move down and to the left as you click “next”; the other two functions called by redisplay, resizeBlock and recolorBlock are for you to complete a few exercises from now.)

  4. Add a “previous” button between “reset” and “next” in lab7.html that invokes the previous function. Complete previous so that it works just like next, but in reverse: assuming the first displayed value is not the first value in gNumbers, the three values displayed in the cells are “shifted” one position “to the left” in the array. For example, initially, 2, 3, and 5 should be displayed. After clicking “next” once, the numbers that appear should become 3, 5, and 8; clicking “previous” would then make 2, 3, and 5 displayed again. Your code should be very similar to the code provided for next.

  5. Add a “grow” button between “next” and “modify” in lab7.html that invokes the augment function. Complete augment so that it adds a new element to the end of gNumbers (use .push) that is the sum of the last two elements in the array. Test your work by clicking the newly added grow button.

  6. Complete modify so that it checks the value in the input field to make sure it is as an integer and then uses that number to replace the last element in gNumbers. (The newly appended element might not be immediately displayed, depending on the current length of gNumbers and the current value of gFirstPos.) Experiment with my solution to determine what should be displayed in the message area and under what circumstances. Test your work by entering values in the input field to the right of the “modify” button and then clicking that button.

  7. Complete resizeBlock so that the length of each side of the square (i.e., its width and height attributes) is set to be the number of pixels that is the product of the length of gNumbers and the the constant BASE_SIZE. This should make it so that each time the grow button is clicked, the square gets noticeably bigger. Follow the model of relocateBlock which has been completed for you.

  8. Complete recolorBlock so that the color of the square (its backgroundColor property) is changed to have RGB values matching the three values currently displayed in the cells. So if the cells display 8, 13, and 21, the color should become 'rgb(8,13,21)'. Until the values displayed are larger, the color of the block will not change very perceptibly from black. Clicking on combinations of next, modify and grow the color should change, becoming lighter blue and finally becoming white as the three values become saturated.

  9. Write a function repeatRandomMoves that uses a “timer loop” to invoke randomMove once every second. Add an onclick attribute to the moving-rectangle element in lab7.html so that repeatRandomMoves is called when the block is clicked; this should have the effect of making the blue rectangle change its horizontal position, randomly, every second. (What happens if you click the rectangle again? Fun challenge: modify your code so that clicking it again has no further effect; or, better yet, stops the movement until it is clicked again.)

  10. Time permitting: Implement setHeadingColor so that every time the slider is slid, the color of the text in the heading (“Programming the Web”) is changed to a different shade of grade. Sliding all the way to left should reset the color to be black; sliding all the way to the right should make the text white. Grayscale is just RGB where the values for the three color components are equal.

  11. Time permitting: add a “countdown” button between “reset” and “previous” in lab7.html that invokes the countdown function. Complete countdown so that it decrements the leftmost value of the displayed array (the one corresponding to gFirstPos) every second until the value hits zero at which point it uses write to inform the user that the “countdown has been completed.”