Assessment 7 Using Arrays and Loops -3240 -pt 7

1. Directions – Complete the code for the displayVolunteers() function using a loop, so that it displays the names of the volunteers entered in a numbered list with the last name first, followed by a comma, a space, and the first name. Here is an example (remember: the numbers indicate list position and are not part of the name):
2. Jones, Pam
3. Smith, Ann
4. Davis, Dave

• Keep in mind that the numbers are not stored in the array as part of the name. They need to be added by the code in displayVolunteers().
• The addVolunteer() function is already completed, so you can test the dislpayVolunteers() code by entering names in the input fields and clicking the Add button.

1. Complete the code for the deleteVolunteer() function so that when the user enters a name in the input fields, clicking the Delete button will remove that volunteer from the array and the list.

• You can locate the name to be deleted from the array using a loop or using the indexOf() function.
• Use the splice() function to remove the item from the array.
• Note that the deleteVolunteer() function already includes a call to displayVolunteers() that will update the displayed list after a name has been deleted.
• The code already in deleteVolunteer() clears the input fields and set the focus to the first name input field.

1. Complete the clearVolunteers() function that it clears the array and then calls displayVolunteers() to update the list of volunteers (which should be empty).
2. Complete the sortVolunteers() function so that it sorts the names in the array alphabetically. Then, call displayvolunteers() to update the list.
3. The final section of the existing code associates the JavaScript functions with the corresponding buttons on the form. You don’t need to modify this code, but it’s good to note what it does.
4. Carefully test the page to make sure that the buttons work properly. Take at least six screenshots to document the successful testing of the page. Put the screenshots in a Word document and add brief text with each image to indicate what part of the testing it shows. Please do not attach the individual image files to the submission.

Hint: Use the splice function in order to remove a specific item from the array.

Tip: The array index starts at 0, so when displaying the index, you will need to add 1 to the index value when it is displayed.

Make sure to do the following:

• Write JavaScript to delete a specific volunteer by using a loop.
• Write JavaScript that loops through the volunteer list to display the index value.
• Once completed, view your pages in your selected web browsers to see if the content renders appropriately and consistently within each. Next, ensure that your HTML code is HTML5 compliant and your CSS code is valid. You may choose to make use of AI to validate your code and help you troubleshoot and test your code if you do run into errors and issues. You may use the Markup Validation Service for testing the former and CSS Validation Service for testing the latter, both from W3C. Both of these services are free and you can find their links on the reading list. Important: Take a screen capture of each of your validation results and save it for submission.

Assessment examples: You may use the assessment examples in the file to give you an idea of what a Proficient or higher rating on the scoring guide would look like.

Zip up the folder with the completed work for this assessment (please keep the files in their original locations; don’t change any file names) and submit the zip file along with the Word document containing the screenshots.