alvin/pokedex
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/pokedex.git synced 2026-03-06 21:29:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve search functionality by encapsulating event listeners in an IIFE and enhancing visibility toggle for the search close icon

Browse Source
This commit is contained in:
vista-man
2025-03-27 09:08:41 +01:00
parent 7d9ce536fc
commit d5a242e7ea
3 changed files with 273 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
v2/search.js
View File

@@ -1,38 +1,40 @@
const inputElement = document.querySelector("#search-input");
const searchIcon = document.querySelector("#search-close-icon");
const sortWrapper = document.querySelector(".sort-wrapper");
(() => {
const inputElement = document.querySelector("#search-input");
const searchIcon = document.querySelector("#search-close-icon");
const sortWrapper = document.querySelector(".sort-wrapper");
inputElement.addEventListener("input", () => {
handleInputChange(inputElement);
});
searchIcon.addEventListener("click", handleSearchCloseOnClick);
sortWrapper.addEventListener("click", handleSortIconOnClick);
inputElement.addEventListener("input", () => {
handleInputChange(inputElement);
});
searchIcon.addEventListener("click", handleSearchCloseOnClick);
sortWrapper.addEventListener("click", handleSortIconOnClick);
function handleInputChange(inputElement) {
const inputValue = inputElement.value;
function handleInputChange(inputElement) {
const inputValue = inputElement.value;
if (inputValue !== "") {
document
.querySelector("#search-close-icon")
.classList.add("search-close-icon-visible");
} else {
if (inputValue !== "") {
document
.querySelector("#search-close-icon")
.classList.add("search-close-icon-visible");
} else {
document
.querySelector("#search-close-icon")
.classList.remove("search-close-icon-visible");
}
}
function handleSearchCloseOnClick() {
document.querySelector("#search-input").value = "";
document
.querySelector("#search-close-icon")
.classList.remove("search-close-icon-visible");
clearSearch();
}
}
function handleSearchCloseOnClick() {
document.querySelector("#search-input").value = "";
document
.querySelector("#search-close-icon")
.classList.remove("search-close-icon-visible");
clearSearch();
}
function handleSortIconOnClick() {
document
.querySelector(".filter-wrapper")
.classList.toggle("filter-wrapper-open");
document.querySelector("body").classList.toggle("filter-wrapper-overlay");
}
function handleSortIconOnClick() {
document
.querySelector(".filter-wrapper")
.classList.toggle("filter-wrapper-open");
document.querySelector("body").classList.toggle("filter-wrapper-overlay");
}
})();