The goal of this project was to create a digital recipe library capable of loading and displaying information like title, cuisine, time, and ingredients for each recipe. Additionally, users should have the ability to filter recipes based on cuisine or author, and sort the recipes alphabetically.
-
Make sure that filter dropdowns, sort and search components has the necessary elements.
-
Define array of recipes and create a function for loading recipes.
-
Create a function that takes an array of recipes and displays them on the page.
-
Create a function to load filter options dynamically. This function should take a targetId (cuisine or author) and generate checkboxes based on the unique values in the recipes array.
-
Create a function to filter recipes based on the selected checkboxes. This function should be triggered when a checkbox changes state.
-
Attach event listeners to the filter dropdown titles(Cusine, Author, etc) to trigger the function that loads filter options.
Attach event listeners to the checkboxes to trigger the function that filters recipes.
It was a challenge implementing dynamic filtering for cuisine types and authors, involving tasks such as managing checkbox events, updating the recipy filter array, and applying logic to dynamically filter recipes based on multiple selected checkboxes.
If I had more time I would store the checked values in the localStorage to save the user selection.