From d7128bbdadf4b99974f1484bce0d0ad086b229ce Mon Sep 17 00:00:00 2001
From: Michal Kascak <michal.kascak@cat.com>
Date: Mon, 9 Sep 2024 18:37:00 +0200
Subject: [PATCH] add list with checkboxes

---
 .gitignore        |  1 +
 recipes/test.html | 48 +++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 49 insertions(+)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..485dee6
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.idea
diff --git a/recipes/test.html b/recipes/test.html
index 9cdead4..df8330f 100644
--- a/recipes/test.html
+++ b/recipes/test.html
@@ -114,5 +114,53 @@ <h2>Instructions</h2>
 
     <h2>Nutrition</h2>
     <p><strong>Calories:</strong> 200 | <strong>Fat:</strong> 10g | <strong>Carbs:</strong> 25g | <strong>Protein:</strong> 3g</p>
+
+    <!-- Button to display ingredients list -->
+    <button id="showIngredientsBtn">Show Ingredients</button>
+
+    <!-- Ingredients Checklist -->
+    <h2>Ingredients Checklist</h2>
+    <ul id="ingredientsList" style="display: none;"></ul>
+    
+    <script>
+        // Function to extract ingredients from JSON-LD
+        function getIngredientsFromJSONLD() {
+            const scriptTag = document.querySelector('script[type="application/ld+json"]');
+            const jsonLD = JSON.parse(scriptTag.textContent);
+            return jsonLD.recipeIngredient || [];
+        }
+
+        // Function to display ingredients with checkboxes
+        function displayIngredients() {
+            const ingredients = getIngredientsFromJSONLD();
+            const ingredientsList = document.getElementById('ingredientsList');
+            ingredientsList.innerHTML = ''; // Clear any previous list items
+
+            ingredients.forEach(ingredient => {
+                const listItem = document.createElement('li');
+                const checkbox = document.createElement('input');
+                checkbox.type = 'checkbox';
+
+                // Add event listener to strike through text when checkbox is checked
+                checkbox.addEventListener('change', function() {
+                    if (this.checked) {
+                        listItem.style.textDecoration = 'line-through';
+                    } else {
+                        listItem.style.textDecoration = 'none';
+                    }
+                });
+
+                listItem.appendChild(checkbox);
+                listItem.appendChild(document.createTextNode(ingredient));
+                ingredientsList.appendChild(listItem);
+            });
+
+            // Display the ingredients list
+            ingredientsList.style.display = 'block';
+        }
+
+        // Event listener for the button click
+        document.getElementById('showIngredientsBtn').addEventListener('click', displayIngredients);
+    </script>
 </body>
 </html>