Skip to content

Commit 04b1ac8

Browse files
jasperayawanjasperayawan
committed
update search area
1 parent 30cde98 commit 04b1ac8

File tree

3 files changed

+46
-15
lines changed

3 files changed

+46
-15
lines changed

‎courses.html

+21-10
Original file line numberDiff line numberDiff line change
@@ -108,10 +108,21 @@
108108
<div class="banner my-5">
109109
<h1 class="text-center text-dark">Welcome to our courses</h1>
110110
</div>
111-
111+
<div class="row d-flex justify-content-end py-3">
112+
<div class="col-md-4">
113+
<div class=" input-group">
114+
<input type="text" class="form-control" id="isSearch" onkeyup="search()" placeholder="search courses...">
115+
<button class="btn">
116+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
117+
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
118+
</svg>
119+
</button>
120+
</div>
121+
</div>
122+
</div>
112123
<div class="row">
113124
<!-- courses -->
114-
<div class="col-6 col-md-4 col-lg-3" data-bs-toggle="modal" data-bs-target="#myFirstModal">
125+
<div class="course col-6 col-md-4 col-lg-3" data-bs-toggle="modal" data-bs-target="#myFirstModal">
115126
<div class=" position-relative mb-3 caard">
116127
<div class="text-dark">
117128
<div class="courses-item-innner">
@@ -137,7 +148,7 @@ <h3 class="title">Python for beginners</h3>
137148
</div>
138149

139150

140-
<div class="col-6 col-md-4 col-lg-3" data-bs-toggle="modal" data-bs-target="#mySecondModal">
151+
<div class="course col-6 col-md-4 col-lg-3" data-bs-toggle="modal" data-bs-target="#mySecondModal">
141152
<div class=" position-relative mb-3 caard">
142153
<div class="text-dark">
143154
<div class="courses-item-innner">
@@ -162,7 +173,7 @@ <h3 class="title">Javascript algorithm</h3>
162173
</div>
163174
</div>
164175

165-
<div class="col-6 col-md-4 col-lg-3" data-bs-toggle="modal" data-bs-target="#myThirdModal">
176+
<div class="course col-6 col-md-4 col-lg-3" data-bs-toggle="modal" data-bs-target="#myThirdModal">
166177
<div class=" position-relative mb-3 caard">
167178
<div class="text-dark">
168179
<div class="courses-item-innner">
@@ -188,7 +199,7 @@ <h3 class="title">Learn MERN stack</h3>
188199
</div>
189200

190201

191-
<div class="col-6 col-md-4 col-lg-3" data-bs-toggle="modal" data-bs-target="#myFourthModal">
202+
<div class="course col-6 col-md-4 col-lg-3" data-bs-toggle="modal" data-bs-target="#myFourthModal">
192203
<div class=" position-relative mb-3 caard">
193204
<div class="text-dark">
194205
<div class="courses-item-innner">
@@ -214,7 +225,7 @@ <h3 class="title">Unreal game development</h3>
214225
</div>
215226

216227

217-
<div class="col-6 col-md-4 col-lg-3" data-bs-toggle="modal" data-bs-target="#myFifthModal">
228+
<div class="course col-6 col-md-4 col-lg-3" data-bs-toggle="modal" data-bs-target="#myFifthModal">
218229
<div class=" position-relative mb-3 caard">
219230
<div class="text-dark">
220231
<div class="courses-item-innner">
@@ -239,7 +250,7 @@ <h3 class="title">C++ game developement</h3>
239250
</div>
240251

241252

242-
<div class="col-6 col-md-4 col-lg-3" data-bs-toggle="modal" data-bs-target="#mySixModal">
253+
<div class="course col-6 col-md-4 col-lg-3" data-bs-toggle="modal" data-bs-target="#mySixModal">
243254
<div class=" position-relative mb-3 caard">
244255
<div class="text-dark">
245256
<div class="courses-item-innner">
@@ -265,7 +276,7 @@ <h3 class="title">JS algorithm & data structures</h3>
265276
</div>
266277

267278

268-
<div class="col-6 col-md-4 col-lg-3" data-bs-toggle="modal" data-bs-target="#mySevenModal">
279+
<div class="course col-6 col-md-4 col-lg-3" data-bs-toggle="modal" data-bs-target="#mySevenModal">
269280
<div class=" position-relative mb-3 caard">
270281
<div class="text-dark">
271282
<div class="courses-item-innner">
@@ -291,7 +302,7 @@ <h3 class="title">HTML Semantic Structure</h3>
291302
</div>
292303

293304

294-
<div class="col-6 col-md-4 col-lg-3" data-bs-toggle="modal" data-bs-target="#myEightModal">
305+
<div class="course col-6 col-md-4 col-lg-3" data-bs-toggle="modal" data-bs-target="#myEightModal">
295306
<div class=" position-relative mb-3 caard">
296307
<div class="text-dark">
297308
<div class="courses-item-innner">
@@ -581,6 +592,6 @@ <h3 class="text-center text-md-start">News letter</h3>
581592
</div>
582593
</main>
583594

584-
595+
<script src="courses.js"></script>
585596
</body>
586597
</html>

‎courses.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
function search(){
2+
let isSearch = document.getElementById('isSearch').value.toUpperCase();
3+
let course = document.querySelectorAll('.course');
4+
let htag = document.getElementsByTagName('h3');
5+
6+
for(let i = 0; i < htag.length; i++){
7+
let a = course[i].getElementsByTagName('h3')[0];
8+
9+
let value = a.innerHTML || a.innerText || a.textContent;
10+
11+
if(value.toUpperCase().indexOf(isSearch) > -1){
12+
course[i].style.display = "";
13+
}
14+
else{
15+
course[i].style.display = "none";
16+
}
17+
}
18+
}

‎learning.html

+7-5
Original file line numberDiff line numberDiff line change
@@ -87,14 +87,16 @@ <h2 class="text-dark">My Learning</h2>
8787
</div>
8888
<div class="container pt-5">
8989
<div>
90-
<div class="search-area">
91-
<div class="input-group d-flex justify-content-end py-4">
92-
<input type="search" placeholder="Search my course" id="inputSearch" onkeyup="search()" class="form-control">
93-
<div class="search-focus search__buy__course">
90+
<div class="row d-flex justify-content-end">
91+
<div class="col-md-4 py-3">
92+
<div class="input-group">
93+
<input type="search" placeholder="search my course..." id="inputSearch" onkeyup="search()" class="form-control">
94+
<button class="btn">
9495
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
9596
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
9697
</svg>
97-
</div>
98+
</button>
99+
</div>
98100
</div>
99101
</div>
100102
</div>

0 commit comments

Comments
 (0)