Munchy
- [@laurencemb] (https://github.com/laurencemb)
- [@Maeevee] (https://github.com/Maeevee)
- [@laurabbity915] (https://github.com/laurabbity915)
- [@ammocodes] (https://github.com/ammocodes)
https://www.spoonacular.com for ingredients https://www.spoonacular.com get recipe information.
Presented live
This website allows users to search, sort, and view recipes, as well as save recipes to a "My recipes" page. The design uses HTML, CSS, and popular frameworks like Bootstrap for responsive navigation and recipe cards. A search bar enables users to fetch recipe data from a third-party API, and the footer includes an "About" section with information about the app and creators.
HTML and CSS Frameworks The website uses HTML and CSS to create a basic web page layout, with popular CSS frameworks such as Bootstrap and Line Awesome to enhance the design and functionality. Bootstrap provides pre-designed components for creating responsive navigation bars and buttons, while Line Awesome provides icons for visual flair.
Header and Navigation The header section of the page includes a navigation bar with a responsive layout for different screen sizes, including links to the app logo, "My Recipes" page, and placeholder links for "GitHub Repo" and "Contacts".
Search Bar and Recipe Cards The main section of the page includes a search bar for finding recipes, with the ability to search by recipe name or ingredient. When the user submits a search, the website uses JavaScript to fetch recipe data from a third-party API and display the results as recipe cards. The recipe cards include the recipe title, image, and other details, and can be saved to the user's saved recipes list.
Footer and About Section The footer section of the page includes an "About" section that provides information about the app and its creators, with a two-column layout for the content and links to the creators' GitHub profiles. The footer also uses CSS to set the background color and font styles, creating a consistent design theme throughout the page.
Technical Details The Munchy Recipe Search Website is built using HTML, CSS, JavaScript, and jQuery, with the help of popular CSS frameworks like Bootstrap and Line Awesome. The website uses a third-party API to retrieve recipe data and stores saved recipes in the user's local storage.
Conclusion The Munchy Recipe Search Website provides a simple, user-friendly interface for searching and saving recipes, with a responsive design and clear documentation for easy use.
Not applicable
To be added post experience.