The Recipe App is a web application that allows users to discover, create, and share delicious recipes. It provides a user-friendly interface for managing recipes, searching for specific recipes based on ingredients, and composing new recipes.
-
Recipe Search: Users can search for recipes by entering specific ingredients. The app retrieves recipes that match the entered ingredients, providing users with various options for preparing meals based on the available ingredients.
-
Compose Recipe: The app allows users to compose their own recipes by providing a simple and intuitive form. Users can enter the recipe title, list of ingredients, and step-by-step instructions. The composed recipes are then saved and can be viewed and shared with others.
-
Featured Recipes: The app showcases a selection of featured recipes on the homepage. These recipes are curated and highlighted to provide inspiration to users and encourage them to explore new recipes.
-
Recipe Details: When users click on a recipe card, they can view the detailed information about that recipe, including the title, ingredients, instructions, and additional details. This allows users to get a comprehensive overview of each recipe before deciding to prepare it.
-
Contact Form: The app includes a contact form that enables users to get in touch with the app's administrators. Users can enter their name, email address, and a message to send inquiries, feedback, or any other communication related to the app.
CHEPKOECH FAITH
HTML is responsible for structuring the web page and defining its content using tags and elements. It creates the layout and hierarchy of the app's elements, such as headings, paragraphs, forms, images, and links. HTML ensures that the content is semantically structured and accessible to both users and search engines.
CSS is used to add visual styles, layout, and design to the HTML elements. It controls the presentation of the web page, including colors, fonts, spacing, backgrounds, and other visual properties. CSS ensures consistent styling across the app, enhancing its appearance and providing a visually pleasing user interface. JavaScript:
Adds interactivity, dynamic functionality, and data manipulation to the web app. It handles user interactions, such as form submissions, button clicks, and navigation. JavaScript enables DOM manipulation, allowing for the modification of HTML elements, their attributes, and content in response to user actions. It communicates with servers, APIs, or local data files (such as db.json) to fetch or save data, update the UI, and provide real-time interactivity.
db.json is a JSON (JavaScript Object Notation) file that serves as a simple database or data source for the web app. It stores structured data, such as recipes, in a JSON format with properties and values. The JavaScript code in the app can read, modify, and update the data in db.json using fetch requests or other appropriate techniques. This allows the app to retrieve recipe data, add new recipes, update existing recipes, and perform other CRUD (Create, Read, Update, Delete) operations on the data.
-
Clone the repository:
git clone git@github.com:fay-simotwo/Online-recipes.git
-
Navigate to the project directory: cd Movie-shop
-
Open the
index.htmlfile in your web browser.
-
Visit the app's homepage to browse through the featured recipes and get inspired by the various dishes.
-
Use the search functionality to find recipes based on specific ingredients. Enter the desired ingredients and click the search button to retrieve matching recipes.
-
Compose your own recipes by clicking on the "Compose Recipe" link. Fill in the recipe title, ingredients, and instructions in the provided form and click the "Save" button to add your recipe to the app.
-
Click on a recipe card to view the detailed information about that recipe, including the title, ingredients, instructions, and additional details.
-
If you have any inquiries, feedback, or suggestions, use the contact form to get in touch with the app's administrators. Fill in your name, email address, and message, and click the "Send Message" button to submit your communication.
Contributions are welcome! If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request.
- Email: chepfaith18@gmail.com
- Mattermost: @chepkoech.faith
- Linkedin: @faith-chepkoech
This project is licensed under the MIT License.