AI Recipe Generator

This project is an AI-powered recipe generator that creates easy-to-follow recipes based on user instructions. The application is built with modern web technologies and leverages an AI API to generate the recipes.

Technologies Used

• HTML5: For the basic structure of the web page.
• CSS3: For styling the web page, including the use of Google Fonts.
• JavaScript: For the interactive functionality, including form handling and API requests.
• Typewriter.js: For animating the display of the generated recipe.
• Axios: For making HTTP requests to the SheCodes AI API.
• SheCodes AI API: For generating the recipes based on user input.
• Netlify: For hosting the project.
• GitHub: For version control and code hosting.

Project Structure

• index.html: The main HTML file that contains the structure of the web page.
• src/styles.css: The CSS file for styling the web page.
• src/script.js: The JavaScript file that handles the form submission, API requests, and displaying the generated recipes.

Features

• User Instructions Input: Users can input their desired recipe instructions (e.g., "Cake", "Cookies").
• Recipe Generation: The app sends the user instructions to the SheCodes AI API, which generates a recipe in basic HTML.
• Animated Display: The generated recipe is displayed on the web page with a typewriter animation effect.
• Responsive Design: The web page is designed to be responsive and works well on various devices.

How It Works

1. User Input: The user enters the type of recipe they want in an input field and submits the form.
2. API Request: The app sends a request to the SheCodes AI API with the user instructions and context.
3. Recipe Display: The response from the API is displayed on the web page with a typewriter animation.

Project Links

• Live Demo: Netlify
• Source Code: GitHub

Credits

This project was coded by Tracy Karanja and is open-sourced on GitHub. It uses the SheCodes AI API for generating recipes.