Total: 40 points Extra Credit: 10 points
All assignments should be individual work.
Discussion with class mates is allowed but the final code has to be written
individually. If you take code from any Web site, provide the links in your
All the files you need for this exercise are
available on Blackboard->Course Schedule->A2.zip
DO NOT USE jQuery or CSS to
implement the programs. You can use CSS only for styling purposes. Solutions
should be general enough so that if the size or content of arrays/images
changes, your code will still work.
points) In this exercise, you’ll develop an application that uses an array to
manage a “To Do” list. To keep this simple, assume that you do the tasks on a
FIFO basis. That is, the first task added to the list is the first one that you
do, so the next task is always the first one in the list.
Begin with the files todo_list.js and todo_list.html.
Then, run the application to see the user interface shown above, although that
declaration for an empty array named taskList.
Then, write the code for adding a task to this array when the user enters a
task in the first text box and clicks the Add Task button. This code should
also blank out the text box. At this point, don’t worry about displaying the
tasks in the text area for the task list. Instead, use alert statements to print
the array to make sure this works when you add one or more items.
(function) of the Show Next Task button. This handler should display the first
task in the array in the Next task text box and remove its item from the array.
To remove the first item in an array, you can use the shift method.
In the event handler (function) for the Show Next Task
button, test to make sure the array has items in it. If it doesn’t, use the
alert method to display “No tasks remaining” and clear the task from the Next
task text box.
in the array in the Task list text area. Then, call this function from both of
the click event handlers (functions) so the updated task list is displayed each
time a task is added to the list or removed from it.
Give this application a final test to make sure it
points) In this exercise, you will develop an Image Rollover application. When
the user moves the mouse over one of the three images, the current image is
replaced by a new one.
-Begin with the files rollover.js
and rollover.html. Review the HTML code, and note that the id attribute of
each img tag points to the image that
should replace the current image when the mouse hovers over it.
enter event of the img tags (similar
to the onclick event handler of the img tags in the ImageSwap/SlideShow
applications). This handler should change the src attribute of the img
tag so it points to the URL for the rollover image.
out event. This handler should change the src
attribute of the img tag to the
(15 points) In this exercise, you will add some of the
code you wrote for #2, analyze the program and apply your HTML/CSS knowledge
from previous courses.
add the necessary rollover code from #2 to implement the rollover effect in
-Then answer the three questions
in the a2.js file. You can write your
answers on the file as comments.
-Improve the appearance of the
Web site by using CSS/HTML.
points) Extra Credit:
The pictures for #3 have been
taken from this page http://www.landsend.com/shop/-/N-jri?cm_re=nav-_-outerwear-_-catagories-_-Hats-Gloves-Scarves.
Find the specific page for each scarf. Your Web site should show a link to the
selected scarf. For example, when the user selects the Plum Scarf, the link to
the Plum Scarf page should be displayed. You can implement this in multiple
ways such as using a text link, using an image link or directly clicking on the
Upload the three folders as a single .zip file to Blackboard under Submit Assignments
->Assignment 2. Name your file as YourUsername_A2.zip
e.g. If I were to upload it, it would be mutsuday_A2.zip
Test your code
on a wide range of inputs. Some exercises show some sample inputs and the
expected results. Use these examples as a starting point. Your file must successfully execute in order to be
considered for a grade- absolutely no syntax errors. Comment out any code that
does not work for partial credit.