Updating-Recipe Finder

Author: Keyuri-19

Projects/Recipe Finder/assets/script.js

@@ -1,26 +1,23 @@
 const searchForm = document.querySelector("form");
 const searchResultDiv = document.querySelector(".search-result");
 const container = document.querySelector(".container");
+const accordionHeadings = document.querySelectorAll('.accordion-heading');
 let searchQuery = "";
 const APP_ID = '33b1a0ef';
 const APP_key = '5e12645236de1c7eb43b725fd06a49ee';
- //console.log(container);
 
 searchForm.addEventListener("submit", (e) => {
   e.preventDefault();
   searchQuery = e.target.querySelector("input").value;
   fetchAPI();
-  //console.log(searchQuery);
 });
 
 async function fetchAPI() {
   const baseURL = `https://api.edamam.com/search?q=${searchQuery}&app_id=${APP_ID}&app_key=${APP_key}&from=0&to=100`;
   const response = await fetch(baseURL);
   const data = await response.json();
   generateHTML(data.hits);
-  //console.log(data);
 }
-
 function generateHTML(results) {
   container.classList.remove("initial");
   let generatedHTML = "";
@@ -34,16 +31,31 @@ function generateHTML(results) {
             result.recipe.url
           }">View Recipe</a>
         </div>
-        <p class="item-data">Calories : ${result.recipe.calories.toFixed(2)}</p>
-        <p class="item-data">Diet label : ${
-          result.recipe.dietLabels.length > 0
-            ? result.recipe.dietLabels
-            : "No Data Found"
-        }</p>
-        <p class="item-data">Health labels : ${result.recipe.healthLabels}</p>
+        <p class="item-data">Calories: ${result.recipe.calories.toFixed(2)}</p>
+        <div class="accordion">
+          <div class="accordion-item">
+            <h3 class="accordion-heading">Diet Labels</h3>
+            <div class="accordion-content">
+              <p class="item-data">${result.recipe.dietLabels.length > 0 ? result.recipe.dietLabels : "No Data Found"}</p>
+            </div>
+          </div>
+          <div class="accordion-item">
+            <h3 class="accordion-heading">Health Labels</h3>
+            <div class="accordion-content">
+              <p class="item-data">${result.recipe.healthLabels}</p>
+            </div>
+          </div>
+        </div>
       </div>
     `;
   });
   searchResultDiv.innerHTML = generatedHTML;
-}
 
+  // Add event listeners to accordion headings
+  const accordionHeadings = document.querySelectorAll('.accordion-heading');
+  accordionHeadings.forEach((heading) => {
+    heading.addEventListener('click', () => {
+      heading.nextElementSibling.classList.toggle('active');
+    });
+  });
+}

Projects/Recipe Finder/assets/scroll.css

@@ -7,4 +7,4 @@
 ::-webkit-scrollbar-thumb {
     background-color: rgba(195, 195, 195, 0);
     border-radius: 0px;
-}
+}

Projects/Recipe Finder/assets/style.css

@@ -6,7 +6,6 @@
   box-sizing: border-box;
 }
 
-
 img {
   width: 100%;
   height: 100%;
@@ -118,7 +117,8 @@ input {
 }
 
 .view-btn:hover {
-    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.295);
+    box-shadow: 2px 10px 20px rgba(222, 38, 201, 0.295);
+    color: rgb(233, 37, 181);
 }
 
 .item-data {
@@ -153,8 +153,86 @@ input {
   .container.initial form {
     max-width: 500px;
   }
+  .accordion-heading {
+    min-width: 540px;
+  }
   .container.initial form input {
     padding: 10px;
     font-size: 2rem;
   }
 }
+
+.accordion {
+  border-radius: 7px;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(3, 3, 3, 0.23);
+  list-style-type: none;
+  padding: 0;
+  overflow: hidden;
+  margin-top: 3px;
+}
+
+.accordion-item p {
+  color: #fff;
+  font-weight: 30;
+  letter-spacing: 0.2px;
+  margin: 0;
+  padding: 20px 15px;
+  position: relative;
+}
+
+.accordion-item:nth-child(1) .accordion-heading {
+  background-color: #f5d4df;
+}
+.accordion-item:nth-child(2) .accordion-heading {
+  background-color: #fa9fbdf5;
+}
+
+.accordion-item .accordion-heading::before {
+  color: rgb(19, 7, 7);
+  font-weight: bold;
+  float: right;
+  margin-right: 5px;
+  transform: rotate(0);
+  transition: transform 0.3s ease-in-out;
+}
+
+.accordion-item.open .accordion-heading::before {
+  transform: rotate(90deg);
+}
+
+.accordion-item {
+  border-bottom: 1px solid #ddbdbd;
+}
+
+.accordion-heading {
+  background-color: #f4f4f4;
+  padding: 10px;
+  margin: 0;
+  cursor: pointer;
+  background-color: #fceded;
+  font-size: 10px;
+  cursor: pointer;
+  width: 500px;
+  font-family: Georgia, 'Times New Roman', Times, serif;
+}
+
+.accordion-heading p {
+  display: none;
+  letter-spacing: 1px;
+  margin: 0;
+  padding: 15px;
+  text-align: justify;
+}
+
+.accordion-content {
+  display: none;
+  padding: 10px;
+}
+
+.accordion-content.active {
+  display: block;
+}
+
+.accordion-heading.open p {
+  display: inline-block;
+}

Projects/Recipe Finder/index.html

@@ -28,6 +28,6 @@ <h1 class="brand">Recipe Finder</h1>
     </section>
     <script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>
     <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
-    <script src="assets/script.js"></script>
+    <script src="assets/script.js"></script>   
 </body>
 </html>