├── Vocab.zip
├── images
    └── icons
    │   ├── icon-128x128.png
    │   ├── icon-144x144.png
    │   ├── icon-152x152.png
    │   ├── icon-192x192.png
    │   ├── icon-384x384.png
    │   ├── icon-512x512.png
    │   ├── icon-72x72.png
    │   └── icon-96x96.png
├── README.md
├── includes
    └── config.php
├── action scripts
    ├── delete.php
    └── edit.php
├── sw.js
├── manifest.json
├── css
    └── vocab.css
├── js
    └── vocab.js
└── index.php


/Vocab.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raghav-wd/VocabList/HEAD/Vocab.zip


--------------------------------------------------------------------------------
/images/icons/icon-128x128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raghav-wd/VocabList/HEAD/images/icons/icon-128x128.png


--------------------------------------------------------------------------------
/images/icons/icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raghav-wd/VocabList/HEAD/images/icons/icon-144x144.png


--------------------------------------------------------------------------------
/images/icons/icon-152x152.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raghav-wd/VocabList/HEAD/images/icons/icon-152x152.png


--------------------------------------------------------------------------------
/images/icons/icon-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raghav-wd/VocabList/HEAD/images/icons/icon-192x192.png


--------------------------------------------------------------------------------
/images/icons/icon-384x384.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raghav-wd/VocabList/HEAD/images/icons/icon-384x384.png


--------------------------------------------------------------------------------
/images/icons/icon-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raghav-wd/VocabList/HEAD/images/icons/icon-512x512.png


--------------------------------------------------------------------------------
/images/icons/icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raghav-wd/VocabList/HEAD/images/icons/icon-72x72.png


--------------------------------------------------------------------------------
/images/icons/icon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raghav-wd/VocabList/HEAD/images/icons/icon-96x96.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # VocabList
2 | As being learner in English and Japanese, I needed a memo to save words and phrases. This apps web helped me to do the job.
3 | 


--------------------------------------------------------------------------------
/includes/config.php:
--------------------------------------------------------------------------------
1 | <?php
2 | $hn = "localhost";
3 | $un = "root";
4 | $pw = "";
5 | $db = "vocab";
6 | $conn = mysqli_connect($hn, $un, $pw, $db);
7 | // mysqli_set_charset($conn,"utf8");


--------------------------------------------------------------------------------
/action scripts/delete.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 |     include_once "../includes/config.php";
 3 | 
 4 |     if($_GET['id'] != "")
 5 |     {
 6 |         $id = $_GET['id'];
 7 |         $sql = "DELETE FROM data WHERE id='$id'";
 8 |     }
 9 |     else {
10 |         $sql = "UPDATE data SET word='$word', elaboration='$elaboration' WHERE id='$id'";
11 |     }
12 | 
13 |     mysqli_query($conn, $sql);
14 |     header("Location: ../index.php");
15 | ?>


--------------------------------------------------------------------------------
/sw.js:
--------------------------------------------------------------------------------
 1 | const staticAssets = [
 2 |     './',
 3 |     './css/vocab.css'
 4 | ];
 5 | 
 6 | self.addEventListener('install', async event => {
 7 |     const cache = await caches.open('vocab-static');
 8 |     cache.addAll(staticAssets);
 9 | });
10 | 
11 | self.addEventListener('fetch', event => {
12 |     const req = event.request;
13 |     event.respondWith(cacheFirst(req));
14 | });
15 | 
16 | async function cacheFirst(req) {
17 |     const cachedResponse = await caches.match(req);
18 |     return cachedResponse || fetch(req);
19 | }


