- Based on the CSS file you created from last class (or if you wish, you may start fresh with the following files [dml_layout_template.html], [studentwork.jpg], create a layout using CSS so that the structure of the page looks generally like the following design: [in color] or [in b/w]. You may ignore the color.

Using alert() and prompt(), create a website that converses with the user. Simple starting point [here].

1. Create four buttons in HTML with each button labeled with a number like this. Using the onclick event, make all the buttons respond to a click by calling a single function you define like this. Study the code. Now modify the code so that it tells the user which button has been clicked. (Hint: each button when calling the function should use arguments to identify which button it is). If you click button #2, the alert message should say "button #2 was clicked". If button #4 is clicked, the alert message should say "button #4 was clicked".

2. Study eventhandler03.html and/or eventhandler04.html. You are going to learn something new on your own. innerHTML object represents the HTML content of the DOM object (HTML element) you are working with. So if you are working with a <p> tag, any HTML inside the <p> tag is represented by the innerHTML object. You can read or write to innerHTML thereby dynamically modifying the HTML on the fly. "this" in javascript represents the DOM object you are currently on. (This is a tricky concept!!). So if you write this.innerHTML, it represents the HTML content of the HTML tag/object javascript is working on.
Using eventhandler03.html and/or eventhandler04.html as a starting point, make a page full of text (many paragraphs) that changes as the user moves their mouse along.

It is important you understand the difference between document.write() and this.innerHTML

Part 1: Using lab05_onchange_start.html as a starting point, display the value of the text, color, and date inputs into the div area.
Part 2: Change the background color of the div using the color from the color picker and change the width of the div area using the value from the range slider. (Note that the width has to have a unit, not just a number)

Part 1: Use this file as a starting point. Collect user input using the prompt() function. Truncate the response to the first 20 characters and append "..." (hint: substr()). Display the result in the body of the page in quotes with today's date as follows: [On 10/23 you said "asd asads af asdf as..."].
Part 2: Position the text randomly within the page using Math.random() and absolute positioning. (Hint: you may have to create a HTML element like <div> that you can position).

Using lab08_courses_start.html as a starting point,
Part 1: Select all the paragraphs as an array and apply random colors similar to the course number/titles.
Part 2: Write a comment in the code, for each line, what each lines in functions create_toc(), createlist(), more_courses() are doing. For those methods you are not familiar with, look it up at w3schools. (You have to learn how to learn!). The on the top, summarize what the whole sequence of code is doing in English. Do not describe the behavior you observe from using the code. You are asked to read the code
Part 3 (Bonus if you have time): expand the more_courses() function so that the course description can be added

Study lab09_eventlocation.html. Using the vocabulary used in the textbook/slides, add a comment for each line explaining what the code is doing. The code works for the most part but there is a bug. Speculate on the cause of the problem and optionally see if you can propose a solution. If you read the w3school entry there is an easy fix.