Add exercise 7 to lesson 1

visola · visola · commit d93289a71b0a · 2019-08-25T00:23:50.000-04:00
diff --git a/Lesson01/exercise_007/dynamic_storefront.html b/Lesson01/exercise_007/dynamic_storefront.html
@@ -0,0 +1,29 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="../css/semantic.min.css" />
+    <link rel="stylesheet" type="text/css" href="../css/store_with_header.css" />
+  </head>
+  <body>
+    <div id="content">
+      <section class="header">
+        <h1 class="title">Welcome to Fresh Products Store!</h1>
+  
+        <div class="ui menu">
+          <div class="item">
+            Filtered by tags: <span class="tags"></span>
+          </div>
+          <div class="right item">
+            <search-box value="" />
+          </div>
+        </div>
+      </section>
+
+      <div class="ui items"></div>
+    </div>
+
+    <script src="search_box.js"></script>
+    <script src="../data/products.js"></script>
+    <script src="../sample_003/create_elements.js"></script>
+    <script src="filter_and_search.js"></script>
+  </body>
+</html>
diff --git a/Lesson01/exercise_007/filter_and_search.js b/Lesson01/exercise_007/filter_and_search.js
@@ -0,0 +1,68 @@
+const tagsToFilterBy = [];
+let textToSearch = '';
+
+const searchBoxElement = document.querySelector('search-box');
+searchBoxElement.addEventListener('changed', (e) => {
+  textToSearch = e.detail.text;
+  applyFilters();
+});
+
+function addTagFilter() {
+  Array.from(document.querySelectorAll('.extra .label'))
+  .forEach(tagEl => {
+    tagEl.addEventListener('click', () => {
+      if (!tagsToFilterBy.includes(tagEl.innerHTML)) {
+        tagsToFilterBy.push(tagEl.innerHTML);
+        applyFilters();
+      }
+    });
+  });
+}
+
+function applyFilters() {
+  createListForProducts(filterByText(filterByTags(products)));
+  addTagFilter();
+  updateTagFilterList();
+}
+
+function createTagFilterLabel(tag) {
+  const el = document.createElement('span');
+  el.className = 'ui label orange';
+  el.innerText = tag;
+
+  el.addEventListener('click', () => {
+    const index = tagsToFilterBy.indexOf(tag);
+    tagsToFilterBy.splice(index, 1);
+    applyFilters();
+  });
+  return el;
+}
+
+function filterByTags(products) {
+  let filtered = products;
+  tagsToFilterBy.forEach((t) => filtered = filtered.filter(p => p.tags.includes(t)));
+  return filtered;
+}
+
+function filterByText(products) {
+  const txt = (textToSearch || '').toLowerCase();
+  return products.filter((p) => {
+    return p.name.toLowerCase().includes(txt)
+      || p.description.toLowerCase().includes(txt);
+  });
+}
+
+function updateTagFilterList() {
+  const tagHolder = document.querySelector('.item span.tags');
+
+  if (tagsToFilterBy.length == 0) {
+    tagHolder.innerHTML = 'No filters';
+  } else {
+    tagHolder.innerHTML = '';
+    tagsToFilterBy.sort();
+    tagsToFilterBy.map(createTagFilterLabel)
+      .forEach((tEl) => tagHolder.appendChild(tEl));
+  }
+}
+
+applyFilters();
diff --git a/Lesson01/exercise_007/search_box.js b/Lesson01/exercise_007/search_box.js
@@ -0,0 +1,30 @@
+class SearchBox extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.render();
+    this.shadowRoot.querySelector('input').addEventListener('keyup', (e) => {
+      this.triggerTextChanged(e.target.value);
+    });
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <link rel="stylesheet" type="text/css" href="../css/semantic.min.css" />
+      <div class="ui icon input">
+        <input type="text" placeholder="Search..." />
+        <i class="search icon"></i>
+      </div>
+    `;
+  }
+
+  triggerTextChanged(text) {
+    const event = new CustomEvent('changed', { 
+      bubbles: true,
+      detail: { text },
+    });
+    this.dispatchEvent(event);  
+  }
+}
+
+customElements.define('search-box', SearchBox);
