T14 Case Problem 2: Crescent Credit Union League

Need help with solution for the MindTap code assignment

Go to thecc_staff.jsfile in your editor. Richard has already created a constructor function for the class of employee objects storing each employee's id, name, department, position, e-mail, phone, and photo. He has also already created an object literal named searchResult that will be used to store the search results in an employees array. Event Listeners Go to the event listener for the click event. This event listener will run the code that displays the search results in a staff table. Within this event listener, add the code specified in the remainder of this lab. Richard has added the removeChildren() method to the prototype of the HTMLElement object which removes all children from a DOM element. Apply this method to the tableBody variable to remove all table rows that might still be present in the staff table from previous searches. Erase previous search results by setting the employees array of the search Result object to the empty array []. Next, you will write the code that returns the employee records that match search conditions set by the user. Apply the for Each() array method to loop through the contents of the directory array in the staff object. For each employee object in the directory array, run an anonymous function with the parameter, record, that represents each record in the array. Add the commands specified in theJavaScript Commandssection of the next step to the anonymous function within the for Each() array method. JavaScript Commands Create the name S earch variable equal to the value entered in the name Search input box.

Users can search for names in three ways:

1. Matching an employee's last name if it contains the text string specified in nameSearch
2. Matching an employee's last name if it begins with the nameSearch text string
3. Matching an employee's last name only if it exactly matches the nameSearch text string.

Richard has supplied you with code to add the selectedValue() method to the prototype of the HTMLSelectElement object class in order to return the value of the selected option in any selection list. Apply the selectedValue() method to the nameSearchType selection list to return the option selected by the user, storing the value in the nameSearchType variable.

Create a switch-case structure for the following possible values of the nameSearchType variable:

1. If name Search Type equals\"contains\", use the new Reg Exp() constructor to create a regular expression object named name Reg Exp containing the regular expression name Search where name Search is the value of the name Search variable. Include the\"i\"flag with the regular expression object so that the regular expression matches lower or uppercase characters.
2. If name Search Type equals\"beginsWith\", set name Reg Exp object to the regular expression^nameSearch, once again with the\"i\"flag.
3. If name Search Type equals\"exact\", set name Reg Exp object to the regular expression^nameSearch$with the\"i\"flag to allow for upper- and lower-case matches. Using name Reg Exp as the regular expression, apply the test() method to the record .Last name property (the last name stored in the employee record currently being examined in the forEach() loop). Store the results of the test() method in the found Name variable.

Repeat the previous instructions in this step (starting with the Create the name Search... instruction and ending with the Using name Reg Exp... instruction) to determine whether the employee's position property matches the value entered into the position Search input box on the web form. Store the value of the position Search input box in the position Search variable, the type of search in the position Search Type variable, the regular expression in the position Reg Exp variable, and the result of the regular expression test in the found n Position variable. The final search condition in the web form allows the user to specify the employee's department. Users can leave the department blank (to match any department) or they can specify the department from the deptSearch selection list. Apply the selectedValue() method that Richard created for select elements to the deptSearch selection list to retrieve the department value selected by the user, storing the value in the deptSearch variable. If deptSearch equals\"\"or the value of record.dept (the value of the dept property for the current employee record currently being examined in the forEach() loop), store the Boolean value true in the deptFound variable.

For an employee record to be displayed in the staff table, it must match the search condition set by the user. Insert an if statement that tests whether foundName, foundPosition, and foundDept are all true. If so, use the push() method to add a new employee object to the employees array in the searchResult object. (Hint: use record.id, record.firstName, record.lastName, and so on as the parameter values in the new employee() statement.)

After the forEach loop has finished and the employees array in the searchResult object contains all of the employee records matching the users search conditions, change the text content of the tableCaption object to\"numRecordsrecords found\"wherenumRecordsis the value of the length of the employees array in the searchResult object.

Apply the sortById() method to the searchResult object, which will sort the content of the employees array by the employee ID number.

1. Finally, add a table row to the body of the staff table: one row for each employee record. Apply the forEach() method to employees array in the searchResult object and for each record in the array, append the following document fragment to the tableBody object

2. first last

3. dept

4. position

5. email

6. phone

7.

wherephoto,first,last,dept,position,email, andphoneare the values of the photo, firstName, lastName, dept, position, email, and phone property of the current record in the employees array of the searchResult object.

Document your work on the application with descriptive comments.

\"use strict\";

/*

New Perspectives on HTML5, CSS3, and JavaScript 6th Edition

Tutorial 14

Case Problem 2

Filename: cc_staff.js

*/

/* Constructor function for the employee class */

function employee(id, firstName, lastName, dept, position, email, phone, photo) {

this.id = id;

this.firstName = firstName;

this.lastName = lastName;

this.dept = dept;

this.position = position;

this.email = email;

this.phone = phone;

this.photo = photo;

}

/* Object literal for search results */

var searchResult = {

employees : [],

sortById : function() {

this.employees.sort(function(a,b) {

if (a.id

else {return 1;}

});

}

};

/* Event listener to retrieve and display employee records matching the search condition */

document.getElementById(\"searchButton\").addEventListener(\"click\", function() {

var tableBody = document.querySelector(\"table#staffTable tbody\");

var tableCaption = document.querySelector(\"table#staffTable caption\");

tableBody.removeChildren(tableBody.childNodes[0]);

searchResult = [];

directory.forEach(element => console.log(element));

});

/* --- Methods added to native objects ---*/

/* Method added to any DOM element that removes all child nodes of element */

HTMLElement.prototype.removeChildren = function() {

while (this.firstChild) {

this.removeChild(this.firstChild);

}

};

/* Method added to the select element to return the value of the selected option */

HTMLSelectElement.prototype.selectedValue = function() {

var sIndex = this.selectedIndex;

return this.options[sIndex].value;

};