Skip to content

Commit 4b4e4ec

Browse files
Luckson-devLuckson-dev
committed
Filter Item
1 parent 41652fd commit 4b4e4ec

File tree

3 files changed

+103
-45
lines changed

3 files changed

+103
-45
lines changed

‎TodoList/index.html‎

Lines changed: 12 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -18,49 +18,20 @@ <h1 class="nav-bar__t">TodoList</h1>
1818

1919
<!-- Section -->
2020
<section>
21-
<div class="container">
22-
<div class="content">
2321

24-
<!-- item -->
25-
<!--
26-
<div class="content__item item" data-id="${item.id}">
27-
<div class="item__image">
28-
<img src="./asserts/images/blue.webp" alt="Item Image">
29-
</div>
30-
<div class="item__infos">
31-
<h1>${item.title}</h1>
32-
<p>${item.description}</p>
33-
<div class="item__infos__btns">
34-
<button class="btn">Details</button>
35-
<div class="item__infos__icons">
36-
<i class="bi bi-pen"></i>
37-
<i class="bi bi-trash"></i>
38-
<div class="alert-content"></div>
39-
</div>
40-
</div>
41-
</div>
42-
</div>
43-
<div class="content__item item" data-id="${item.id}">
44-
<div class="item__image">
45-
<img src="./asserts/images/blue.webp" alt="Item Image">
46-
</div>
47-
<div class="item__infos">
48-
<h1>${item.title}</h1>
49-
<p>${item.description}</p>
50-
<div class="item__infos__btns">
51-
<button class="btn">Details</button>
52-
<div class="item__infos__icons">
53-
<i class="bi bi-pen"></i>
54-
<i class="bi bi-trash"></i>
55-
<div class="alert-content"></div>
56-
</div>
57-
</div>
58-
</div>
59-
</div> -->
60-
61-
62-
<!-- End item -->
22+
<div class="search">
23+
<div class="search-item">
24+
<h1>All Items</h1>
25+
</div>
26+
<form action="">
27+
<input type="search" name="" id="search-input" placeholder="search items">
28+
<button class="btn">search</button>
29+
</form>
30+
</div>
6331

32+
<div class="container">
33+
<div class="content">
34+
<!-- item --><!-- End item -->
6435
</div>
6536
</div>
6637

‎TodoList/script.js‎

Lines changed: 52 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ modalBtn.addEventListener('click', (e)=>{
9494
document.querySelector('.modal__form').reset();
9595

9696
if(modalContainer.classList.contains("show-modal")){
97-
97+
9898
modalContainer.classList.remove('show-modal');
9999
document.body.classList.remove("hideScrollBar");
100100
modalContainer.classList.add('hide');
@@ -195,8 +195,57 @@ document.querySelector(".content").addEventListener("click", (e)=>{
195195
}
196196
})
197197

198-
// Script to take all data in localStorage after reload page
199198

199+
// Filers items
200+
201+
function filterItem(){
202+
const searchInput = document.getElementById("search-input");
203+
204+
searchInput.addEventListener("input", (e)=>{
205+
let value = e.target.value;
206+
207+
let storageData = JSON.parse(localStorage.getItem("content")) || [];
208+
209+
let filterItems = storageData.filter(item =>{
210+
return (
211+
item.title.toLowerCase().includes(value) ||
212+
item.description.toLowerCase().includes(value)
213+
)
214+
})
215+
216+
const content = document.querySelector(".content");
217+
content.innerHTML = "";
218+
219+
filterItems.forEach(item =>{
220+
content.innerHTML +=
221+
`
222+
<div class="content__item item" data-id="${item.id}">
223+
<div class="item__image">
224+
<img src="${item.imgFile}" alt="Card Image">
225+
</div>
226+
<div class="item__infos">
227+
<h1>${item.title}</h1>
228+
<p>${item.description}</p>
229+
<div class="item__infos__btns">
230+
<button class="btn">Details</button>
231+
<div class="item__infos__icons">
232+
<i class="bi bi-pen"></i>
233+
<i class="bi bi-trash"></i>
234+
<div class="alert-content"></div>
235+
</div>
236+
</div>
237+
</div>
238+
</div>
239+
240+
`
241+
})
242+
243+
})
244+
}
245+
246+
filterItem()
247+
248+
// Script to take all data in localStorage after reload page
200249
window.onload = ()=>{
201250
itemData = JSON.parse(localStorage.getItem("content"));
202251
if(!itemData){
@@ -229,4 +278,4 @@ window.onload = ()=>{
229278
230279
`
231280
})
232-
}
281+
}

‎TodoList/style.css‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,10 +83,48 @@ header{
8383

8484
/* SECTION */
8585

86+
.search{
87+
width: var(--bs-width);
88+
max-width: var(--bs-max-width);
89+
margin: 3em auto 0 auto;
90+
display: flex;
91+
justify-content: space-between;
92+
}
93+
.search-item h1{
94+
padding-bottom: 5px;
95+
color: var(--bs-black);
96+
border-bottom: 4px solid var(--bs-blue);
97+
}
98+
.search form{
99+
display: flex;
100+
width: 50%;
101+
border-radius: 20px;
102+
background: var(--bs-gray-300);
103+
border: 1px solid var(--bs-gray-100);
104+
}
105+
.search form input{
106+
padding: 12px 10px;
107+
width: 100%;
108+
border: none;
109+
border-radius: 20px 0 0 20px;
110+
}
111+
.search form input::placeholder{
112+
color: var(--bs-black-300);
113+
}
114+
.search form button{
115+
border-radius: 0 20px 20px 0;
116+
padding: 0 15px;
117+
border: none;
118+
font-size: 18px;
119+
background: var(--bs-blue);
120+
color: var(--bs-white);
121+
122+
}
123+
86124
.container{
87125
width: var(--bs-width);
88126
max-width: var(--bs-max-width);
89-
margin: 3.5em auto 0 auto;
127+
margin: 3.7em auto 0 auto;
90128
}
91129

92130
.content{

0 commit comments

Comments
 (0)