- 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. See [11_content.html] for siimlar layout. Publish html file and send instructor URL.

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 (take home - email instructor):

• For each line of code, write a comment above the code, what each line of code in functions create_toc(), createlist(), more_courses() is doing in a low level programming language vocabulary. For those methods you are not familiar with, look it up at w3schools. (You have to learn how to learn!).
• Above each function, summarize what the function is doing in English
• On the top of the page, summrize 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 and describe what the code is doing.

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. See if you can propose a solution. If you read the w3school for mouse event object there is an easy fix. (This may not be a gramamtical error but misunderstanding of the properties within the event object)