--------------------------------------------------------------------------------
/action scripts/edit.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 |     include_once "../includes/config.php";
 3 | 
 4 |     $word = $_POST['word'];
 5 |     $elaboration = $_POST['elaboration'];
 6 |     $category = (isset($_POST['category']))?$_POST['category']:"w";
 7 |     if($_POST['id'] == "")
 8 |     {
 9 |         $sql = "INSERT INTO data (`word`, `elaboration`, `category`) VALUES('$word', '$elaboration', '$category')";
10 |     }
11 |     else {
12 |         $id = $_POST['id'];
13 |         $sql = "UPDATE data SET word='$word', elaboration='$elaboration', category='$category' WHERE id='$id'";
14 |     }
15 | 
16 |     mysqli_query($conn, $sql);
17 |     header("Location: ../index.php");
18 | ?>


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Vocab",
 3 |   "theme_color": "#ffffff",
 4 |   "background_color": "#ffffff",
 5 |   "display": "standalone",
 6 |   "Scope": "/",
 7 |   "start_url": ".",
 8 |   "icons": [
 9 |     {
10 |       "src": "images/icons/icon-72x72.png",
11 |       "sizes": "72x72",
12 |       "type": "image/png"
13 |     },
14 |     {
15 |       "src": "images/icons/icon-96x96.png",
16 |       "sizes": "96x96",
17 |       "type": "image/png"
18 |     },
19 |     {
20 |       "src": "images/icons/icon-128x128.png",
21 |       "sizes": "128x128",
22 |       "type": "image/png"
23 |     },
24 |     {
25 |       "src": "images/icons/icon-144x144.png",
26 |       "sizes": "144x144",
27 |       "type": "image/png"
28 |     },
29 |     {
30 |       "src": "images/icons/icon-152x152.png",
31 |       "sizes": "152x152",
32 |       "type": "image/png"
33 |     },
34 |     {
35 |       "src": "images/icons/icon-192x192.png",
36 |       "sizes": "192x192",
37 |       "type": "image/png"
38 |     },
39 |     {
40 |       "src": "images/icons/icon-384x384.png",
41 |       "sizes": "384x384",
42 |       "type": "image/png"
43 |     },
44 |     {
45 |       "src": "images/icons/icon-512x512.png",
46 |       "sizes": "512x512",
47 |       "type": "image/png"
48 |     }
49 |   ],
50 |   "splash_pages": null
51 | }


--------------------------------------------------------------------------------
/css/vocab.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     padding-bottom: 50px;
 3 |     border-bottom: 5px #a5d6a7 solid;
 4 | }
 5 | 
 6 | /* Handle */
 7 | ::-webkit-scrollbar-thumb {
 8 |     background: #e6ee9c;
 9 | }
10 | 
11 | .items-list {
12 |     padding: 5px 10px 5px 10px;
13 | }
14 | 
15 | .item {
16 |     border-bottom: 2px rgb(230, 230, 230) solid;
17 |     border-left: 3px black solid;
18 |     margin: 10px 0 10px 0;
19 |     padding: 4px;
20 |     transition: transform 0.4s linear, opacity 0.4s linear;
21 | }
22 | 
23 | .item:hover {
24 |     cursor: pointer;
25 | }
26 | 
27 | .overlay-writer {
28 |     width: 100%;
29 |     height: 0vh;
30 |     background-color: white;
31 |     /* display: none; */
32 |     border-radius: 10px;
33 |     position: absolute;
34 |     z-index: 9;
35 |     bottom: 0;
36 |     left: -100vw;
37 |     transition: height 0.4s ease-in;
38 |     padding: 18px;
39 | }
40 | 
41 | .keyboard_arrow_down:hover {
42 |     cursor: pointer;
43 | }
44 | 
45 | input[type='submit'] {
46 |     font-size: 18px;
47 |     border: none;
48 |     background-color: white;
49 | }
50 | 
51 | .delete:hover {
52 |     cursor: pointer;
53 | }
54 | 
55 | img[src="https://cdn.000webhost.com/000webhost/logo/footer-powered-by-000webhost-white2.png"] {
56 |     display: none;
57 |     height: 0;
58 |     opacity: 0;
59 | }
60 | 


--------------------------------------------------------------------------------
/js/vocab.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // for (var i = 0; i < countElement("item"); i++)
 3 | //     _all('.item')[i].addEventListener("click", function (event) {
 4 | //         // _('.overlay-writer').style.display = "inline-block";
 5 | //         _('.overlay-writer').style.transform = "translateX(100vw)";
 6 | //         _('.overlay-writer').style.height = "80vh";
 7 | //         _('.overlay-writer').style.boxShadow = "1px 2px 30px 4px grey";
 8 | //         _('#Word').value = this.getElementsByClassName('word')[0].innerHTML.trim();
 9 | //         _('#Elaboration').value = this.getElementsByClassName('elaboration')[0].innerHTML.trim();
