Welcome back! So far, you have built a step-by-step cooking guide page that lets users follow recipes one step at a time. You have already added basic navigation, some interactivity, and styling. In this lesson, we will focus on making the guide page even more helpful and enjoyable for users.

Why do these improvements matter? When someone is cooking, they want the process to be smooth and easy. Features like keyboard shortcuts, and recipe ratings can make a big difference. They help users stay on track, move through steps quickly, and share feedback on recipes. By the end of this lesson, you will know how to add these features to your guide page.

Before we dive into the new features, let’s quickly remind ourselves of what you have already built:

• The guide page loads recipe steps from the server.
• Users can move between steps using "Prev" and "Next" buttons.
• The page uses JavaScript to update the step text and handle navigation.
• There is some basic styling to make the page look nice.

All of these features are already in place. In this lesson, we will build on top of them, so you do not need to change anything that is already working.

First, let’s make it easier for users to move through the recipe steps and play instructions using their keyboard. This is especially helpful if their hands are messy from cooking!

We add an event listener for keyboard events:

• When the user presses the Space bar, the current step is read aloud.
• Right Arrow moves to the next step (if possible).
• Left Arrow moves to the previous step (if possible).

Explanation:

• e.preventDefault(); stops the browser from performing its default action (like scrolling).
• playTTS(); plays the text-to-speech for the current step.
• nextBtn.click(); and prevBtn.click(); simulate clicking the navigation buttons.

Finally, let’s add a way for users to rate the recipe after they finish all the steps. This helps collect feedback and makes the app more interactive.

To include the rating form in your guide page, update your HTML and CSS as follows:

Add the following block inside your main guide page template, just after the step navigation and timer elements:

This block creates a hidden rating form that will only appear when the user finishes the recipe. It includes a heading, five clickable stars for rating, and a feedback message area. The style="display: none;" ensures the form is hidden by default.

When the user finishes the last step, the rating form appears:

• When the last step is done, the navigation buttons are disabled.
• The rating form is shown by setting ratingForm.style.display = 'block';.

The rating form uses stars that the user can click to select a rating:

• The code first selects all the <span> elements (the stars) inside the rating container.
• For each star:
  • Mouseover: When the user hovers over a star, all stars up to and including that one are given the hovered class, which changes their color. This gives instant visual feedback about the potential rating.
  • Mouseout: When the mouse leaves a star, the hovered class is removed from all stars, resetting their appearance.

Add the following CSS to your guide.css file to style the rating form and stars:

Explanation:

• .rating-form adds spacing and a border to separate the rating section from the rest of the page.
• .stars sets the size and default color of the stars, and makes them clickable.
• .stars span adds spacing between each star.
• The .hovered and .selected classes change the star color to gold when hovered or selected.
• .success styles the feedback message after submitting a rating.

In this lesson, you learned how to make your cooking guide page even more helpful by:

• Making it easier to move through steps and play instructions using keyboard shortcuts.
• Letting users rate the recipe at the end with a simple star system.

These improvements make the guide more user-friendly and interactive. Up next, you will get a chance to practice adding and using these features yourself. This hands-on practice will help you understand how each part works and how to use them in your own projects. Great job making it this far — let’s keep going!