Welcome back! In the last lesson, you built the main HTML template for your Cooking Helper landing page using Flask. You set up sections for searching recipes, displaying results, showing popular recipes, and a random recipe feature. You also linked your CSS and JavaScript files, preparing your page for interactivity.

In this lesson, you will learn how to use JavaScript to make your landing page interactive. By the end, you will be able to:

• Capture user input from the search form and display matching recipes
• Automatically show popular recipes when the page loads
• Add a “Surprise Me” button that fetches a random recipe
• Handle errors and give helpful feedback to users

Let’s get started and bring your Cooking Helper to life!

Before we dive in, let’s quickly remind ourselves how JavaScript connects to your HTML page. In the previous lesson, you linked a JavaScript file to your HTML using a <script> tag, like this:

This line tells the browser to load and run your search.js file. Everything you write in that file can now interact with your HTML elements, such as forms, buttons, and lists.

Now, let’s see how we can use JavaScript to make your page interactive.

The first feature we’ll add is searching for recipes by ingredients. We want users to type ingredients into a form, submit it, and see matching recipes.

We start by making sure our JavaScript waits until the page is fully loaded. Then, we find the search form and listen for when it is submitted.

• document.addEventListener('DOMContentLoaded', ...) waits until the HTML is loaded before running the code inside.
• getElementById('search-form') finds the search form on the page.

Next, we want to listen for the form’s submit event:

• addEventListener('submit', ...) runs the function when the form is submitted.
• e.preventDefault() stops the page from reloading, so we can handle the search with JavaScript.

Inside the submit event, we get the value the user typed:

• ingredientInput.value.trim() gets the text from the input and removes extra spaces.
• We split the text by commas, trim each ingredient, and remove any empty items.

Now, we send the ingredients to the server using fetch:

• fetch sends a POST request to /api/recipes/by-ingredients with the ingredients as JSON.
• await res.json() gets the response data as a JavaScript object.
• The try-catch block ensures we handle errors correctly.

Finally, we display the results:

• We clear any old results.
• If there are no recipes, we show a message.
• Otherwise, we create a list item for each recipe, linking to its page.
• We make sure the results section is visible.

Note: The links to individual recipes (/recipe/{id}) won’t work yet until we implement these pages in a later lesson.

Example Output:
If you search for “tomato, cheese,” you might see:

If there are no matches:

Next, let’s show popular recipes as soon as the page loads.

We create a function to get popular recipes from the server:

• fetch('/api/recipes/popular') asks the server for popular recipes.
• await res.json() gets the data.

We show the recipes in a list:

• We clear the old list.
• For each recipe, we create a list item with a link and its average rating.

Note: The links to individual recipes (/recipe/{id}) won’t work yet until we implement these pages in a later lesson.

At the end of our main function, we call:

This makes sure popular recipes appear as soon as the page is ready.

Example Output:

Now, let’s add a “Surprise Me” button that shows a random recipe.

First, we find the button and the container where we’ll show the recipe:

Then, we listen for clicks:

Inside the click event, we fetch a random recipe and display it:

• We fetch from /api/recipes/random.
• If there’s an error, we show a message.
• Otherwise, we display the recipe’s name, ingredients, and a link.

Note: The links to individual recipes (/recipe/{id}) won’t work yet until we implement these pages in a later lesson.

Example Output:

It’s important to let users know if something goes wrong or if there are no results.

• When searching, if no recipes are found, we must show:
  No matching recipes found.
• If there’s a problem loading popular recipes, we must show:
  Error loading popular recipes.
• If fetching a random recipe fails, we must show:
  Error fetching random recipe.

These messages help users understand what’s happening and what to do next.

In this lesson, you learned how to use JavaScript to make your Cooking Helper landing page interactive. You can now:

• Handle recipe searches by ingredients and show results
• Display popular recipes automatically when the page loads
• Add a “Surprise Me” button for random recipes
• Show helpful messages when things go wrong

Next, you’ll get to practice these skills with hands-on exercises. You’ll write and test your own code to reinforce what you’ve learned. Great job so far — let’s keep going!