StudenSearch

.js

function studentSearch() {
    const searchBar = `
        <label for="search" class="student-search">
          <span>Search by name</span>
          <input id="search" placeholder="Search by name...">
          <button type="button"><img src="img/icn-search.svg" alt="Search icon"></button>
        </label>
      `;

    studentSearchBar.insertAdjacentHTML('beforeend', searchBar);

    const searchingStudents = document.querySelector('#search');
    
    studentSearchBar.addEventListener('keyup', (e) => {
        const query = searchingStudents.value.toLowerCase();

        let results = studentData.filter(function (student) {
            let fullName = `${student.name.first.toLowerCase()} ${student.name.last.toLowerCase()}`
            return fullName.includes(query);
        });

        showPage(results, 1);
        addPagination(results);

        // if statement for showing "no results'
        if (results.length === 0) {
            studentList.insertAdjacentHTML('beforeend', `<h1>No Results</h1>`);
        }
    });
}