Can someone help me with this assignment. I can send you the zipfiles. I cannot
ID: 3742649 • Letter: C
Question
Can someone help me with this assignment. I can send you the zipfiles. I cannot get the program to work. I am running out time:
Using Arrays and Loops
Overview
For this assignment, you will use the volunteer.html file to create a more effective process for managing the volunteer list by using arrays and loops. The web application will make use of the volunteer.js file and allow the user to add volunteers, delete volunteers, clear the list of volunteers as well as sort the volunteers. Some of the functionality has been created to start you off so that you can see how it is all integrated. You will be focusing on the code to delete the volunteer as well as alter the volunteer list to add some formatting on the output. Functionality is also included to be able to sort based on the volunteer’s last name.
Directions
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.
Explanation / Answer
program
html
--------------------------------
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Volunteers</title>
<script type="text/javascript" src="volunteer.js"></script>
</head>
<body>
<header>
<h1>Volunteers</h1>
</header>
<section id="pageForm">
<form action="#">
<div>
<label for="first_name">First Name:</label>
<input type="text" id="first_name">
<label for="last_name">Last Name:</label>
<input type="text" id="last_name">
<input type="button" id="add_button" value="Add Volunteer">
<input type="button" id="delete_button" value="Delete Volunteer">
</div>
<h2>Volunteer List</h2>
<textarea id="volunteerList" rows="10" cols="60"></textarea>
<div>
<input type="button" id="clear_button" value="Clear List">
</div>
</form>
</section>
</body>
</html>
js
--------------------------------
var $ = function (id) { return document.getElementById(id); };
var volunteerArray = [];
var displayVolunteersList = function () {
// display volunteers in Text area
var volunteerListString="";
for (var i = 0; i < volunteerArray.length; i++) {
volunteerListString = volunteerListString + volunteerArray[i]+ " ";
}
$("volunteerList").value= volunteerListString;
};
var addVolunteer = function () {
var volunteerString = $("first_name").value + " " + $("last_name").value;
volunteerArray.push(volunteerString);
// display the volunteers and clear the form
displayVolunteersList();
// clear fields
$("first_name").value = "";
$("last_name").value = "";
$("first_name").focus();
};
var deleteVolunteer = function () {
var volunteerString = $("first_name").value + " " + $("last_name").value;
// remove the string from the array
for (var i = 0; i < volunteerArray.length; i++) {
if(volunteerArray[i].trim() == volunteerString.trim()){
volunteerArray.splice(i,1);
}
}
// display the volunteers
displayVolunteersList();
// delete fields
$("first_name").value = "";
$("last_name").value = "";
$("first_name").focus();
};
var clearList = function () {
// delete list
volunteerArray = [];
$("volunteerList").value = "";
$("first_name").focus();
};
//JavaScript functions
window.onload = function () {
$("add_button").onclick = addVolunteer;
$("delete_button").onclick = deleteVolunteer;
$("clear_button").onclick = clearList;
$("first_name").focus();
};
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.