Adding Simulated Functionality with JavaScript

Introduction and Lesson Overview

Welcome back! In our previous lessons, we laid the groundwork for our travel planner application by creating a RESTful API with Flask and rendering a basic HTML page. Now, we are ready to enhance the user experience by adding client-side JavaScript . This lesson will focus on implementing JavaScript to handle form submissions, simulate API calls, and dynamically render content. By the end of this lesson, you will be able to create a more interactive and engaging application that responds to user input in real-time.

Reviewing the Project Structure

Before we dive into linking JavaScript to our HTML, let's focus on the specific file we are creating and its location within the project structure. text app/ ├── main.py ├── travel_planner/ ├── static/ │ └── js/ │ └── travel-planner.js # JavaScript file for enhancing interactivity └── templates/ └── index.html app/ ├── main.py ├── travel_planner/ ├── static/ │ └── js/ │ └── travel-planner.js # JavaScript file for enhancing interactivity └── templates/ └── index.html We are creating the travel-planner.js file inside the static/js/ directory. This file will contain the JavaScript code responsible for enhancing the interactivity of our travel planner application. By placing it in the static/js/ directory, we ensure that it is served correctly by Flask as a static asset, allowing us to link it to our index.html file for client-side functionality.

Linking JavaScript to HTML

Now that we have created the travel-planner.js file in the static/js/ directory, it's time to link this JavaScript file to our HTML page. This is done by including a <script> tag in the index.html file. In Flask, we use the url_for function to correctly reference the static JavaScript file. This ensures that our JavaScript code is loaded and ready to enhance the page's functionality. Here's how your index.html file should look, with comments indicating where the rest of the code should be: HTML<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Travel Planner</title> </head> <body> <!-- Form for trip planning... --> <!-- Results Section... --> <!-- Link to the JavaScript file for handling form submission and rendering results --> <script src="{{ url_for('static', filename='js/travel-planner.js') }}"></script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Travel Planner</title> </head> <body> <!-- Form for trip planning... --> <!-- Results Section... --> <!-- Link to the JavaScript file for handling form submission and rendering results --> <script src="{{ url_for('static', filename='js/travel-planner.js') }}"></script> </body> </html> This line of code is placed just before the closing </body> tag in your HTML file, ensuring that the JavaScript is loaded after the HTML content. By linking the JavaScript file, we enable the dynamic features and interactivity that will enhance the user experience of our travel planner application.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

text

app/
├── main.py
├── travel_planner/
├── static/
│   └── js/
│       └── travel-planner.js  # JavaScript file for enhancing interactivity
└── templates/
    └── index.html

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Travel Planner</title>
</head>
<body>
    <!-- Form for trip planning... -->

    <!-- Results Section... -->

    <!-- Link to the JavaScript file for handling form submission and rendering results -->
    <script src="{{ url_for('static', filename='js/travel-planner.js') }}"></script>
</body>
</html>

JavaScript

// Add an event listener to the form to handle submissions
document.getElementById('tripForm').addEventListener('submit', async function(e) {
    // Prevent the default form submission behavior
    e.preventDefault();

    // Show loading spinner and results card
    document.getElementById('loadingSpinner').style.display = 'block';
    document.getElementById('resultsCard').style.display = 'block';
    document.getElementById('resultsContent').innerHTML = '';

    // Further processing of the form data will be done here...
});

// Add an event listener to the form to handle submissions
document.getElementById('tripForm').addEventListener('submit', async function(e) {
    // Prevent the default form submission behavior
    e.preventDefault();

    // Show loading spinner and results card
    document.getElementById('loadingSpinner').style.display = 'block';
    document.getElementById('resultsCard').style.display = 'block';
    document.getElementById('resultsContent').innerHTML = '';

    // Further processing of the form data will be done here...
});

JavaScript

document.getElementById('tripForm').addEventListener('submit', async function(e) {
    // Code to prevent default and initialize UI...

    // Create a FormData object to easily access form input values
    const formData = new FormData(this);

    // Extract the city name from the form data
    const city = formData.get('city');

    // Extract and convert the number of days to an integer
    const days = parseInt(formData.get('days'));

    // Extract and convert the number of attractions per day to an integer
    const attractionsPerDay = parseInt(formData.get('attractions_per_day'));

    // Further processing of the form data will be done here...
});

