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 TypeScript in a component-based framework 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!

In a TypeScript component, you can handle keyboard shortcuts by listening for keydown events at the component level. This allows you to respond to user input in a clean and organized way, without directly manipulating the DOM.

Instead of adding a global event listener, you can use a decorator in your component to listen for keyboard events. Here’s how you can do it in your TypeScript component:

• The @HostListener('document:keydown', ['$event']) decorator tells the component to listen for keydown events on the whole document.
• 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).
• The component checks its own state (such as loading, error, or completed) to decide whether to handle the event.

Explanation:

• event.preventDefault(); stops the browser from performing its default action (like scrolling).
• this.playCurrentTts(); plays the text-to-speech for the current step.
• this.onNextStep(); and this.onPrevStep(); call the component’s navigation methods.

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.

In a TypeScript component, you can conditionally render the rating form in your template based on the component’s state. You can also handle user interactions (like hovering and clicking on stars) using component properties and methods.

Add the following block inside your main guide page template, after the step navigation and timer elements. The rating form will only appear when the user has completed the recipe, using conditional rendering:

• The rating form is only rendered when the completed property is true and there is no loading or error.
• The stars are generated from a stars array in the component.
• The appearance and interactivity of each star are controlled by component properties and event bindings.

When the user finishes the last step, the component updates its state to show the rating form:

• When the last step is done, the completed property is set to true.
• The template automatically shows the rating form because of the conditional rendering (@if (completed && !loading && !error)).
• There is no need to manually set styles or manipulate the DOM.

The rating form uses stars that the user can interact with. All the logic is handled in the component using properties and methods:

• The stars array is used to render five stars in the template.
• hoveredRating and selectedRating control the visual state of the stars.
• onStarHover and onStarLeave update the hoveredRating property for instant visual feedback.
• onRate handles the click event, submits the rating to the server, and updates the feedback message.
• The ratingLocked property disables further interaction after a rating is submitted.

Template Event Bindings:

• (mouseover)="onStarHover(star)" highlights stars on hover.

Add the following CSS to your guide.component.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, handled in your TypeScript component.
• Letting users rate the recipe at the end with a simple star system, using component state and template logic.

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!