Here's a step-by-step guide on how to make the Recipe Organizer app work:
### **1. Set Up Your Project**
1. **Create Project Files**: Create a new folder for your project and add the following files:
- `index.html`
- `styles.css`
- `scripts.js`
2. **Add Code**: Copy and paste the provided code into each corresponding file.
### **2. Understanding the Code**
1. **HTML (`index.html`)**:
- **Form Section**: This is where you input new recipes. It includes fields for the recipe name, ingredients, and instructions.
- **Recipe List**: A section where added recipes will be displayed.
- **Shopping List**: A section where ingredients from recipes will be added.
2. **CSS (`styles.css`)**:
- **Styling**: Defines how the app looks, including layout, fonts, and colors. You can customize this to fit your design preferences.
3. **JavaScript (`scripts.js`)**:
- **Form Handling**: Listens for the form submission, processes the input data, and adds the recipe to the list.
- **Shopping List Functionality**: Adds ingredients from the recipe to the shopping list when the button is clicked.
### **3. How to Use the App**
1. **Add a Recipe**:
- Open `index.html` in your web browser.
- Fill out the form with the recipe name, ingredients (comma-separated), and instructions.
- Click the "Add Recipe" button.
- The recipe will appear in the Recipe List section below the form.
2. **Add Ingredients to Shopping List**:
- Each recipe item in the Recipe List has a button labeled "Add Ingredients to Shopping List."
- Click this button to add the recipe's ingredients to the Shopping List section.
### **4. Running the App**
1. **Open Your Browser**:
- Open your web browser (like Chrome, Firefox, or Edge).
2. **Open the HTML File**:
- Drag and drop `index.html` into the browser window or use the `File > Open File` menu to open it.
3. **Interact with the App**:
- Add recipes using the form.
- View recipes in the list.
- Add ingredients to the shopping list using the provided buttons.
### **5. Customizing and Expanding**
- **Enhance Functionality**: You can add features like editing or deleting recipes, filtering by category, or saving recipes to local storage.
- **Improve Styling**: Adjust the CSS to make the app visually appealing or responsive for different screen sizes.
- **Backend Integration**: For a more advanced setup, you might integrate with a backend server to store recipes and shopping lists persistently.
### **Troubleshooting**
- **Form Submission Issues**: Ensure all fields are filled out correctly. Use the browser's developer tools (F12) to check for errors in the console.
- **Shopping List Not Updating**: Make sure the `add To Shopping List` function is correctly receiving the ingredient list and updating the DOM.
Feel free to ask if you have any specific questions or run into issues while setting up or using the app!