Making the Guide Interactive

Making the Guide Interactive | CodeSignal Learn

Introduction: Making the Guide Interactive

Welcome back! In the last lesson, you built a step-by-step cooking guide page using a TypeScript component and its template. You set up the structure, added navigation buttons, and connected styles and logic within the component. 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 TypeScript to make the guide page interactive within your component. By the end, your users will be able to move through recipe steps, hear instructions read aloud, use timers, and see updates instantly — all without reloading the page. This will make your cooking helper much more user-friendly and fun to use.

Quick Recap: The Static Guide Page

Fetching and Showing Recipe Data

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Step Navigation with Buttons

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. Here’s how you can implement this in your component: TypeScript // guide.component.ts onPrevStep(): void {if (this.currentIndex > 0) {this.currentIndex -= 1;}} onNextStep(): void {if (this.currentIndex < this.steps.length - 1) {this.currentIndex += 1;} else {// End of recipe this.completed = true;}} // guide.component.ts onPrevStep(): void {if (this.currentIndex > 0) {this.currentIndex -= 1;}} onNextStep(): void {if (this.currentIndex < this.steps.length - 1) {this.currentIndex += 1;} else {// End of recipe this.completed = true;}} And update your template to use these methods and properties: HTML <!-- guide.component.html --> <div class="step-controls"> <button (click)="onPrevStep()" [disabled]="currentIndex === 0">\leftarrow Prev</button> <button (click)="onNextStep()" [disabled]="completed"> {{ currentIndex === steps.length - 1 ? 'Finish' : 'Next \to' }} </button> </div> <p *ngIf="completed">Recipe completed!</p> <!-- guide.component.html --> <div class="step-controls"> <button (click)="onPrevStep()" [disabled]="currentIndex === 0">\leftarrow Prev</button> <button (click)="onNextStep()" [disabled]="completed"> {{ currentIndex === steps.length - 1 ? 'Finish' : 'Next \to' }} </button> </div> <p *ngIf="completed">Recipe completed!</p> Explanation: The onPrevStep and onNextStep methods update the currentIndex property. The template disables the Previous button on the first step and changes the Next button to Finish on the last step. When the recipe is completed, a message is shown. Output: You can now click Next and Previous to move through the steps. The Previous button is disabled on the first step, and Next becomes Finish on the last step.

Text-to-Speech

We want the user to be able to hear each step read aloud. We can add a button to play the current step using a text-to-speech API. Add this method to your component: TypeScript // guide.component.ts audio?: HTMLAudioElement; playCurrentTts(): void {if (!this.steps.length) {return;} const step = this.steps[this.currentIndex]; this.audio?.pause(); this.audio = new Audio(`/api/tts?text=${encodeURIComponent(step)}`); void this.audio.play().catch(() => {});} // guide.component.ts audio?: HTMLAudioElement; playCurrentTts(): void {if (!this.steps.length) {return;} const step = this.steps[this.currentIndex]; this.audio?.pause(); this.audio = new Audio(`/api/tts?text=${encodeURIComponent(step)}`); void this.audio.play().catch(() => {});} And add a button to your template: HTML <button (click)="playCurrentTts()">🔊 Hear Step</button> <button (click)="playCurrentTts()">🔊 Hear Step</button> Explanation: The playCurrentTts method creates an audio object with the current step text and plays it. The template provides a button to trigger this method.

Timers

If a step mentions a time (like "Bake for 10 minutes"), we want to show a countdown timer. We can implement this using component properties and methods. Add these properties and methods to your component: TypeScript// guide.component.ts timerVisible = false; timerRemaining = 0; private timerId?: ReturnType<typeof setInterval>; private startTimerIfNeeded(step: string): void { const match = step.match(/(\d+)\s*(minutes?|seconds?)/i); if (!match) { this.stopTimer(); return; } let totalSeconds = parseInt(match[1], 10); if (/min/i.test(match[2])) { totalSeconds *= 60; } this.timerVisible = true; this.timerRemaining = totalSeconds; this.timerId = setInterval(() => { this.timerRemaining -= 1; if (this.timerRemaining <= 0) { this.stopTimer(); } }, 1000); } private stopTimer(): void { if (this.timerId !== undefined) { clearInterval(this.timerId); this.timerId = undefined; } this.timerVisible = false; this.timerRemaining = 0; }// guide.component.ts timerVisible = false; timerRemaining = 0; private timerId?: ReturnType<typeof setInterval>; private startTimerIfNeeded(step: string): void { const match = step.match(/(\d+)\s*(minutes?|seconds?)/i); if (!match) { this.stopTimer(); return; } let totalSeconds = parseInt(match[1], 10); if (/min/i.test(match[2])) { totalSeconds *= 60; } this.timerVisible = true; this.timerRemaining = totalSeconds; this.timerId = setInterval(() => { this.timerRemaining -= 1; if (this.timerRemaining <= 0) { this.stopTimer(); } }, 1000); } private stopTimer(): void { if (this.timerId !== undefined) { clearInterval(this.timerId); this.timerId = undefined; } this.timerVisible = false; this.timerRemaining = 0; } Update your navigation methods to trigger the timer: TypeScript// guide.component.ts onPrevStep(): void { if (this.currentIndex > 0) { this.currentIndex -= 1; this.updateStepEffects(); } } onNextStep(): void { if (this.currentIndex < this.steps.length - 1) { this.currentIndex += 1; this.updateStepEffects(); } else { this.completed = true; this.stopTimer(); } } private updateStepEffects(): void { const step = this.steps[this.currentIndex]; this.playCurrentTts(); this.startTimerIfNeeded(step); }// guide.component.ts onPrevStep(): void { if (this.currentIndex > 0) { this.currentIndex -= 1; this.updateStepEffects(); } } onNextStep(): void { if (this.currentIndex < this.steps.length - 1) { this.currentIndex += 1; this.updateStepEffects(); } else { this.completed = true; this.stopTimer(); } } private updateStepEffects(): void { const step = this.steps[this.currentIndex]; this.playCurrentTts(); this.startTimerIfNeeded(step); } And update your template to show the timer: HTML<!-- guide.component.html --> <div class="timer-box" *ngIf="timerVisible"> <p><strong>Timer:</strong> <span>{{ timerRemaining }}</span> seconds remaining</p> </div><!-- guide.component.html --> <div class="timer-box" *ngIf="timerVisible"> <p><strong>Timer:</strong> <span>{{ timerRemaining }}</span> seconds remaining</p> </div> Explanation: The startTimerIfNeeded method checks if the step mentions a time and starts a countdown if needed. The stopTimer method clears any running timer. The updateStepEffects method is called whenever the step changes to handle TTS and timers. The template displays the timer when timerVisible is true.

Making the Guide Interactive

Introduction: Making the Guide Interactive

Quick Recap: The Static Guide Page

Fetching and Showing Recipe Data

Join the 1M+ learners on CodeSignal

Step Navigation with Buttons

Text-to-Speech

Timers

Summary and What’s Next