client side programming

A2/A2.docx

IT 3046 Assignment 2 Fall 2015

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 submission files.

All the files you need for this exercise are available on Blackboard->Course Schedule->A2.zip

Start early.

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.

1. (10 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 interface won’t do anything until you develop the JavaScript for it.

· In the JavaScript include a global variable 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.

· Add the JavaScript code for the click event handler (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.

· Add a JavaScript function that displays the elements 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 works correctly.

2. (15 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.

-Use JavaScript to write the onmouseenter event handler for the mouse 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.

-Use Javascript to write the onmouseout event handler for the mouse out event. This handler should change the src attribute of the img tag to the original image.

3. (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.

-Begin with the files a2.js and a2.html. Review the HTML code. Look through the JavaScript code and add the necessary rollover code from #2 to implement the rollover effect in this program.

-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.

(10 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 images.

Submission 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.

Page 1 of 2