Description
Overview
For this lab, you will create a JavaScript file for an HTML web page that you worked on in the previous lab.
If you missed that lab, download Lab03_Base_Files.zip and start there. You will extend the HTML, CSS,
and JavaScript to accommodate login and chat user interfaces (but not functionality).
Instructions
Chat Window
The chat box (on the bottom right, if you’ve completed the previous lab, see figure 1) is a clickable element.
When the up array in the chat box is clicked, display a simple chat window, as shown in figure 2. Make this
element invisible when the page loads, and put one
inside it with a message from Sam.
Figure 1: The chat box before it has been clicked
2
The chat popup contains two elements. First, it contains a list of messages. Below, it contains a single text
field without a label.
Figure 2: The chat box after being clicked, showing the chat popup
When the enter key is pressed while typing in the text field, you should use basic DHTML to append a new
DIV containing the message (format: You:) to the chat popup.
How to Submit
Submit the HTML, CSS, and JavaScript files in a ZIP file, with a name following the same pattern as
previous labs: Lab03_FirstNameLastName_StudentNumber.zip (e.g. Lab03_RandyFortier_100539147.zip)
to the TA.
Figure 1: The chat box before it has been clicked
2
The chat popup contains two elements. First, it contains a list of messages. Below, it contains a single text
field without a label.
Figure 2: The chat box after being clicked, showing the chat popup
When the enter key is pressed while typing in the text field, you should use basic DHTML to append a new
DIV containing the message (format: You:
How to Submit
Submit the HTML, CSS, and JavaScript files in a ZIP file, with a name following the same pattern as
previous labs: Lab03_FirstNameLastName_StudentNumber.zip (e.g. Lab03_RandyFortier_100539147.zip)
to the TA.
