Travel Planning App

—

by

Step 1: Setting Up Your Environment

Install Flask: Make sure you have Python installed. You can install Flask using pip:bashCopy codepip install Flask
Create a Project Directory:bashCopy codemkdir travel_planner cd travel_planner
Create Required Files:
- app.py (Flask app)
- templates/ (folder for HTML files)
- static/ (folder for CSS/JS files)

Step 2: Create the Flask App

`app.py`

pythonCopy codefrom flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)

# Simple in-memory storage for itineraries
itineraries = []

@app.route('/')
def home():
    return render_template('index.html', itineraries=itineraries)

@app.route('/add', methods=['POST'])
def add_itinerary():
    destination = request.form.get('destination')
    date = request.form.get('date')
    activities = request.form.get('activities')
    itineraries.append({'destination': destination, 'date': date, 'activities': activities.split(',')})
    return redirect(url_for('home'))

@app.route('/delete/<int:index>')
def delete_itinerary(index):
    if 0 <= index < len(itineraries):
        itineraries.pop(index)
    return redirect(url_for('home'))

if __name__ == '__main__':
    app.run(debug=True)

Step 3: Create HTML Templates

`templates/index.html`

htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
    <title>Travel Planner</title>
</head>
<body>
    <h1>Travel Planner</h1>
    <form action="/add" method="POST">
        <input type="text" name="destination" placeholder="Destination" required>
        <input type="date" name="date" required>
        <input type="text" name="activities" placeholder="Activities (comma-separated)" required>
        <button type="submit">Add Itinerary</button>
    </form>
    
    <h2>Your Itineraries</h2>
    <ul>
        {% for itinerary in itineraries %}
            <li>
                <strong>{{ itinerary.destination }}</strong> - {{ itinerary.date }}<br>
                Activities: {{ ', '.join(itinerary.activities) }} 
                <a href="{{ url_for('delete_itinerary', index=loop.index0) }}">Delete</a>
            </li>
        {% endfor %}
    </ul>
</body>
</html>

Step 4: Add Some Styles

`static/styles.css`

cssCopy codebody {
    font-family: Arial, sans-serif;
    margin: 20px;
}

h1 {
    color: #333;
}

form {
    margin-bottom: 20px;
}

input {
    margin: 5px;
}

Step 5: Run the App

Navigate to your project directory in the terminal and run:

bashCopy codepython app.py

Open your web browser and go to http://127.0.0.1:5000 to see your travel planning app in action!

Comments

Leave a Reply Cancel reply