Angular and Typescript page with for loop and array

Question

I have a page that shows the result of a quiz and depends on the number of right answer, the user get some rewards. So, if the user get just one right answer, he will get one reward, the others will be blurred. If the user get two right answers, he will get two rewards, the others will be blurred, and so on. The total of questions is 5 and the total of rewards is 5 too.

HTML

<div id="container"><span>Você acertou </span><span style="color: black; text-align: center;">{{quizResult}}</span> <span id="spotlight"> pergunta(s). Agora é só aproveitar a(s) recompensa(s)!</span> </div> <span class="image"><img src="./assets/images/ticket1.png" alt="Muito abracos" id="recompensa1" [class.blur]="isBlur[0]" /></span> <span class="image"><img src="./assets/images/ticket2.png" alt="Beijo Calhiente" id="recompensa2" [class.blur]="isBlur[1]" /></span> <span class="image"><img src="./assets/images/ticket3.png" alt="Massagem" id="recompensa3" [class.blur]="isBlur[2]" /></span> <span class="image"><img src="./assets/images/ticket4.png" alt="Cafe na cama" id="recompensa4" [class.blur]="isBlur[3]" /></span> <span class="image"><img src="./assets/images/ticket5.png" alt="Jantar Romantico" id="recompensa5" [class.blur]="isBlur[4]" /></span> 

TYPESCRIPT

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-result', templateUrl: './result.component.html', styleUrls: ['./result.component.css'] }) export class ResultComponent implements OnInit { quizResult: number; isBlur: boolean[]; constructor() { this.quizResult = 0; this.isBlur = [] } ngOnInit(): void { this.quizResult = parseInt(localStorage.getItem("numCorrect") ?? "0", this.quizResult); const numberOfImages = document.querySelectorAll('app-result > .image').length; for (let i = 0; i < numberOfImages; i++) { this.isBlur[i] = this.quizResult < i + 1; } } } 

CSS

.blur{ filter: blur(5px); -webkit-filter: blur(5px); } 

Answer 1

First HTML formatting is unreadable. Might be because of SO, but it would probably be more readable if an element was split into multiple lines.

<div id="container"> <span>Você acertou </span> <span style="color: black; text-align: center;">{{quizResult}}</span> <span id="spotlight"> pergunta(s). Agora é só aproveitar a(s) recompensa(s)!</span> </div> <span class="image"> <img src="./assets/images/ticket1.png" alt="Muito abracos" id="recompensa1" [class.blur]="isBlur[0]" /> </span> <span class="image"> <img src="./assets/images/ticket2.png" alt="Beijo Calhiente" id="recompensa2" [class.blur]="isBlur[1]" /> </span> <span class="image"> <img src="./assets/images/ticket3.png" alt="Massagem" id="recompensa3" [class.blur]="isBlur[2]" /> </span> <span class="image"> <img src="./assets/images/ticket4.png" alt="Cafe na cama" id="recompensa4" [class.blur]="isBlur[3]" /> </span> <span class="image"> <img src="./assets/images/ticket5.png" alt="Jantar Romantico" id="recompensa5" [class.blur]="isBlur[4]" /> </span> 

Second, there is some fishy stuff going on in your component code.

export class ResultComponent implements OnInit { quizResult: number; isBlur: boolean[]; constructor() { this.quizResult = 0; this.isBlur = [] } ngOnInit(): void { this.quizResult = parseInt(localStorage.getItem("numCorrect") ?? "0", this.quizResult); // why not parseInt(string, 10)? const numberOfImages = document.querySelectorAll('app-result > .image').length; // Why are you selecting images from the DOM? you know it is 5 of them. // the length of isBlur is 0. for (let i = 0; i < numberOfImages; i++) { this.isBlur[i] = this.quizResult < i + 1; } } } 

With that in mind you can refactor the code in the following way:

export class ResultComponent implements OnInit { quizResult: number; isBlur: boolean[] = []; ngOnInit(): void { this.quizResult = parseInt(localStorage.getItem("numCorrect") ?? "0", 10) for (let i = 0; i < 5; i++) { this.isBlur[i] = this.quizResult < i + 1; } } } 

But you can notice, that there is a lot of duplication in HTML part. You can move this to TS code.

<div id="container"> <span>Você acertou </span> <span style="color: black; text-align: center;">{{quizResult}}</span> <span id="spotlight"> pergunta(s). Agora é só aproveitar a(s) recompensa(s)!</span> </div> <span class="image" *ngFor="let question of questions"> <img [src]="question.image" [alt]="question.alt" [id]="question.id" [class.blur]="question.incorrect" /> </span> 

export class ResultComponent implements OnInit { quizResult: number; questions = [ { image: './assets/images/ticket1.png', alt: 'Muito abracos', id: 'recompensa1', }, ... ]; ngOnInit(): void { this.quizResult = parseInt(localStorage.getItem("numCorrect") ?? "0", 10) for (let i = 0; i < this.questions.length; i++) { this.questions[i].incorrect = this.quizResult < i + 1; } } } 

This now opens you to the possibility of having questions loaded from somewhere else and you are not tied to the DOM anymore for the number of questions.