123 lines
3.5 KiB
JavaScript
123 lines
3.5 KiB
JavaScript
(() => {
|
|
// ===== 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();
|
|
})();
|