Must you use contents in zip file to complete assignement
Assignment 1 IT 3046Assignment 2Fall 2020 Total: 40 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 Canvas->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 changes, your code will still work. 1. (10) In this exercise, you’ll develop an application that calculates the sales tax and invoice total after the user enters the subtotal and tax rate. a) Open the HTML and JavaScript files provided in the folder sales_tax b) 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. c) In the JavaScript file, write the code for calculating and displaying the sales tax and invoice total when the user clicks on the Calculate button. d) Add the JavaScript event handler for the click event of the Clear button. This should clear all text boxes. e) If you haven’t already done so, add data validation to this application. The subtotal entry should be a valid, positive number that’s less than 20,000. The tax rate should be a valid, positive number that’s less than 10. The error messages should be displayed with span tags, and the error messages should be: Must be a positive number less than 20,000 Must be a positive number less than 10 f) Add JavaScript code that focuses the cursor to the Subtotal field when the application starts and when the user clicks on the Calculate button. 2. (10) In this exercise, you start with the declarations for two arrays, a names array and a scores array. Then you will add one button that will display the scores and another button that will calculate and display the average score. a) Open the HTML and JavaScript files provided in the folder test_scores b) If you run the application, you can enter a name and score and then click the Add to Array button to add names and scores to the arrays, but you can’t use the other buttons. c) You can see in the JavaScript code that it starts with the declarations for two arrays with four elements each. The first is an array of names. The second is an array of scores. The JavaScript code also includes the $ function, an onload event handler, and the addScore() function for adding a name and score to the arrays. d) Add an event handler for the Display Scores button that displays the names and scores in the arrays, as shown above. Remember to attach this handler to the button in the onload event handler. After you test this with the starting array values that are shown above, add a name and score to the arrays and test the display again. WK2 worksheet will be very helpful here. e) Add an event handler for the Calculate Average Score button that calculates and displays the average of the scores in the array. Keep any text that are already on display. Test this after you have added a name and score to the arrays. WK2 worksheet will be very helpful here. f) Modify the event handler for the Add to Array button so the data in the text area is cleared after a name and score are added to the arrays. 3. (10 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. Use ImageSwap application code as a guide. Don’t hard code image names, your JS code should work even if the image names are different. Don’t use outdated JavaScript code from the web- even if they might all work. a) Begin with the files rollover.js and rollover.html in the image_rollover folder. 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 the img tag. b) Use JavaScript to write the rollin() function that the onmouseover event handler will call when the mouse moves over the img tags (similar to the swap function that the onclick event handler calls when the mouse clicks on the a tags in the ImageSwap application). This function should swap the values of the src and id attributes of the selected image. For example, if the mouse hovers over the second image, the src value should change to ‘images/h5.jpg’ and the id value should change to ‘images/h2’. Use the Chrome debugger’s Element tab to see how the attributes are changing when the mouse moves in. c) Use Javascript to write the rollout() function that the onmouseout event handler will call when the mouse moves out of the img tags. Again, this function should swap the values of the src and id attributes. For example, if the mouse now moves out of the second image, the src value should change to ‘images/h2’ and the id value should change to ‘images/h5.jpg’. Use the Chrome debugger’s Element tab to see how the attributes are changing when the mouse moves out. d) Could you use a single function for both mouse over and out? If so, do that. 4. (10 points) Begin with the files a3.js and a3.html in the imageSwap_rollover folder. Review the HTML code. Look through the JavaScript code and add the necessary rollover code from #3 in appropriate places to implement the rollover effect in this program. When the mouse hovers over the enlarged image in the center (not the thumbnail size image), the image should change to the second image (image names with 2 in them) of each colored scarf. After correctly adding the rollover code, run the program. You will notice that when the mouse hovers over the enlarged image in the center, all the images change to the rollover image of the first scarf (that is, the Rose Mauve scarf). Use the Chrome debugger’s Element tab to see how the attributes (src and id) of the enlarged image tag are changing. That might give you a hint as to what you have to do. Submission Upload the three folders as a single .zip file to Canvas 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 3 of 2