Option 1: Flask (Python)

—

by

Step 1: Set Up Your Environment

Install Flask:

pip install Flask

Create a new Flask app: Create a file named app.py:

from flask import Flask, render_template, request, redirect app = Flask(__name__) recipes = [] @app.route('/') def index(): return render_template('index.html', recipes=recipes) @app.route('/add', methods=['POST']) def add_recipe(): recipe = { 'title': request.form['title'], 'ingredients': request.form['ingredients'].split(','), 'instructions': request.form['instructions'] } recipes.append(recipe) return redirect('/') if __name__ == '__main__': app.run(debug=True)

Step 2: Create Templates

Create a templates folder and inside it, create index.html:

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Recipe App</title> </head> <body> <h1>Recipe List</h1> <ul> {% for recipe in recipes %} <li> <strong>{{ recipe.title }}</strong><br> Ingredients: {{ recipe.ingredients | join(', ') }}<br> Instructions: {{ recipe.instructions }} </li> {% endfor %} </ul> <h2>Add a New Recipe</h2> <form method="POST" action="/add"> <input type="text" name="title" placeholder="Recipe Title" required><br> <textarea name="ingredients" placeholder="Ingredients (comma separated)" required></textarea><br> <textarea name="instructions" placeholder="Instructions" required></textarea><br> <button type="submit">Add Recipe</button> </form> </body> </html>

Step 3: Run Your App

Run your app with:

python app.py

Visit http://127.0.0.1:5000 in your web browser to see your recipe app!

Option 2: React (JavaScript)

Step 1: Set Up Your React App

Create a new React app:

npx create-react-app recipe-app cd recipe-app

Install necessary packages (optional, for form handling):

npm install axios

Step 2: Create Components

Create a RecipeForm.js component:

javascriptCopy codeimport React, { useState } from 'react'; const RecipeForm = ({ addRecipe }) => { const [title, setTitle] = useState(''); const [ingredients, setIngredients] = useState(''); const [instructions, setInstructions] = useState(''); const handleSubmit = (e) => { e.preventDefault(); addRecipe({ title, ingredients: ingredients.split(','), instructions }); setTitle(''); setIngredients(''); setInstructions(''); }; return ( <form onSubmit={handleSubmit}> <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Recipe Title" required /> <textarea value={ingredients} onChange={(e) => setIngredients(e.target.value)} placeholder="Ingredients (comma separated)" required /> <textarea value={instructions} onChange={(e) => setInstructions(e.target.value)} placeholder="Instructions" required /> <button type="submit">Add Recipe</button> </form> ); }; export default RecipeForm;

Create a RecipeList.js component:

import React from 'react'; const RecipeList = ({ recipes }) => { return ( <ul> {recipes.map((recipe, index) => ( <li key={index}> <strong>{recipe.title}</strong><br /> Ingredients: {recipe.ingredients.join(', ')}<br /> Instructions: {recipe.instructions} </li> ))} </ul> ); }; export default RecipeList;

Update App.js:

javascriptCopy codeimport React, { useState } from 'react'; import RecipeForm from './RecipeForm'; import RecipeList from './RecipeList'; const App = () => { const [recipes, setRecipes] = useState([]); const addRecipe = (recipe) => { setRecipes([...recipes, recipe]); }; return ( <div> <h1>Recipe App</h1> <RecipeForm addRecipe={addRecipe} /> <RecipeList recipes={recipes} /> </div> ); }; export default App;

Step 3: Run Your App

Run your app with:

npm start

Visit http://localhost:3000 in your web browser to see your recipe app!

Comments

Leave a Reply Cancel reply