document.getElementById('tripForm').addEventListener('submit', async function(e) {
    // Code to prevent default and initialize UI...

    // Create a FormData object to easily access form input values
    const formData = new FormData(this);

    // Extract the city name from the form data
    const city = formData.get('city');

    // Extract and convert the number of days to an integer
    const days = parseInt(formData.get('days'));

    // Extract and convert the number of attractions per day to an integer
    const attractionsPerDay = parseInt(formData.get('attractions_per_day'));

    // Further processing of the form data will be done here...
});

JavaScript

document.getElementById('tripForm').addEventListener('submit', async function(e) {
    // Code to prevent default, initialize UI, and handle form data...

    try {
        // Simulate a delay of 2 seconds to mimic an API call
        await new Promise(resolve => setTimeout(resolve, 2000));

        // Simulate and process API response data...

    } catch (error) {
        document.getElementById('resultsContent').innerHTML = `
            <div>
                An error occurred while planning your trip. Please try again.
            </div>
        `;
    } finally {
        // Hide loading spinner
        document.getElementById('loadingSpinner').style.display = 'none';
    }
});

document.getElementById('tripForm').addEventListener('submit', async function(e) {
    // Code to prevent default, initialize UI, and handle form data...

    try {
        // Simulate a delay of 2 seconds to mimic an API call
        await new Promise(resolve => setTimeout(resolve, 2000));

        // Simulate and process API response data...

    } catch (error) {
        document.getElementById('resultsContent').innerHTML = `
            <div>
                An error occurred while planning your trip. Please try again.
            </div>
        `;
    } finally {
        // Hide loading spinner
        document.getElementById('loadingSpinner').style.display = 'none';
    }
});

JavaScript

try {
    // Simulate a delay of 2 seconds to mimic an API call
    await new Promise(resolve => setTimeout(resolve, 2000));

    // Simulate API response data
    const data = {
        city: city,
        days: days,
        daily_plans: []
    };
    
    // Create simple daily plans
    for (let i = 1; i <= days; i++) {
        // Initialize an empty array to store the attractions for this day
        const attractions = [];
        // Generate the specified number of attractions for this day
        for (let j = 1; j <= attractionsPerDay; j++) {
            attractions.push({
                name: `${city} Attraction ${j}`,
                category: "Tourist Spot",
                estimated_duration: "2 hours",
                address: `Some Street`,
                description: `Description for attraction ${j} in ${city}.`
            });
        }
        // Create a daily plan object for each day
        data.daily_plans.push({
            day_number: i,
            attractions: attractions,
            meal_suggestions: [
                `Breakfast at ${city} Café`,
                `Lunch at ${city} Bistro`,
                `Dinner at ${city} Restaurant`
            ]
        });
    }
    
    // Add overall travel tips 
    data.overall_tips = `Travel tips for ${city}: Bring comfortable shoes and a map.`;

    // Displaying the simulated data will be done here...
}

JavaScript

document.getElementById('tripForm').addEventListener('submit', async function(e) {
    // Code to prevent default, initialize UI, handle form data, simulate delay...

    try {
        // Simulate a delay and generate response data...

        // Initialize the HTML string for the itinerary container
        let html = '<div class="itinerary">';
        
        // Check if daily plans exist and are in an array format
        if (data.daily_plans && Array.isArray(data.daily_plans)) {
            // Further processing of daily plans will be done here...
        } else {
            // Display a message if no itinerary data is available
            html += '<div>No itinerary data available</div>';
        }

        // Code to inject the HTML content into the results section...
    } catch (error) {
        // Error handling...
    } finally {
        // Hide loading spinner...
    }
});

document.getElementById('tripForm').addEventListener('submit', async function(e) {
    // Code to prevent default, initialize UI, handle form data, simulate delay...

    try {
        // Simulate a delay and generate response data...

        // Initialize the HTML string for the itinerary container
        let html = '<div class="itinerary">';
        
        // Check if daily plans exist and are in an array format
        if (data.daily_plans && Array.isArray(data.daily_plans)) {
            // Further processing of daily plans will be done here...
        } else {
            // Display a message if no itinerary data is available
            html += '<div>No itinerary data available</div>';
        }

        // Code to inject the HTML content into the results section...
    } catch (error) {
        // Error handling...
    } finally {
        // Hide loading spinner...
    }
});

