Draft: Search Feature

css/styles.css

@@ -195,7 +195,9 @@ header h2 {
 	margin-bottom: 15px;
 }
 
-
+.is-hidden {
+  display: none;
+}
 
 @media screen and (min-width: 700px) {
 

index.html

@@ -12,19 +12,8 @@
   <div class="page">
 
     <header class="header">
-      <h2>Students</h2>
 
-        <!-- Extra Credit: Dynamically insert search form here  
-
-          EXAMPLE - Search form:
-
-          <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>
-
-        -->
+        <!-- H2 and Search bar are dynamically inserted here -->
 
     </header>
 

js/script.js

@@ -1,12 +1,17 @@
-/*
-The `showPage` function
-This function will create and insert/append the elements needed to display a "page" of nine students
-*/
+//Global Variables
+
+const studentList = document.querySelector('.student-list');
+
+
+/* ============================================ */
+/*           showPage Function                  */
+/* ============================================ */
+//This function will create and insert/append the elements needed to display a "page" of nine students
 
 function showPage (list, page) {
   const firstStudent = (page * 9) - 9;
   const lastStudent = page * 9;
-  const studentList = document.querySelector('.student-list');
+
 
   studentList.innerHTML = '';
 
@@ -30,10 +35,11 @@ function showPage (list, page) {
 }; //function showPage
 
 
-/*
-The `addPagination` function
-This function will create and insert/append the elements needed for the pagination buttons
-*/
+/* ============================================ */
+/*          addPagination Function              */
+/* ============================================ */
+//This function will create and insert/append the elements needed for the pagination buttons
+
 
 function addPagination (list) {
   const pageCalc = Math.ceil(list.length / 9); //Output is 5 pages unless more data is added.
@@ -59,7 +65,6 @@ function addPagination (list) {
     if (e.tagName = 'button') {
       const pageButton  = document.querySelector('.active');
       pageButton.className = '';
-
       e.target.className = 'active';
 
       showPage(list, e.target.textContent);
@@ -70,3 +75,74 @@ function addPagination (list) {
 
 showPage(data, 1);
 addPagination(data);
+
+
+/* ============================================ */
+/*            nameSearch Function               */
+/* ============================================ */
+// This function will search for students based on the search input.
+
+//Dynamically inserts the Heading Elements <h2> and search bar
+const pageHeader = document.querySelector('.header');
+
+pageHeader.innerHTML = '';
+
+const studentNav = `
+  <h2>Students</h2>
+  <label for="search" class="student-search">
+  <span>Search by name</span>
+  <input type="search" oninput="nameSearch()" id="search" placeholder="Search by name...">
+  <button type="button"><img src="img/icn-search.svg" alt="Search icon"></button>
+  </label>
+  `;
+
+pageHeader.insertAdjacentHTML("beforeend", studentNav);
+
+
+
+function nameSearch(searchInput, names) {
+  // Filter so only student DATA that includes names that match the search value are output.
+  //create a new student list based on the earch matches. Use the new list as an argument for the showPage function.
+  //Add Pagination - use the new list as an argument for the addPagination function.
+  // Clicking on a pagination button will show the correct page/number of students.
+  const input = document.getElementById('search');
+  const submit = document.querySelector('button');
+
+  input.innerHTML = '';
+
+  console.log(searchInput);
+  console.log(names);
+  console.log(input);
+  console.log(submit);
+
+  for (let i = 1; i < names.length; i++) {
+    if (names[i].name.first.includes(searchInput) || names[i].name.last.includes(searchInput)) {
+      showPage(names, 1);
+    // } else {
+    //   const noMatch =
+    //   `<h3>No Results Found</h3>`;
+    //   studentList.insertAdjacentHTML("beforeend", noMatch);
+    // }
+  }
+}
+
+/* ============================================ */
+/*            Event Listeners                   */
+/* ============================================ */
+
+  // Submit button click event listener
+  submit.addEventListener('click', (event) => {
+    event.preventDefault();
+    nameSearch(search, data);
+    console.log('Submit button is functional!');
+  });
+
+  // Submit Keyup Event Listener
+  input.addEventListener('keyup', () => {
+    nameSearch(search, data);
+    console.log('Keyup event on the Search input is functional!');
+  });
+}
+
+nameSearch(search, data);
+