; -*-eval: (visual-line-mode); eval: (auto-fill-mode 0); -*-

1. Function, timer, events, DOM style+content, PHP/JS mix
a. Write event.html which shows a simple alert "Hi there!"
b. Make the alert appear not at the page load, but 3 seconds after page load.
c. Add a button, initially containing text "0 clicks".  Each click increments the number shown on the button, e.g. "5 clicks".
d. Add a paragraph and two buttons, Show and Hide.  Initially, Show is disabled.  Clicking on Hide hides the paragraph (using property visibility), disables itself and enables the Show button (using disabled property).  Show button acts similarly.
e. Add a video.  When the user stops the video, the paragraph is hidden, when the user plays again the video, the paragraph becomes visible.
f. Write js.php which shows a n consecutive stars (with n a parameter in the URL, read using PHP) which change colour: when the mouse is over a star all the stars become red, elsewhere they change back to black.

2. Form validation (and security)
a. Create validate.html with form containing a button and an edit field (age) which prevents submission when it is empty or is not in the interval 0-122.  Use min and max HTML attributes for that.
b. Instead of HTML, use JavaScript to prevent submitting when the above requirements are not met and, additionally, when the number is not odd.
(c. ONLY IF ENOUGH TIME: Write the processing page in PHP, which simply shows the given age.  Show how a user can bypass the HTML and JavaScript validation and send to PHP an invalid age.  Explain orally how you need to fix the PHP file to throw an error if the age is not in the expected interval.)

3. Canvas (can be skipped)
a. Create canvas.html with an edit box, initially with value 50 and which allows only a number between 0 and 100 (percentage), and an "Update" button (without form).
b. Create a canvas which shows a rectangle (width 400px, height 50px) divided in two parts: the left one in red, the right one in blue.  Initially, both parts are equal: 50-50.
c. When the user clicks the button, the canvas is updated: the percentage of the left part is taken from the edit box, and the right part takes the remaining space.

4. Write tic-tac-toe in JavaScript
a. Create page with the 3x3 grid
b. Use onclick on each square to print a simple alert
c. Use onclick with alert only on squares with dot
d. onclick changes the square to x or o
e. Check for the winner
f. Check for draw game

5. AJAX
a. Write a file sec.txt on server, initially containing the string "0-0".  Write a Web page ajax.php with a paragraph, initially with text "0-0".
b. Each 2 seconds, ajax.php gets the content of sec.txt from server, and updates its paragraph with the value received.  Check that the page is really updated when you manually change sec.txt on server, such as "15-0".
c. Instead of only the score, the PHP page shows also the players: "Halep 0-0 Naomi".  The player with a greater score is printed in blue, the other in black.