JavaScript

if (data.daily_plans && Array.isArray(data.daily_plans)) {
    // Iterate over each day's plan to construct the itinerary details
    data.daily_plans.forEach((day) => {
        // Code to construct HTML for each day...
    });
    
    // Code to add overall tips...
} else {
    html += '<div>No itinerary data available</div>';
}

if (data.daily_plans && Array.isArray(data.daily_plans)) {
    // Iterate over each day's plan to construct the itinerary details
    data.daily_plans.forEach((day) => {
        // Code to construct HTML for each day...
    });
    
    // Code to add overall tips...
} else {
    html += '<div>No itinerary data available</div>';
}

JavaScript

if (data.daily_plans && Array.isArray(data.daily_plans)) {
    data.daily_plans.forEach((day) => {
        html += `
            <div class="day-plan">
                <h6>Day ${day.day_number}</h6>
                <ul>
                    ${day.attractions.map(attraction => `
                        <li>
                            <strong>${attraction.name}</strong><br>
                            ${attraction.category} • <small>${attraction.estimated_duration}</small><br>
                            ${attraction.address ? `<small>${attraction.address}</small><br>` : ''}
                            ${attraction.description}
                        </li>
                    `).join('')}
                </ul>

                ${day.meal_suggestions ? `
                    <div>
                        <p>Meal Suggestions:</p>
                        <ul>
                            ${day.meal_suggestions.map(suggestion => `
                                <li>${suggestion}</li>
                            `).join('')}
                        </ul>
                    </div>
                ` : ''}
            </div>
        `;
    });
}

JavaScript

if (data.daily_plans && Array.isArray(data.daily_plans)) {
    // Code to iterate over each day's plan...
    
    // Add overall tips if available
    if (data.overall_tips) {
        html += `
            <div>
                <h6>Overall Tips</h6>
                <div>
                    ${data.overall_tips}
                </div>
            </div>
        `;
    }
} else {
    html += '<div>No itinerary data available</div>';
}

// Inject the HTML content into the results section
document.getElementById('resultsContent').innerHTML = html;

if (data.daily_plans && Array.isArray(data.daily_plans)) {
    // Code to iterate over each day's plan...
    
    // Add overall tips if available
    if (data.overall_tips) {
        html += `
            <div>
                <h6>Overall Tips</h6>
                <div>
                    ${data.overall_tips}
                </div>
            </div>
        `;
    }
} else {
    html += '<div>No itinerary data available</div>';
}

// Inject the HTML content into the results section
document.getElementById('resultsContent').innerHTML = html;

JavaScript

// Add an event listener to the form to handle submissions
document.getElementById('tripForm').addEventListener('submit', async function(e) {
    // Prevent the default form submission behavior
    e.preventDefault();

    // Show loading spinner and results card
    document.getElementById('loadingSpinner').style.display = 'block';
    document.getElementById('resultsCard').style.display = 'block';
    document.getElementById('resultsContent').innerHTML = '';

    // Further processing of the form data will be done here...
});

JavaScript

document.getElementById('tripForm').addEventListener('submit', async function(e) {
    // Code to prevent default and initialize UI...

    // Create a FormData object to easily access form input values
    const formData = new FormData(this);

    // Extract the city name from the form data
    const city = formData.get('city');

    // Extract and convert the number of days to an integer
    const days = parseInt(formData.get('days'));

    // Extract and convert the number of attractions per day to an integer
    const attractionsPerDay = parseInt(formData.get('attractions_per_day'));

    // Further processing of the form data will be done here...
});

JavaScript

document.getElementById('tripForm').addEventListener('submit', async function(e) {
    // Code to prevent default, initialize UI, and handle form data...

    try {
        // Simulate a delay of 2 seconds to mimic an API call
        await new Promise(resolve => setTimeout(resolve, 2000));

        // Simulate and process API response data...

    } catch (error) {
        document.getElementById('resultsContent').innerHTML = `
            <div>
                An error occurred while planning your trip. Please try again.
            </div>
        `;
    } finally {
        // Hide loading spinner
        document.getElementById('loadingSpinner').style.display = 'none';
    }
});

