Displaying Recipe Details

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:

<h1 id="recipe-title"></h1>
<p id="rating-text"></p>
<ul id="ingredient-list"></ul>
<ol id="step-list"></ol>
<a id="guide-link" href="#">View Step-by-Step Guide</a>

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

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.

const titleEl = document.getElementById('recipe-title');
const ratingEl = document.getElementById('rating-text');
const ingredientList = document.getElementById('ingredient-list');
const stepList = document.getElementById('step-list');
const guideLink = document.getElementById('guide-link');

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

titleEl.textContent = data.name;

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

guideLink.href = `/guide/${data.id}`;

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

ratingEl.textContent = data.average_rating
  ? `⭐ Average rating: ${data.average_rating}`
  : 'Not yet rated';

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

First, clear out any old ingredients:

ingredientList.innerHTML = '';

Then, add each ingredient as a list item:

data.ingredients.forEach(ingredient => {
  const li = document.createElement('li');
  li.textContent = ingredient;
  ingredientList.appendChild(li);
});

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):

const steps = data.steps.split('\n').filter(s => s.trim());
stepList.innerHTML = '';

Then, add each step as a list item:

steps.forEach(step => {
  const li = document.createElement('li');
  li.textContent = step;
  stepList.appendChild(li);
});

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:

async function loadRecipe() {
  try {
    const res = await fetch(`/api/recipes/${RECIPE_ID}`);
    const data = await res.json();

    // (Update the page as shown above)

  } catch (err) {
    console.error('Error loading recipe:', err);
    titleEl.textContent = 'Error loading recipe';
  }
}

• 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!