From 1296b7f9f8228cac0b5c06a81b7e7f5b3f5139db Mon Sep 17 00:00:00 2001
From: ZielaM <izielinski379@gmail.com>
Date: Thu, 25 Apr 2024 14:35:05 +0200
Subject: [PATCH] added some event listeners

---
 index.html   |  53 +-------------------------
 js/script.js | 103 ++++++++++++++++++++++++++++-----------------------
 2 files changed, 58 insertions(+), 98 deletions(-)

diff --git a/index.html b/index.html
index 2e7b18a..b0ea80e 100644
--- 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
index 553aca4..4b34f53 100644
--- 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);
     }
-  });
\ No newline at end of file
+    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);
+
+}
\ No newline at end of file