JavaScript

try {
    // Simulate a delay of 2 seconds to mimic an API call
    await new Promise(resolve => setTimeout(resolve, 2000));

    // Simulate API response data
    const data = {
        city: city,
        days: days,
        daily_plans: []
    };
    
    // Create simple daily plans
    for (let i = 1; i <= days; i++) {
        // Initialize an empty array to store the attractions for this day
        const attractions = [];
        // Generate the specified number of attractions for this day
        for (let j = 1; j <= attractionsPerDay; j++) {
            attractions.push({
                name: `${city} Attraction ${j}`,
                category: "Tourist Spot",
                estimated_duration: "2 hours",
                address: `Some Street`,
                description: `Description for attraction ${j} in ${city}.`
            });
        }
        // Create a daily plan object for each day
        data.daily_plans.push({
            day_number: i,
            attractions: attractions,
            meal_suggestions: [
                `Breakfast at ${city} Café`,
                `Lunch at ${city} Bistro`,
                `Dinner at ${city} Restaurant`
            ]
        });
    }
    
    // Add overall travel tips 
    data.overall_tips = `Travel tips for ${city}: Bring comfortable shoes and a map.`;

    // Displaying the simulated data will be done here...
}

JavaScript

document.getElementById('tripForm').addEventListener('submit', async function(e) {
    // Code to prevent default, initialize UI, handle form data, simulate delay...

    try {
        // Simulate a delay and generate response data...

        // Initialize the HTML string for the itinerary container
        let html = '<div class="itinerary">';
        
        // Check if daily plans exist and are in an array format
        if (data.daily_plans && Array.isArray(data.daily_plans)) {
            // Further processing of daily plans will be done here...
        } else {
            // Display a message if no itinerary data is available
            html += '<div>No itinerary data available</div>';
        }

        // Code to inject the HTML content into the results section...
    } catch (error) {
        // Error handling...
    } finally {
        // Hide loading spinner...
    }
});

JavaScript

if (data.daily_plans && Array.isArray(data.daily_plans)) {
    // Iterate over each day's plan to construct the itinerary details
    data.daily_plans.forEach((day) => {
        // Code to construct HTML for each day...
    });
    
    // Code to add overall tips...
} else {
    html += '<div>No itinerary data available</div>';
}

JavaScript

if (data.daily_plans && Array.isArray(data.daily_plans)) {
    data.daily_plans.forEach((day) => {
        html += `
            <div class="day-plan">
                <h6>Day ${day.day_number}</h6>
                <ul>
                    ${day.attractions.map(attraction => `
                        <li>
                            <strong>${attraction.name}</strong><br>
                            ${attraction.category} • <small>${attraction.estimated_duration}</small><br>
                            ${attraction.address ? `<small>${attraction.address}</small><br>` : ''}
                            ${attraction.description}
                        </li>
                    `).join('')}
                </ul>

                ${day.meal_suggestions ? `
                    <div>
                        <p>Meal Suggestions:</p>
                        <ul>
                            ${day.meal_suggestions.map(suggestion => `
                                <li>${suggestion}</li>
                            `).join('')}
                        </ul>
                    </div>
                ` : ''}
            </div>
        `;
    });
}

JavaScript

if (data.daily_plans && Array.isArray(data.daily_plans)) {
    // Code to iterate over each day's plan...
    
    // Add overall tips if available
    if (data.overall_tips) {
        html += `
            <div>
                <h6>Overall Tips</h6>
                <div>
                    ${data.overall_tips}
                </div>
            </div>
        `;
    }
} else {
    html += '<div>No itinerary data available</div>';
}

// Inject the HTML content into the results section
document.getElementById('resultsContent').innerHTML = html;

Introduction and Lesson Overview

Reviewing the Project Structure

Linking JavaScript to HTML

Join the 1M+ learners on CodeSignal

Preventing Default Form Submission and Initializing UI Elements

Handling Form Data with FormData Object

Simulating API Calls with Error Handling and UI Feedback

Simulating Response Data

Setting Up the Itinerary Display

Iterating Through Each Day's Plan

Building Detailed Daily Activities

Adding Travel Tips and Finalizing the Display

Recap and Summary