Recipe Book Website

We are thrilled to present our Recipe Book website, a comprehensive platform designed for exploring, managing, and sharing recipes. This project showcases our team’s collaborative efforts and technical expertise, resulting in a visually engaging and user-friendly website.

Project Overview

Our Recipe Book website offers a seamless user experience with features such as recipe submission, ingredient and step management, and persistent data storage. The platform reflects a cohesive blend of design and functionality, catering to both casual users and cooking enthusiasts.

Team Contributions

Briana & Alexis

• Designed and implemented the CSS for the entire website, ensuring a cohesive and visually appealing user experience.
• Curated and applied a consistent color palette across all pages to enhance the site’s aesthetic.
• Developed the basic layout for each page, focusing on clarity and usability.
• Continuously adjusted CSS to accommodate new functionalities and refined the submission form for better user interaction.

Fernando

• Crafted the foundational HTML and JavaScript code, setting the stage for a dynamic website.
• Developed multiple HTML pages to optimize user experience and navigation.
• Implemented Local Storage functionality to ensure persistent data handling, resolving a critical bug that affected data updates.
• Enhanced the form’s user-friendliness with intuitive design and interactive elements.

Skye & Yaretzi

• Contributed to the HTML and JavaScript development, including the creation of essential JSON variables and for loops for efficient data handling.
• Improved site functionality and overall code cleanliness, addressing and fixing bugs related to the edit and delete buttons.

Key Features

• Recipe Submission Form: A user-friendly interface for adding recipes, including ingredients, steps, and an image URL.
• Dynamic Content Management: Interactive buttons to add or remove input fields for ingredients and steps.
• Persistent Data Storage: Leveraged Local Storage to save and retrieve recipes seamlessly.
• Edit and Delete Functionality: Intuitive options for managing existing recipes, ensuring flexibility for users.

Technologies Used

• HTML: Structured the website’s content and navigation.
• CSS: Styled the platform for a cohesive and visually appealing user experience.
• JavaScript: Powered the dynamic functionalities, including form interactivity and data management.
• Local Storage: Ensured persistent data handling across user sessions.

How to Run the Project

1. Clone the Repository:

   • Use the command git clone <repository-url> to clone the project to your local machine.

2. Navigate to the Project Directory:

   • Open the terminal and navigate to the project folder using cd <project-directory>.

3. Open the Website:

   • Locate the index.html file in the project directory.
   • Open the file in your preferred web browser to launch the website.

4. Start Using the Recipe Book:

   • Explore the platform, submit new recipes, and manage existing ones. The website leverages Local Storage, so all your data will persist across sessions.

Conclusion

This Recipe Book project demonstrates our ability to collaborate effectively, solve complex problems, and create an intuitive user experience. We are proud of the robust and visually engaging platform we built, and we hope it serves as a valuable resource for cooking enthusiasts everywhere.

Feel free to explore the Recipe Book website and share your favorite recipes with the world!