Welcome back! In the last lesson, you built a step-by-step cooking guide page using Flask templates and HTML. You set up the structure, added navigation buttons, and connected styles and scripts. That was a great start, but the page is still static — it doesn’t respond to user actions yet.

In this lesson, you will learn how to use JavaScript to make the guide page interactive. By the end, your users will be able to move through recipe steps, hear instructions read aloud, use timers, and rate the recipe — all without reloading the page. This will make your cooking helper much more user-friendly and fun to use.

Let’s quickly remind ourselves what you built in the previous lesson. You created an HTML page that shows the recipe name, the current step, and navigation buttons like Previous and Next. You also linked a JavaScript file, but so far, it doesn’t do anything.

The first thing we want to do is load the recipe name and steps from the server and display them on the page. We’ll use JavaScript’s fetch function to get the steps from an API endpoint.

Let’s start by waiting for the page to load and then fetching the steps:

Explanation:

• We wait for the page to finish loading using DOMContentLoaded.
• We get references to the elements where we’ll show the recipe name and step text.
• The loadSteps function fetches the steps from the server and updates the page.
• If there’s an error, we show a message.
• We will implement the updateStep function later.

Output:
When the page loads, you should see the recipe name and the first step appear.

Now, let’s allow users to move between steps using the Previous and Next buttons. We’ll also make sure the Previous button is disabled on the first step, and the Next button changes to Finish on the last step.

Let’s add this logic:

Explanation:

• We add click event listeners to the navigation buttons.
• When Previous is clicked, we go back a step (if possible).
• When Next is clicked, we go forward a step or finish the recipe if it’s the last step.
• The updateStep function updates the step text and button states.

Output:
You can now click Next and Previous to move through the steps. The Previous button is disabled on the first step, and becomes on the last step.

We want the user to be able to hear each step read aloud. We’ll use a button to play the current step using a text-to-speech API.

Explanation:

• When this function is executed, we create an audio object with the step text and play it.
• This uses a backend API to generate the speech.
• We play the audio when we receive it.

If a step mentions a time (like "Bake for 10 minutes"), we want to show a countdown timer.

Explanation:

• When updating the step, we play the TTS and check if the step mentions a time.
• If it does, we start a countdown timer and show it on the page, using the runTimer function. The timer counts down every second and hides when finished.
• If the step doesn't contain a time, we clear the timer using the clearInterval function.

We also have to implement the auxiliary functions used:

Explanation:

• The runTimer function starts a countdown timer for the given duration (in seconds).
• It makes the timer box visible and sets the initial countdown value.
• If there’s already a running timer, it stops it to prevent multiple timers from running at once.
• It then starts a new interval that decreases timeLeft by 1 every second and updates the countdown display.

In this lesson, you learned how to make your cooking guide page interactive using JavaScript. You can now:

• Load and display recipe steps from the server
• Move between steps with navigation buttons
• Play step instructions out loud
• Show a timer when a step mentions time

Next, you’ll get to practice these features yourself. Try out the exercises to reinforce what you’ve learned and make sure you’re comfortable building interactive web pages with JavaScript!