Task: The purpose of this assignment is to further illustrate the use of JavaScript programming along with the JQuery library. For this assignment, you will be extending the functionality of the rainbow squares page that you created in homework 3 to include animation effects.
Problem Statement: You will have to write JavaScript code using the JQuery library to create animation effects to your webpage.
Functionality:
Clicking on the black square will slide the squares to the left or the right. More specifically, when all squares are visible by clicking on the black square the view slides one square to the left. Clicking it again will continue this behavior until only the black square remains. At that point, clicking on the black square again slides the view one square to the right and continues until all squares are visible again.
In addition, you will need to add event handlers to the Red and Violet squares so that when they are visible and either is clicked, the order of the squares is reversed (i.e., they will slide into their new positions where red is on the bottom and violet is now on top and visa versa. Note: the z-levels will have to be adjusted dynamically so that the overlay view is retained).
Grading Criteria:
1. Your submitted HTML and CSS files pass their respective HTML and CSS validator checks - 10 points.
2. Functionality of the sliding effect works correctly – 25 points.
3. Functionality of red and violet squares event handlers works correctly – 20 points.
4. You’ve correctly included the JQuery library in your html file – 5 points.
5. Your Javascript code is in a separate file – 5 points.
6. Correct submission format – 5 points.
Submission Instructions:
Your submission should be packaged in a tarball or zip file. When opened, it must create a directory titled ‘<UMN internet ID’ containing all of your files. UMN internet id should be your x.500 id. You will lose AT LEAST 5 points if you do not do this correctly. Include all the files we require to run your Web Pages in your the following files in your submission including pictures and external JavaScript files. Your submission should include at least:
• The HTML file containing your code. • A CSS stylesheet containing your code • A JavaScript file containing your code • A README file: the file should include your student ID, name, and x500 ID, and anything else you want
