For Tutorial 7, you will make a UNCA Course Search interface for the Computer Science Department that works like this:

Please download the starter files below and then complete the following tasks:

Tutorial 7 Starter Files

I. Implement the helper functions

1. Filter functions

Implement two filter functions (which should return either true or false):

• isClassFull: This function will take a course object as an argument and return true if the course is full, and false if it is not.
• doesTermMatch: This function will take a course object as an argument and return true if the course “matches” the search term, and false if it does not.
  • Use your discretion to determine a good matching algorithm. For instance, you could return true if the search string matches (or partially matches) one or more of the data fields (Code, CRN, Title, one of the instructor’s names, etc.).

// Part 1.1a
const isClassFull = course => {
    // modify this
    return true;
}

// Part 1.1b
const doesTermMatch = course => {
    // modify this
    return true;
}

Tips

Use some of the JavaScript built-in string methods. It also might be useful to convert everything to uppercase / lowercase. Some particularly useful methods to checkout:

• includes()
• toUpperCase()
• toLowerCase()

2. “Data to HTML” function

Implement the dataToHTML function, which takes a course object as an argument and returns an HTML string that represents the course.

• See the index.html file to examine the structure of the HTML “card” that represents a course.

// Part 1.2
const dataToHTML = (course) => {
    // modify this to be more detailed
    return `
        <section class="course">
            ${course.Code}
        </section>
    `;
};

Tips

• Use a template literal (backticks).
• Feel free to create some helper variables to format the string output.

II. Implement the showMatchingCourses function / event handler

Implement the showMatchingCourses function

To actually display relevant course “cards” to the screen, you will also need to implement a showMatchingCourses function. To do this, use the built-in filter and forEach higher-order array methods – and any relevant DOM methods – to build the interface. Specifically, you will:

1. Clear out the existing courses in the DOM.
2. Use the array’s built in “filter” method, which takes a filter function as an argument, to return an array of objects that match the search criteria.
   • You will make use of the isClassFull and doesTermMatch functions.
   • Consider chaining multiple invocations of the filter method to progressively winnow down the courses matching the search criteria.
     For instance: const matches = courseList.filter(isClassFull).filter(doesTermMatch)).
3. Use the array’s built in “forEach” method to:
   • Generate an HTML snippet of the course (by invoking the dataToHTML function), and
   • Insert the HTML snippet into the DOM (suggestion: use the insertAdjacentHTML method).

// Part 2
const showMatchingCourses = () => {
    console.log(`Search term: ${searchTerm}`);
    console.log(`Only show open classes: ${openOnly}`);
    console.log(`Course data: ${courseList}`);

    // output all of the matching courses to the screen:
};

III. What to Submit

When you’re done, please create a link from your homepage to your Tutorial 7 web page (see Sarah’s homepage for an example). Then, commit and push all of your edits to GitHub and, paste a link to your GitHub Repository and to your GitHub pages in the Moodle submission.

If you collaborated with someone, please list your partner’s name in the comments section.