added some event listeners

ZielaM · Apr 25, 2024 · 1296b7f · 1296b7f
1 parent 61a82ff
commit 1296b7f
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 98 deletions.
diff --git a/index.html b/index.html
@@ -96,58 +96,7 @@ <h3>Categories:</h3>
                         <div></div>
                     </header>
                     <div id="SearchResults">
-                        <div class="res">
-                            <aside>
-                                <img src="https://www.thecocktaildb.com/images/media/drink/rrtssw1472668972.jpg" alt="">
-                            </aside>
-                            <section>
-                                <div>
-                                    <h2>Drink nazwa</h2>
-                                </div>
-                                <article>
-                                    Ingredients:ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
-                                </article>
-                            </section>
-                        </div>
-                        <div class="res">
-                            <aside>
-                                <img src="https://www.thecocktaildb.com/images/media/drink/rrtssw1472668972.jpg" alt="">
-                            </aside>
-                            <section>
-                                <div>
-                                    <h2>Drink nazwa</h2>
-                                </div>
-                                <article>
-                                    Ingredients:
-                                </article>
-                            </section>
-                        </div>
-                        <div class="res">
-                            <aside>
-                                <img src="https://www.thecocktaildb.com/images/media/drink/rrtssw1472668972.jpg" alt="">
-                            </aside>
-                            <section>
-                                <div>
-                                    <h2>Drink nazwa</h2>
-                                </div>
-                                <article>
-                                    Ingredients:
-                                </article>
-                            </section>
-                        </div>
-                        <div class="res">
-                            <aside>
-                                <img src="https://www.thecocktaildb.com/images/media/drink/rrtssw1472668972.jpg" alt="">
-                            </aside>
-                            <section>
-                                <div>
-                                    <h2>Drink nazwa</h2>
-                                </div>
-                                <article>
-                                    Ingredients:
-                                </article>
-                            </section>
-                        </div>
+
                     </div>
                 </div>
             </main>

diff --git a/js/script.js b/js/script.js
@@ -5,52 +5,63 @@ async function getSearchData(url)
     //console.log(data);
     return data;
 }
-search.addEventListener("keypress", async function(event) {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      let name = search.value;
-      let url = 'https://www.thecocktaildb.com/api/json/v1/1/search.php?s=' + name;
-      let data = await getSearchData(url);
-      data = data.drinks;
-      SearchResults.innerHTML = "";
-      const cat = Array.from(document.querySelectorAll("input[type=checkbox]")).filter(i => i.checked).map(i => i.value);
-      if (cat.length > 0)
-      data = data.filter(function(i){
-        if (cat.includes(i.strCategory))
-        {
-          return i;
-        }
-      });
-      data.forEach(e => {
-        const ele = document.createElement('div');
-        ele.classList.add('res');
-        {
-          const help = document.createElement('aside');
-          const img = document.createElement('img');
-          img.src = e['strDrinkThumb'];
-          help.appendChild(img);
-          ele.appendChild(help);
-        }
+async function main()
+{
+  let name = search.value;
+  let url = 'https://www.thecocktaildb.com/api/json/v1/1/search.php?s=' + name;
+  let data = await getSearchData(url);
+  data = data.drinks;
+  SearchResults.innerHTML = "";
+  const cat = Array.from(document.querySelectorAll("input[type=checkbox]")).filter(i => i.checked).map(i => i.value);
+  if (cat.length > 0)
+  data = data.filter(function(i){
+    if (cat.includes(i.strCategory))
+    {
+      return i;
+    }
+  });
+  data.forEach(e => {
+    const ele = document.createElement('div');
+    ele.classList.add('res');
+    {
+      const help = document.createElement('aside');
+      const img = document.createElement('img');
+      img.src = e['strDrinkThumb'];
+      help.appendChild(img);
+      ele.appendChild(help);
+    }
+    {
+      const help = document.createElement('section');
+      const div = document.createElement('div');
+      div.innerHTML = e['strDrink'];
+      const article = document.createElement('article');
+      const ingList = [];
+      for (let i = 1; i < 16; i++) 
+      {
+        if (e[`strIngredient${i}`])
         {
-          const help = document.createElement('section');
-          const div = document.createElement('div');
-          div.innerHTML = e['strDrink'];
-          const article = document.createElement('article');
-          const ingList = [];
-          for (let i = 1; i < 16; i++) 
-          {
-            if (e[`strIngredient${i}`])
-            {
-              ingList.push(e[`strIngredient${i}`]);
-            }
-            else break;
-          }
-          article.innerHTML = `Ingredients: ${ingList.join(', ')}`;
-          help.appendChild(div);
-          help.appendChild(article);
-          ele.appendChild(help);
+          ingList.push(e[`strIngredient${i}`]);
         }
-        SearchResults.appendChild(ele);
-      });
+        else break;
+      }
+      article.innerHTML = `Ingredients: ${ingList.join(', ')}`;
+      help.appendChild(div);
+      help.appendChild(article);
+      ele.appendChild(help);
     }
-  });
+    SearchResults.appendChild(ele);
+  });
+}
+
+search.addEventListener("keypress", async function(event) {
+  if (event.key === "Enter") {
+    event.preventDefault();
+    main();
+  }
+});
+const nodes = document.querySelectorAll("input[type=checkbox]");
+for (const i of nodes) {
+  console.log(i);
+  i.addEventListener("change", main);
+
+}