10 | //     // alert(this.getElementsByClassName('word')[0].innerHTML);
11 | //     });
12 | 
13 | // _('.keyboard_arrow_down').addEventListener("click", function () {
14 | //     _('.overlay-writer').style.transform = "translateX(-100vw)";
15 | //     _('.overlay-writer').style.height = "0";
16 | //     _('.overlay-writer').style.boxShadow = "0px 0px 0px 0px grey";
17 | // })
18 | 
19 | // //finds the frequency of a class
20 | // function countElement(search) {
21 | //     var itemsList = _('.items-list').innerHTML;
22 | //     var freq = 0;
23 | //     for (var i = 0; i < itemsList.length; i++)
24 | //     {
25 | //         if (itemsList.charAt(i) == search.charAt(0))
26 | //         {
27 | //             var c = 0;
28 | //             for (var j = 0; j < search.length; j++)
29 | //             {
30 | //                 if (itemsList.charAt(i+j) == search.charAt(j))
31 | //                 c++;
32 | //             }
33 | //             if (c == search.length) freq++;
34 | //         }
35 | //     }
36 | //     return freq;
37 | // }
38 | 
39 | // function countElement(search) {
40 | //     var itemsList = _('.items-list').innerHTML;
41 | //     var freq = 0;
42 | //     for (var i = 0; i < itemsList.length; i++) {
43 | //         if (itemsList.charAt(i) == search.charAt(0)) {
44 | //             var c = 0;
45 | //             for (var j = 0; j < search.length; j++) {
46 | //                 if (itemsList.charAt(i + j) == search.charAt(j))
47 | //                     c++;
48 | //             }
49 | //             if (c == search.length) freq++;
50 | //         }
51 | //     }
52 | //     return freq;
53 | // }
54 | 
55 | // function _(ele) {
56 | //     return document.querySelector(ele);
57 | // }
58 | 
59 | // function _all(ele) {
60 | //     return document.querySelectorAll(ele);
61 | // }


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | include_once "includes/config.php";
  3 | 
  4 | $sql = "SELECT * FROM data";
  5 | $res = mysqli_query($conn, $sql);
  6 | $row = mysqli_fetch_all($res, MYSQLI_NUM);
  7 | $num_rows = mysqli_num_rows($res);
  8 | 
  9 | ?>
 10 | <!DOCTYPE html>
 11 | <html lang="en">
 12 | <head>
 13 |     <meta charset="UTF-8">
 14 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 15 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 16 |     <!--Import Google Icon Font-->
 17 |     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 18 |     <!-- Compiled and minified CSS -->
 19 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
 20 |     <link rel="stylesheet" href="css/vocab.css">
 21 |     <link rel="manifest" href="manifest.json" >
 22 |     
 23 |     <title>Vocab</title>
 24 | </head>
 25 | <body>
 26 |     
 27 |     <ul id="slide-out" class="sidenav">
 28 |         <li>
 29 |             <div class="user-view">
 30 |                 <a href="#name"><span class="white-text name">John Doe</span></a>
 31 |                 <a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
 32 |             </div>
 33 |         </li>
 34 |         <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
 35 |         <li><a href="#!">Second Link</a></li>
 36 |         <li>
 37 |             <div class="divider"></div>
 38 |         </li>
 39 |         <li><a class="subheader">Subheader</a></li>
 40 |         <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
 41 |     </ul>
 42 | 
 43 |     <!-- <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a> -->
 44 | 
 45 |     <div class="row">
 46 |         <div class="col s12">
 47 |         <ul class="tabs">
 48 |             <li class="tab col s3"><a class="active" href="#test1"><span class="tab-val">En</span></a></li>
 49 |             <li class="tab col s3"><a href="#test2"><span class="tab-val">Jap</span></a></li>
 50 |             <li class="tab col s3"><a href="#test3"><span class="tab-val">Js</span></a></li>
 51 |             <li class="tab col s3"><a href="#test4"><span class="tab-val">Php</span></a></li>
 52 |         </ul>
 53 |         </div>
 54 |         <!-- <div id="test1" class="col s12">Test 1</div>
 55 |         <div id="test2" class="col s12">Test 2</div>
 56 |         <div id="test3" class="col s12">Test 3</div>
 57 |         <div id="test4" class="col s12">Test 4</div> -->
 58 |     </div>
 59 | 
 60 |     <nav class="white">
 61 |         <div class="nav-wrapper">
 62 |             <form>
 63 |                 <div class="input-field">
 64 |                     <input id="search" type="search" onkeyup="searchBar(event)">
 65 |                     <label class="label-icon" for="search"><i class="material-icons grey-text">search</i></label>
 66 |                     <i class="material-icons" id="clearSearches">close</i>
 67 |                 </div>
 68 |             </form>
 69 |         </div>
 70 |     </nav>
 71 | 
 72 |     <div class="items-list">
 73 | 
 74 |     </div>
 75 | 
 76 |     <div class="fixed-action-btn">
 77 |     <a class="btn-floating btn-large red">
 78 |         <i class="large material-icons">mode_edit</i>
 79 |     </a>
 80 | 
 81 |     <ul>
 82 |         <li><a class="btn-floating amber lighten-2 sorts" data-sort="word-sort">w</a></li>
 83 |         <li><a class="btn-floating purple lighten-2 sorts" data-sort="phrase-sort">p</a></li>
 84 |         <li><a class="btn-floating cyan lighten-2 sorts" data-sort="quote-sort">q
 85 | 
 86 |         </a></li>
 87 |         <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
 88 |     </ul>
 89 |     </div>
 90 | 
 91 |     <div class="overlay-writer">
 92 |         <label class="keyboard_arrow_down"><i class=" material-icons grey-text right">keyboard_arrow_down</i></label>
 93 |         <form action = "action scripts/edit.php" method="POST">
 94 |         <div class="row">
 95 |             <div class="input-field col s12">
 96 |                 <input value="." id="Word" type="text" class="validate" name="word">
 97 |                 <label class="active" for="Word">Word</label>
 98 |             </div>
 99 |             <div class="row">
