File tree 3 files changed +35
-2
lines changed
3 files changed +35
-2
lines changed Original file line number Diff line number Diff line change 26
26
27
27
.s3-browser__title {
28
28
text-align : center;
29
+ margin-bottom : 1rem ;
29
30
p {
30
31
font-size : 90% ;
31
32
font-weight : 600 ;
@@ -65,6 +66,10 @@ main {
65
66
}
66
67
}
67
68
69
+ # searchInput {
70
+ height : 1.3rem ;
71
+ }
72
+
68
73
.s3-browser__filter__button {
69
74
background-color : white;
70
75
border-color : inherit;
Original file line number Diff line number Diff line change @@ -27,3 +27,20 @@ function filterBy(elemType) {
27
27
}
28
28
} ) ;
29
29
}
30
+
31
+ function searchByText ( searchTerm ) {
32
+ const cardWrappers = document . querySelectorAll ( ".s3-browser__card__wrapper" ) ;
33
+ cardWrappers . forEach ( ( wrapper ) => {
34
+ const pTagContent = wrapper . querySelector ( "p" )
35
+ ? wrapper . querySelector ( "p" ) . textContent
36
+ : "" ;
37
+ if (
38
+ searchTerm === "" ||
39
+ pTagContent . toLowerCase ( ) . includes ( searchTerm . toLowerCase ( ) )
40
+ ) {
41
+ wrapper . classList . remove ( "no-display" ) ;
42
+ } else {
43
+ wrapper . classList . add ( "no-display" ) ;
44
+ }
45
+ } ) ;
46
+ }
Original file line number Diff line number Diff line change @@ -10,9 +10,11 @@ <h3 class="center-text"> You are currently viewing items in the S3 bucket</h3>
10
10
< span class ="btn s3-browser__filter__button " onclick ="filterBy " data-type ="video " id ="key--video "> Video</ span > /
11
11
< span onclick ="filterBy " class ="btn s3-browser__filter__button " data-type ="img " id ="key--img "> Image</ span > /
12
12
< span onclick ="filterBy " class ="btn s3-browser__filter__button " data-type ="none " id ="view-all "> View all</ span >
13
-
14
-
15
13
</ p >
14
+ < div class ="search-container ">
15
+ < input type ="text " id ="searchInput " placeholder ="Start typing to search... ">
16
+ < button onclick ="handleSearch() " class ="btn "> Search</ button >
17
+ </ div >
16
18
</ div >
17
19
< div class ="s3-browser__wrapper ">
18
20
{% for item_key, item_value in item_data.items.items %}
@@ -98,6 +100,15 @@ <h3 class="center-text"> You are currently viewing items in the S3 bucket</h3>
98
100
this . classList . toggle ( "active" ) ;
99
101
100
102
} ) ;
103
+ // search stuff
104
+ function handleSearch ( ) {
105
+ const searchTerm = document . getElementById ( 'searchInput' ) . value ;
106
+ searchByText ( searchTerm ) ;
107
+ } ;
108
+
109
+ document . getElementById ( 'searchInput' ) . addEventListener ( 'input' , ( ) => {
110
+ handleSearch ( ) ;
111
+ } ) ;
101
112
</ script >
102
113
</ body >
103
114
{% endblock %}
You can’t perform that action at this time.
0 commit comments