Welcome back! In the last lesson, you built the HTML structure for the Recipe View in your Cooking Helper app. That was an important first step, but right now, your page is still static — it doesn’t actually show any real recipe data yet.

In this lesson, you will learn how to use JavaScript to fetch recipe details from your backend and display them on the page. This will make your Recipe View interactive and dynamic, so users can see real recipe information.

By the end of this lesson, you’ll know how to:

• Get recipe data from your backend using JavaScript
• Update the page with the recipe’s title, rating, ingredients, and steps
• Handle errors if something goes wrong

Let’s get started!

Before we dive into JavaScript, let’s quickly remind ourselves of what you built in the previous lesson.

You created an HTML template for the recipe detail page. This template included elements like:

• A title area for the recipe name
• A spot for the average rating
• Lists for ingredients and steps
• A link to a step-by-step guide

You also linked a JavaScript file (for example, recipe.js) to this page. This setup is important because it gives us the “hooks” we need to update the page with real data.

Here’s a simplified example of what your HTML might look like:

Each element has an id so we can easily find and update it with JavaScript.

Now, let’s make the page dynamic by loading real recipe data from your backend.

The first step is to fetch the recipe data using JavaScript. We do this with the fetch function, which lets us make HTTP requests from the browser.

Let’s start by writing a function that gets the recipe data from the backend API.

Let’s break this down:

• fetch('/api/recipes/${RECIPE_ID}') sends a request to your backend to get the recipe details. ${RECIPE_ID} is a variable that should contain the ID of the recipe you want to display.
• await fetch(...) waits for the response from the server.
• await res.json() reads the response and turns it into a JavaScript object called data.

At this point, data contains all the information about the recipe, such as its name, average rating, ingredients, and steps.

Now that we have the recipe data, let’s update the page to show it.

First, we need to find the HTML elements we want to update. We can do this using document.getElementById.

Now, let’s update each part of the page step by step.

This sets the text of the title element to the recipe’s name.

This sets the link to the step-by-step guide for this recipe.

If the recipe has an average rating, we show it. If not, we display “Not yet rated.”

First, clear out any old ingredients:

Then, add each ingredient as a list item:

This creates a new <li> for each ingredient and adds it to the list.

First, split the steps into separate lines (if they are in a single string):

Then, add each step as a list item:

Now, your page will show each step in order.

Sometimes, things go wrong — maybe the server is down, or the recipe doesn’t exist. We need to handle these cases so the user isn’t left confused.

Let’s add error handling to our loadRecipe function:

• The try block runs the code that might fail.
• If there’s an error (for example, the server doesn’t respond), the catch block runs.
• We log the error to the console for debugging, and we show a simple message on the page so the user knows something went wrong.

In this lesson, you learned how to:

• Fetch recipe data from your backend using JavaScript
• Update the page with the recipe’s title, rating, ingredients, and steps
• Handle errors so users see a helpful message if something goes wrong

You now have the tools to make your Recipe View interactive and dynamic. Up next, you’ll get to practice these skills with hands-on exercises. This will help you get comfortable working with JavaScript, the DOM, and API data in your Cooking Helper app. Good luck!