Improve code for exercise 7 lesson 1

Author: visola

Lesson01/exercise_007/filter_and_search.js

@@ -1,11 +1,7 @@
 const tagsToFilterBy = [];
-let textToSearch = '';
 
 const searchBoxElement = document.querySelector('search-box');
-searchBoxElement.addEventListener('changed', (e) => {
-  textToSearch = e.detail.text;
-  applyFilters();
-});
+searchBoxElement.addEventListener('changed', (e) => applyFilters());
 
 function addTagFilter() {
   Array.from(document.querySelectorAll('.extra .label'))
@@ -45,7 +41,7 @@ function filterByTags(products) {
 }
 
 function filterByText(products) {
-  const txt = (textToSearch || '').toLowerCase();
+  const txt = searchBoxElement.searchText.toLowerCase();
   return products.filter((p) => {
     return p.name.toLowerCase().includes(txt)
       || p.description.toLowerCase().includes(txt);

Lesson01/exercise_007/search_box.js

@@ -2,12 +2,19 @@ class SearchBox extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
+    this._searchText = '';
+    
     this.render();
     this.shadowRoot.querySelector('input').addEventListener('keyup', (e) => {
-      this.triggerTextChanged(e.target.value);
+      this._searchText = e.target.value;
+      this.triggerTextChanged(this._searchText);
     });
   }
 
+  get searchText() {
+    return this._searchText;
+  }
+
   render() {
     this.shadowRoot.innerHTML = `
       <link rel="stylesheet" type="text/css" href="../css/semantic.min.css" />