From 885cb42d0cb6312310e54f7d5c6048b1fb3a6d0c Mon Sep 17 00:00:00 2001 From: Luna Bee Date: Sat, 29 Jan 2022 20:56:27 -0600 Subject: [PATCH 1/7] feat(search): Inserts heading and search bar front-end --- js/script.js | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/js/script.js b/js/script.js index 2aa0a08..1ce4cf0 100644 --- a/js/script.js +++ b/js/script.js @@ -70,3 +70,42 @@ function addPagination (list) { showPage(data, 1); addPagination(data); + +/* +The `search` function +This function will search for students based on the search input. +*/ + +//Dynamically inserts the Heading Elements

and search bar + +const pageHeader = document.querySelector('.header'); + +pageHeader.innerHTML = ''; + +const studentNav = ` +

Students

+ + `; + +pageHeader.insertAdjacentHTML("beforeend", studentNav); + + + +function nameSearch(searchInput, names) { + const search = document.querySelector('.student-search'); + const submit = docuemnt.querySelector('button'); + + +} + +nameSearch(search, data); + + +// When search is performed, only studets whose name includes the search input will be displayed. +//Case insensitive - and work for partial matches. +// Add keyup event listener to the search input +//create a new student list based on the search matches use the new list as an argument when calling the already existing func to display 9 students From b27abcd07517d2390988c808ce1d2400fd8694b3 Mon Sep 17 00:00:00 2001 From: Luna Bee Date: Sat, 29 Jan 2022 21:17:41 -0600 Subject: [PATCH 2/7] feat(search): Add initial keyup and click event listeners --- index.html | 13 +------------ js/script.js | 23 ++++++++++++++++++++++- 2 files changed, 23 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 66180f3..1869ea2 100644 --- a/index.html +++ b/index.html @@ -12,19 +12,8 @@
-

Students

- +
diff --git a/js/script.js b/js/script.js index 1ce4cf0..2396b75 100644 --- a/js/script.js +++ b/js/script.js @@ -97,9 +97,30 @@ pageHeader.insertAdjacentHTML("beforeend", studentNav); function nameSearch(searchInput, names) { const search = document.querySelector('.student-search'); - const submit = docuemnt.querySelector('button'); + const submit = document.querySelector('button'); + + console.log(search); + console.log(submit); + + for (let i = 0; i < names.length; i++) { + + if (searchInput.value.length !== 0 && names[i].textContent.toLowerCase().includes(searchInput.value.toLowerCase())) { + } + } + + submit.addEventListener('click', (event) => { + event.preventDefault(); + nameSearch(search, data); + console.log('Submit button is functional!'); + }); + + // Submit Keyup Event Listener + search.addEventListener('keyup', () => { + nameSearch(search, data); + console.log('Keyup event on the Search input is functional!'); + }); } nameSearch(search, data); From 0dc2731ee572c89b1747cc2e74c80498db085887 Mon Sep 17 00:00:00 2001 From: Luna Bee Date: Wed, 2 Feb 2022 18:55:50 -0600 Subject: [PATCH 3/7] refactor(search): change target for event listener --- js/script.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/js/script.js b/js/script.js index 2396b75..f8411f2 100644 --- a/js/script.js +++ b/js/script.js @@ -97,27 +97,31 @@ pageHeader.insertAdjacentHTML("beforeend", studentNav); function nameSearch(searchInput, names) { const search = document.querySelector('.student-search'); + const input = document.getElementById('search'); const submit = document.querySelector('button'); - + input.innerHTML = ''; + console.log(search); + console.log(input); console.log(submit); for (let i = 0; i < names.length; i++) { - + input.addEventListener('input', (e) => { + input = e.target.value.toLowerCase() + }) if (searchInput.value.length !== 0 && names[i].textContent.toLowerCase().includes(searchInput.value.toLowerCase())) { - } } submit.addEventListener('click', (event) => { - event.preventDefault(); + //event.preventDefault(); nameSearch(search, data); console.log('Submit button is functional!'); }); // Submit Keyup Event Listener - search.addEventListener('keyup', () => { + input.addEventListener('keyup', () => { nameSearch(search, data); console.log('Keyup event on the Search input is functional!'); }); From f23831e5bee9b5c3790d6f2007d66a45d5517e41 Mon Sep 17 00:00:00 2001 From: Luna Bee Date: Wed, 2 Feb 2022 21:20:53 -0600 Subject: [PATCH 4/7] refactor(search): add oninput function to search input --- js/script.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/js/script.js b/js/script.js index f8411f2..99dd17b 100644 --- a/js/script.js +++ b/js/script.js @@ -86,7 +86,7 @@ const studentNav = `

Students

`; @@ -107,15 +107,13 @@ function nameSearch(searchInput, names) { console.log(submit); for (let i = 0; i < names.length; i++) { - input.addEventListener('input', (e) => { - input = e.target.value.toLowerCase() - }) - if (searchInput.value.length !== 0 && names[i].textContent.toLowerCase().includes(searchInput.value.toLowerCase())) { - } + if (names[i].name.first.includes(searchInput) || names[i].name.last.includes(searchInput)) { + + } } submit.addEventListener('click', (event) => { - //event.preventDefault(); + event.preventDefault(); nameSearch(search, data); console.log('Submit button is functional!'); }); From 774b66f2efc283a71b6962071fa5888dde5af256 Mon Sep 17 00:00:00 2001 From: Luna Bee Date: Wed, 2 Feb 2022 22:05:30 -0600 Subject: [PATCH 5/7] refactor(search): test adding class when looping over search input --- css/styles.css | 4 +++- js/script.js | 12 ++++++++---- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/css/styles.css b/css/styles.css index a3659c2..c465809 100644 --- a/css/styles.css +++ b/css/styles.css @@ -195,7 +195,9 @@ header h2 { margin-bottom: 15px; } - +.is-hidden { + display: none; +} @media screen and (min-width: 700px) { diff --git a/js/script.js b/js/script.js index 99dd17b..3679038 100644 --- a/js/script.js +++ b/js/script.js @@ -97,18 +97,22 @@ pageHeader.insertAdjacentHTML("beforeend", studentNav); function nameSearch(searchInput, names) { const search = document.querySelector('.student-search'); - const input = document.getElementById('search'); + const input = document.getElementById('search').value; const submit = document.querySelector('button'); + const students = document.querySelectorAll('.student-item'); + input.innerHTML = ''; console.log(search); console.log(input); console.log(submit); - for (let i = 0; i < names.length; i++) { - if (names[i].name.first.includes(searchInput) || names[i].name.last.includes(searchInput)) { - + for (let i = 1; i < students.length; i++) { + if (students[i].innerText.toLowerCase().includes(input.toLowerCase())) { + students[i].classList.remove("is-hidden"); + } else { + students[i].classList.add("is-hidden"); } } From 13cc3462e84cb90833e0a91b2dc7f5640a3719df Mon Sep 17 00:00:00 2001 From: Luna Bee Date: Sun, 6 Feb 2022 13:16:08 -0600 Subject: [PATCH 6/7] refactor(search): change search parameters --- js/script.js | 31 ++++++++++++++++--------------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/js/script.js b/js/script.js index 3679038..e667dbc 100644 --- a/js/script.js +++ b/js/script.js @@ -96,26 +96,31 @@ pageHeader.insertAdjacentHTML("beforeend", studentNav); function nameSearch(searchInput, names) { - const search = document.querySelector('.student-search'); - const input = document.getElementById('search').value; + //const search = document.querySelector('.student-search'); + const input = document.getElementById('search'); const submit = document.querySelector('button'); - const students = document.querySelectorAll('.student-item'); + // const students = document.querySelectorAll('.student-item'); input.innerHTML = ''; - console.log(search); + //console.log(search); + console.log(searchInput); + console.log(names); console.log(input); console.log(submit); - for (let i = 1; i < students.length; i++) { - if (students[i].innerText.toLowerCase().includes(input.toLowerCase())) { - students[i].classList.remove("is-hidden"); - } else { - students[i].classList.add("is-hidden"); + for (let i = 1; i < names.length; i++) { + if (names[i].name.first.includes(searchInput) || names[i].name.last.includes(searchInput)) { + //create a new student list if the search matches + + + + console.log(showPage); } } + // Submit button click event listener submit.addEventListener('click', (event) => { event.preventDefault(); nameSearch(search, data); @@ -128,11 +133,7 @@ function nameSearch(searchInput, names) { console.log('Keyup event on the Search input is functional!'); }); } - -nameSearch(search, data); +nameSearch(search, data); -// When search is performed, only studets whose name includes the search input will be displayed. -//Case insensitive - and work for partial matches. -// Add keyup event listener to the search input -//create a new student list based on the search matches use the new list as an argument when calling the already existing func to display 9 students +//create a new student list if the search matches \ No newline at end of file From c6b3897d272c47ee90aab662496d5c7171a37826 Mon Sep 17 00:00:00 2001 From: Luna Bee Date: Mon, 7 Feb 2022 20:05:01 -0600 Subject: [PATCH 7/7] refactor: update comments to describe functionality --- js/script.js | 61 ++++++++++++++++++++++++++++++---------------------- 1 file changed, 35 insertions(+), 26 deletions(-) diff --git a/js/script.js b/js/script.js index e667dbc..cc0f4bf 100644 --- a/js/script.js +++ b/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); @@ -71,13 +76,13 @@ function addPagination (list) { showPage(data, 1); addPagination(data); -/* -The `search` function -This function will search for students based on the search input. -*/ -//Dynamically inserts the Heading Elements

and search bar +/* ============================================ */ +/* nameSearch Function */ +/* ============================================ */ +// This function will search for students based on the search input. +//Dynamically inserts the Heading Elements

and search bar const pageHeader = document.querySelector('.header'); pageHeader.innerHTML = ''; @@ -96,15 +101,15 @@ pageHeader.insertAdjacentHTML("beforeend", studentNav); function nameSearch(searchInput, names) { - //const search = document.querySelector('.student-search'); + // 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'); - // const students = document.querySelectorAll('.student-item'); - input.innerHTML = ''; - //console.log(search); console.log(searchInput); console.log(names); console.log(input); @@ -112,13 +117,18 @@ function nameSearch(searchInput, names) { for (let i = 1; i < names.length; i++) { if (names[i].name.first.includes(searchInput) || names[i].name.last.includes(searchInput)) { - //create a new student list if the search matches - - - - console.log(showPage); - } + showPage(names, 1); + // } else { + // const noMatch = + // `

No Results Found

`; + // studentList.insertAdjacentHTML("beforeend", noMatch); + // } } +} + +/* ============================================ */ +/* Event Listeners */ +/* ============================================ */ // Submit button click event listener submit.addEventListener('click', (event) => { @@ -136,4 +146,3 @@ function nameSearch(searchInput, names) { nameSearch(search, data); -//create a new student list if the search matches \ No newline at end of file