Feat(JS & HTML) Added search

src/js/04-search-form.js

@@ -1,46 +1,46 @@
-// import APIService from './00-api';
-// const apiService = new APIService();
+import APIService from './00-api';
+const apiService = new APIService();
 
-// const searchButton = document.getElementById('search-button');
-// const searchInput = document.getElementById('search-input');
-// const listItem = document.querySelector('.js-list');
+const searchButton = document.getElementById('search__button');
+const searchInput = document.getElementById('search__input');
+const listItem = document.querySelector('.js-list');
 
-// listItem.addEventListener('click', onSearch);
+listItem.addEventListener('click', onSearch);
 
-// let query = '';
+let query = '';
 
-// searchButton.addEventListener('click', function (event) {
-//   event.preventDefault();
-//   onSearch();
-// });
+searchButton.addEventListener('click', function (event) {
+  event.preventDefault();
+  onSearch();
+});
 
-// searchInput.addEventListener('keydown', function (event) {
-//   if (event.key === 'Enter') {
-//     event.preventDefault();
-//     onSearch();
-//   }
-// });
+searchInput.addEventListener('keydown', function (event) {
+  if (event.key === 'Enter') {
+    event.preventDefault();
+    onSearch();
+  }
+});
 
-// async function onSearch(event) {
-//   const searchQuery = searchInput.value.trim();
+async function onSearch(event) {
+  const searchQuery = searchInput.value.trim();
 
-//   if (!event.target.closest('.filters__item')) {
-//     return;
-//   }
+  if (!event.target.closest('.filters__item')) {
+    return;
+  }
 
-//   const item = event.target.closest('.filters__item');
+  const item = event.target.closest('.filters__item');
 
-//   const filter = item.children[0].innerText.toLowerCase();
-//   const name = item.children[1].innerText.toLowerCase();
+  const filter = item.children[0].innerText.toLowerCase();
+  const name = item.children[1].innerText.toLowerCase();
 
-//   try {
-//     const data = await apiService.getSearch(filter, name, searchQuery);
-//     console.log(data);
-//   } catch (error) {
-//     console.log(error);
-//   }
+  try {
+    const data = await apiService.getSearch(filter, name, searchQuery);
+    console.log(data);
+  } catch (error) {
+    console.log(error);
+  }
 
-//   listItem.innerHTML = '';
+  listItem.innerHTML = '';
 
-//   query = searchQuery;
-// }
+  query = searchQuery;
+}

src/partials/03-exercises.html

@@ -2,6 +2,11 @@
 <section class="section">
   <div class="exersices__container container">
     <h2 class="exersices__title">Exercises</h2>
+
+    <form class="search__form">
+      <input class="search__input" type="text" />
+      <button class="search__button" type="button">svg</button>
+    </form>
     <ul class="exersices__list">
       <li>
         <button class="exercises__btn btnFilters active" type="button">