Use the volunteer.html file to add functionality to our form. This new functionality should allow the user to enter in volunteers to be added as well as delete volunteers from the list by re-entering in their name. The volunteer list should also be altered to use a looping structure to display a running count of volunteers beside each name (starting at 1) beside each name similar to the following display:

1. John Smith

2. Jane Willow

3. Randolph Jack

4. Jen Stevens

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

Write JavaScript that loops through the volunteer list to display the index value.

Once completed, view your pages in each of your two selected Web browsers to see if the content renders appropriately and consistently within each. Next, verify that your code is error-free using the appropriate browser-specific development tool found in the Resources. Take a screen capture of each of your validation results and save it for submission.

Submission Requirements

Upload your Web site files to your Web host.

Submit your work in the courseroom using a single Zip file containing the following:

Your entire Web site, including all associated files.

A Word document with:

The url to your Web site so faculty can view your site on a live host.

A screen capture of each of your two validations that you completed using the developer tools found in the Resources.

here is volunteer.js:

var $ = function (id) { return document.getElementById(id); };

var volunteerArray = [];

var displayVolunteers = function () {

// display the volunteers in the text area

$("volunteerList").value = volunteerArray.join(" ");

// comment out the line above change this to a loop instead to loop through the array.

};

var addVolunteer = function () {

// get the data from the form

var volunteerString = $("first_name").value + " " + $("last_name").value;

// store the data in an array

volunteerArray.push(volunteerString);

// display the volunteers and clear the add form

displayVolunteers();

// get the add form ready for next entry

$("first_name").value = "";

$("last_name").value = "";

$("first_name").focus();

};

var deleteVolunteer = function () {

// get the data from the form (hint: use the same format as from the add).

// remove the string from the array (hint, loop through the entire list, compare the string with the item in the array.

// display the volunteers and clear the add form

displayVolunteers();

// get the delete form ready for next entry

$("first_name").value = "";

$("last_name").value = "";

$("first_name").focus();

};

var clearList = function () {

// delete the data from the arrays

volunteerArray = [];

// alternative way to delete all of the data from the array

// volunteerArray.length = 0;

// remove the volunteers data from the web page

$("volunteerList").value = "";

$("first_name").focus();

};

var sortList = function () {

// sort the scores

volunteerArray.sort();

// display the scores

displayVolunteers();

};

//When the page is fully loaded, the buttons will be mapped to the JavaScript functions

window.onload = function () {

$("add_button").onclick = addVolunteer;

$("delete_button").onclick = deleteVolunteer;

$("clear_button").onclick = clearList;

$("sort_button").onclick = sortList;

$("first_name").focus();

};

here is the volunteers.html:

CapellaVolunteers.org

• Home

• Invitation

• Volunteers

• Gallery

• Registration

Volunteers

First Name:

Last Name:

Volunteer List

This events site is for IT3515 tasks.

here is the main

body { font: 15px arial, sans-serif; color: #808080; } input[type=text], select ,input[type=password],radio{ width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=submit] ,input[type=button]{ width: 100%; background-color: #800D1E; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover ;input[type=button]:hover { background-color: #802F1E; } section { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } article { border-radius: 5px; background-color: #CCCCCC; padding: 20px; color: #222222; } ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } ul.topnav li { float: left; } ul.topnav li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } ul.topnav li a:hover:not(.active) { background-color: #111; } ul.topnav li a.active { background-color: #CCCCCC; color: #333 } ul.topnav li.right { float: right; } @media screen and (max-width: 600px) { ul.topnav li.right, ul.topnav li { float: none; } } .top { position: relative; background-color: #ffffff; height: 68px; padding-top: 20px; line-height: 50px; overflow: hidden; z-index: 2; } .logo { font-family: arial; text-decoration: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 37px; letter-spacing: 3px; color: #555555; display: block; position: absolute; top: 17px; } .logo .dotcom { color: #800D1E } .topnav { position: relative; z-index: 2; font-size: 17px; background-color: #5f5f5f; color: #f1f1f1; width: 100%; padding: 0; letter-spacing: 1px; } .top .logo { position: relative; top: 0; width: 100%; text-align: left; margin: auto } footer { position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: #efefef; text-align: center; } div.gallery { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; }

div.gallery:hover { border: 1px solid #777; }

div.gallery img { width: 100%; height: auto; }

div.desc { padding: 15px; text-align: center; }

Can someone please help.