LesPetitsPlats - recipe search app

This is a solution to the OpenClassrooms project. OpenClassrooms is one of the largest online schools in Europe, based in Paris.

Overview

Screenshot

The challenge

Users should be able to:

• Filter recipes using the search bar
• Filter recipes using select menus
• Search for items in the select menu
• Remove filters from recipes by closing filtered tags
• View the optimal layout for the website on desktop

Links

• Live Site URL: See the live page here

My process

Built with

• Vanilla JavaScript
• JavaScript modules
• HTML DOM API
• CSS3, HTML5 & BEM methodology

What I learned

• use JavaScript modules (import, export)
• develop filtering and sorting functionality
• to create an array with data instead of JSON which allow to iterate through it without the need of fetching

Continued development

• divide the code into more files (currently, only one JS file)
• move helper functions to a separate JS file (e.g., normalise())
• apply the DRY principle by creating more efficient functions
• create a function that allows closing the dropdown after clicking anywhere on the page
• ensure the website is fully accessible
• add photos to the recipes