02_advanced/projekte/js-advanced-dashboard-template/scripts.js

@@ -0,0 +1,122 @@
+(() => {
+  // ===== DOM & VARIABLES =====
+  const RECIPES_URL = 'https://dummyjson.com/recipes';
+
+  const searchInput = document.querySelector('#search-input');
+  const searchButton = document.querySelector('#search-button');
+  const recipesTableBody = document.querySelector('#recipes-table tbody');
+  const loadingIndicator = document.querySelector('#loading');
+  const errorMessage = document.querySelector('#error-message');
+
+  const modal = document.querySelector('#recipe-modal');
+  const modalTitle = document.querySelector('#modal-title');
+  const modalImage = document.querySelector('#modal-image');
+  const modalCategory = document.querySelector('#modal-category');
+  const modalTime = document.querySelector('#modal-time');
+  const modalIngredients = document.querySelector('#modal-ingredients');
+  const modalInstructions = document.querySelector('#modal-instructions');
+  const closeModal = document.querySelector('.close');
+
+  let allRecipes = [];
+
+  // ===== INIT =====
+  const init = () => {
+    // TODO: Fetch and display all recipes on initial load
+
+    // Event Listeners
+    closeModal.addEventListener('click', closeModalEvent);
+    window.addEventListener('click', windowClickEvent);
+  };
+
+  // ===== EVENT LISTENERS =====
+  const searchButtonEvent = () => {
+    const query = searchInput.value.trim().toLowerCase();
+    if (query !== '') {
+      // TODO: Implement search functionality
+    } else {
+      // TODO: Display all recipes if search input is empty
+    }
+  };
+
+  // Close Modal Event
+  const closeModalEvent = () => {
+    modal.style.display = 'none';
+  };
+
+  // Close Modal when clicking outside the modal content
+  const windowClickEvent = (event) => {
+    if (event.target == modal) {
+      modal.style.display = 'none';
+    }
+  };
+
+  // ===== FUNCTIONS =====
+  // Fetches all recipes from the API and displays them.
+  const fetchAndDisplayRecipes = async () => {
+    showLoading(true);
+    showError(false, '');
+
+    try {
+      // TODO: Fetch data from API
+    } catch (error) {
+      console.error(error);
+      showError(true, 'An error occurred while fetching recipes.');
+    } finally {
+      showLoading(false);
+    }
+  };
+
+  // Searches for recipes by name and displays the results.
+  const searchRecipes = async (query) => {
+    showLoading(true);
+    showError(false, '');
+
+    try {
+      // TODO: Search for recipes by name
+    } catch (error) {
+      console.error(error);
+      showError(true, 'An error occurred while searching for recipes.');
+    } finally {
+      showLoading(false);
+    }
+  };
+
+  // Displays a list of recipes in the table.
+  const displayRecipes = (recipes) => {
+    clearTable();
+
+    // TODO: Iterate over the recipes and display them in the table
+  };
+
+  // Displays detailed information about a selected recipe in a modal.
+  const showRecipeDetails = (recipe) => {
+    // TODO: Calculate total preparation time
+    // TODO: Set image source
+    // TODO: Populate ingredients
+    // TODO: Show modal
+  };
+
+  // Shows or hides the loading indicator.
+  const showLoading = (show) => {
+    loadingIndicator.style.display = show ? 'block' : 'none';
+  };
+
+  // Displays or hides an error message.
+  const showError = (show, message) => {
+    if (show) {
+      errorMessage.textContent = message;
+      errorMessage.style.display = 'block';
+    } else {
+      errorMessage.textContent = '';
+      errorMessage.style.display = 'none';
+    }
+  };
+
+  // Clears the recipes table.
+  const clearTable = () => {
+    recipesTableBody.innerHTML = '';
+  };
+
+  // ===== CALL INIT =====
+  init();
+})();