From 0ea6caa5ab2d4e6235e0632a6e04a15b2ac895aa Mon Sep 17 00:00:00 2001
From: SaraFreitas02 <sarafreitasemail@gmail.com>
Date: Tue, 21 Jan 2025 21:05:53 +0100
Subject: [PATCH] feat: Add toggle functionality for ingredients and
 preparation sections and initiate the functionality for the measurements
 toggle

ATTENTION: The measurements toggle still needs the main algorithm
---
 script.js | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/script.js b/script.js
index cc2dd88..f8364ae 100644
--- a/script.js
+++ b/script.js
@@ -34,3 +34,41 @@ window.onerror = function () {
             <p>We're experiencing an issue with loading the page. Please try refreshing or ensure JavaScript is enabled.</p>
         </div>`;
 };
+
+// Handle toggle buttons
+const toggleBtns = Array.from(document.getElementsByClassName("toggle-btn"));
+
+const measurements = Array.from(
+  document.getElementsByClassName("measurement-span")
+);
+const ingredients = document.getElementById("ingredients");
+const preparation = document.getElementById("preparation");
+
+if (
+  !ingredients ||
+  !preparation ||
+  toggleBtns.length < 1 ||
+  measurements.length < 1
+) {
+  throw new Error("Missing elements for toggling");
+}
+
+// Toggle between ingredients and preparation
+toggleBtns[0].addEventListener("click", () => {
+  if (ingredients.classList.contains("hidden")) {
+    ingredients.classList.remove("hidden");
+    preparation.classList.add("hidden");
+  } else {
+    ingredients.classList.add("hidden");
+    preparation.classList.remove("hidden");
+  }
+});
+
+// Toggle between metric and imperial measurements
+toggleBtns[1].addEventListener("click", () => {
+  measurements.forEach((measurement) => {
+   
+    //algorithm to be implemented
+ 
+  });
+});