100 |                 <div class="input-field col s12">
101 |                     <textarea id="Elaboration" class="materialize-textarea" name="elaboration" onkeyup="keyups(event)">.</textarea>
102 |                     <label for="Elaboration">Elaboration</label>
103 |                 </div>
104 |             </div>
105 | 
106 |             <div class="switch">
107 |                 <label>
108 |                 Word
109 |                 <input type="checkbox" name="category" value="q">
110 |                 <span class="lever"></span>
111 |                 Quote
112 |                 </label>
113 |             </div>
114 | 
115 |             <p>
116 |                 <label>
117 |                     <input type="checkbox" name="category" value="p"/>
118 |                     <span>Phrase</span>
119 |                 </label>
120 |             </p>
121 | 
122 |             <label class="delete"><i class=" material-icons grey-text right">delete</i></label>
123 |             <input id="Id" type="text" value="" name="id" class="hide">
124 |             <input type="submit" value="✓" class="done right">
125 |         </form>
126 |     </div>
127 | 
128 |     
129 | 
130 |     <script src="js/vocab.js"></script>
131 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
132 |     <!-- Compiled and minified JavaScript -->
133 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
134 |     <script>
135 | 
136 |         $(document).ready(function(){
137 |         $('.sidenav').sidenav();
138 |         $('.tabs').tabs();
139 |         $('.fixed-action-btn').floatingActionButton();
140 |         });
141 | 
142 |         var ids = [];
143 |         var words = [];
144 |         var elaboration = [];
145 |         var category = [];
146 |         <?php
147 |         for($i = 0; $i < $num_rows; $i++)
148 |         {
149 |             echo "ids.push('".$row[$i][0]."');";
150 |             echo "words.push('".$row[$i][1]."');";
151 |             echo "elaboration.push('".$row[$i][2]."');";
152 |             echo "category.push('".$row[$i][3]."');";
153 |         }
154 |         
155 |         ?>
156 | 
157 |         renderer();
158 |         //renders in DOM
159 |         function renderer() {
160 |             for(var i = 0; i<words.length; i++)
161 |             {
162 |                 var lftBdr = colorCode(category[i]);
163 |                 var wrd = (words[i] == '.')? "" : words[i];
164 |                 var color = (words[i] == '.' || words[i] == "")? "black" : "grey";
165 |                 document.querySelector('.items-list').innerHTML += 
166 |                 `<div class="item" style="border-left-color: ${lftBdr};">
167 |                     <h6 class="word" data-id="${ids[i]}">${wrd}</h6>
168 |                     <span class="elaboration ${color}-text">
169 |                         ${elaboration[i]}
170 |                     </span>
171 |                 </div>`;
172 |             }
173 |         }
174 | 
175 |         //Not to block the initial load of the page with news content wanna load basic html as soon as possible
176 |         window.addEventListener('load', e => { 
177 |             if ('serviceWorker' in navigator) {
178 |                 try {
179 |                     navigator.serviceWorker.register('sw.js');
180 |                     console.log('sw reg');
181 |                 }
182 |                 catch (error) {
183 |                     console.log('sw not reg');
184 |                 }
185 |             }
186 |         });
187 |         
188 |          _('.keyboard_arrow_down').addEventListener("click", function () {
189 |             _('.overlay-writer').style.transform = "translateX(-100vw)";
190 |             _('.overlay-writer').style.height = "0";
191 |             _('.overlay-writer').style.boxShadow = "0px 0px 0px 0px grey";
192 |         });
193 | 
194 |         _('.btn-floating').addEventListener("dblclick", function () {
195 |             _('.overlay-writer').style.transform = `translate(100vw, ${window.pageYOffset-10}px)`;
196 |             _('.overlay-writer').style.height = "80vh";
197 |             _('.overlay-writer').style.boxShadow = "1px 2px 30px 4px grey";
198 |         });
199 | 
200 |         //Deletes an item
201 |         _('.delete').addEventListener("click", function () {
202 |             window.location.href = `action scripts/delete.php?id=${_('#Id').value}`;
203 |         });
204 | 
205 |         _('#clearSearches').addEventListener("click", function () {
206 |             document.querySelector('.items-list').innerHTML = "";
207 |             renderer();
208 |         });
209 | 
210 |         //Tabs
211 |         _all('.tab', 'click', function () {
212 |             // alert(this.querySelector('.tab-val').innerHTML);
213 |             var slideDis = 400;
214 |             for(var x = 0; ; x++)
215 |             {   
216 |                 try {
217 |                     document.getElementsByClassName('item')[x].style.transform = `translateX(-${slideDis}px)`;
218 |                     document.getElementsByClassName('item')[x].style.opacity = "0";
219 |                     slideDis += 400;
220 |                 }
221 |                 catch {break;}
222 |             }
223 |             //clears out item list when transition is done
224 |             setTimeout(function () {
225 |                 document.querySelector('.items-list').innerHTML = "";
226 |             }, 400);
227 |         });
228 | 
229 |         function sleep(delay) {
230 |             var start = new Date().getTime();
231 |             while (new Date().getTime() < start + delay);
232 |         }
233 | 
234 |         for(var ii = 0; ii < 3; ii++)// ***Change upperLimit if nos of sort floating btn changes
235 |         _all('.sorts')[ii].addEventListener("click", function () {
236 |             var sortCode;   //sortCodes are sorting abbreviation
237 |             if(this.getAttribute('data-sort') == "word-sort")
238 |             sortCode = 'w';
239 |             else if(this.getAttribute('data-sort') == "phrase-sort")
240 |             sortCode = 'p';
241 |             else if(this.getAttribute('data-sort') == "quote-sort")
242 |             sortCode = 'q';
243 | 
244 |             for(var i = 0; i < category.length; i++)
245 |             {
246 |                 var lftBdr = colorCode(category[i]);
247 | 
248 |                 if(category[i] == sortCode)
249 |                 {
250 |                     document.querySelector('.items-list').innerHTML = 
251 |                     `<div class="item" style="border-left-color: ${lftBdr};">
252 |                         <h6 class="word" data-id="${ids[i]}">${words[i]}</h6>
253 |                         <span class="elaboration grey-text">
254 |                             ${elaboration[i]}
255 |                         </span>
256 |                     </div>` + document.querySelector('.items-list').innerHTML;
257 |                 }
258 |             }
259 |         })
260 | 
261 |         for (var i = 0; i < countElement("item"); i++)
262 |             _all('.item')[i].addEventListener("click", function (event) {
263 |                 _('.overlay-writer').style.transform = `translate(100vw, ${window.pageYOffset-10}px)`;
264 |                 _('.overlay-writer').style.height = "80vh";
265 |                 _('.overlay-writer').style.boxShadow = "1px 2px 30px 4px grey";
266 | 
267 |                 _('#Id').value = this.getElementsByClassName('word')[0].getAttribute("data-id");
268 |                 _('#Word').value = this.getElementsByClassName('word')[0].innerHTML.trim();
269 |                 _('#Elaboration').value = this.getElementsByClassName('elaboration')[0].innerHTML.trim();
270 |             });
271 | 
272 |         //finds the frequency of a class
273 |         function countElement(search) {
274 |             var itemsList = _('.items-list').innerHTML;
275 |             var freq = 0;
276 |             for (var i = 0; i < itemsList.length; i++)
277 |             {
278 |                 if (itemsList.charAt(i) == search.charAt(0))
279 |                 {
280 |                     var c = 0;
281 |                     for (var j = 0; j < search.length; j++)
282 |                     {
283 |                         if (itemsList.charAt(i+j) == search.charAt(j))
284 |                         c++;
285 |                     }
286 |                     if (c == search.length) freq++;
287 |                 }
288 |             }
289 |             return freq;
290 |         }
291 | 
292 |         function countElement(search) {
293 |             var itemsList = _('.items-list').innerHTML;
294 |             var freq = 0;
295 |             for (var i = 0; i < itemsList.length; i++) {
296 |                 if (itemsList.charAt(i) == search.charAt(0)) {
297 |                     var c = 0;
298 |                     for (var j = 0; j < search.length; j++) {
299 |                         if (itemsList.charAt(i + j) == search.charAt(j))
300 |                             c++;
301 |                     }
302 |                     if (c == search.length) freq++;
303 |                 }
304 |             }
305 |             return freq;
306 |         }
307 | 
308 |         //removing keycode 13 problem
309 |         function keyups() {
310 |             if (event.keyCode == 13) {
311 |                 _('#Elaboration').value = _('#Elaboration').value.substring(0, _('#Elaboration').value.length - 1) + "<br>";
312 |             }
313 |         }
314 | 
315 |         //search
316 |         function searchBar() {
317 |             // alert(document.querySelector('.items-list').innerHTML);
318 |             if(event.keyCode == 8)return;
319 |             for(var i = 0; i<words.length; i++)
320 |             {
321 |                 if( (words[i].search(_('#search').value) >-1 || elaboration[i].search(new RegExp(_('#search').value, "i")) >-1) && (document.querySelector('.items-list .word').innerHTML != words[i]
322 |                     && document.querySelector('.items-list .elaboration').innerHTML != elaboration[i] )
323 |                 )
324 |                 {
325 |                     var lftBdr = colorCode(category[i]);
326 | 
327 |                     document.querySelector('.items-list').innerHTML = 
328 |                     `<div class="item" style="border-left-color: ${lftBdr}">
329 |                         <h6 class="word" data-id="${ids[i]}">${words[i]}</h6>
330 |                         <span class="elaboration grey-text">
331 |                             ${elaboration[i]}
332 |                         </span>
333 |                     </div>` + document.querySelector('.items-list').innerHTML;
334 |                 }
335 |             }
336 |         }
337 | 
338 |         function colorCode(category) {
339 |             if(category == 'p')
340 |                 var lftBdr = "#ba68c8";
341 |                 else
342 |                 var lftBdr = (category == 'w')? "#ffd54f" : "#4dd0e1";
343 |                 return lftBdr;
344 |         }
345 | 
346 |         function _(ele) {
347 |             return document.querySelector(ele);
348 |         }
349 | 
350 |         function _all(ele, evntL, method) {
351 |             for(var x = 0; ; x++)
352 |             {
353 |                 try{
354 |                     document.querySelectorAll(ele)[x].addEventListener(evntL, method);
355 |                 }
356 |                 catch {break;}
357 |             }
358 |         }
359 |     </script>
360 | 
361 | </body>
362 | </html>


--------------------------------------------------------------------------------