hamdysaad20 / food_receipe_project

Website that features a collection of your favorite recipes. Include photos, cooking tips, and nutritional information.(Collage Project)

Food Recipe Collection Website

Website that features a collection of your favorite recipes. Include photos, cooking tips, and nutritional information.

Navigation Bar

A navigation bar that allows visitors to easily navigate between different pages on the website.

This can be a fixed navigation bar that stays at the top of the page.

It should include links to the homepage, categories, about us, and contact us pages. It can also include a search bar.

Homepage

A landing page that provides an overview of the website, with featured recipes, search bar, and links to different categories.

This page can also include a brief description of the website and its purpose.

Categories

A section of the website that organizes recipes by category, such as appetizers, entrees, desserts, and so on.

Each category should have its own page with a list of relevant recipes.

Recipe Pages

A template for individual recipe pages that includes a photo, a list of ingredients, step-by-step instructions, and nutritional information. This page can also include cooking tips and variations on the recipe.

About Us

A page that provides information about the website's owners, such as their background and experience with cooking.

This page can also include a photo of the owners.

Contact Us

A page that provides contact information for the website's owners, such as email address or social media profiles.

Search Bar

A prominent search bar that allows visitors to search for recipes based on ingredients or dietary preferences. This can be integrated with the website's database to provide relevant results.

Footer

A footer that includes links to important pages, social media profiles, and copyright information.

How it's Works

let url= "/data/API/recipes" create a dynamic routing and pass some data, using only Vanilla JS, HTML, CSS

Data :

• recipe (have and ID number) -> at "food_shelf.js"
• recipe datailes (Search on the recipes using ID) -> at URL

The data at URL will be used in: at the front page the "recipes section will featch"

we used localStorage

to actually dynamically create a responsive website (when you using it, it feels that you used a framework)