hola tengo un problema con los ejercicios de codility en la plaza, estoy tratando de hacer algo 2 dias y nada nadie tiene solucion
Cree un componente de botón Me gusta usando Angular (v4). Exporte el componente del botón Me gusta como "LikeButtonComponent" (clase de exportación LikeButtonComponent).
Requisitos:
Debería haber un botón Me gusta: el contenido del botón Me gusta debe tener el siguiente formato: "Me gusta | 100", donde 100 es el número total de Me gusta. Debe tener una clase de "botón me gusta". Envuelva el número de Me gusta en un lapso con una clase de "me gusta-contador". El número inicial de Me gusta en el contador debe ser 100.
Los usuarios pueden agregar un me gusta. Al hacer clic en el botón: El número de Me gusta debería aumentar en uno. El botón Me gusta debe tener una clase "me gusta" además de la clase "botón me gusta".
Los usuarios pueden deshacer su Me gusta haciendo clic nuevamente en el botón: El contador debería disminuir en uno. La clase "Me gusta" debe eliminarse.
y codigo
import { Component, Injectable } from '@angular/core'; @Component({ selector: 'like-button', template: ` <h2> <span ><button (click)="buttonCliked()">Like |{{ likebutton.likeCounter }}</button></span > </h2> `, styles: [` .like-button { font-size: 1rem; padding: 5px 10px; color: #585858; } .liked { font-weight: bold; color: #1565c0; } `] }) export class LikeButtonComponent { public likeCounter = 100; constructor(private likeButton: LikeButton, private liked: Liked) {} buttonCliked(): void { this.changeLikeNumber(); this.toggleLike(); } private toggleLike(): void { this.liked.isLiked = !this.liked.isLiked; } private changeLikeNumber(): void { if (!this.liked.isLiked) { this.likeCounter = this.likeButton.increment(this.likeCounter); } else { this.likeCounter = this.likeButton.decrement(this.likeCounter); } } } export class LikeButton { constructor(private liked: Liked) {} increment(likeCounter: number) { likeCounter++; return likeCounter; } decrement(likeCounter: number) { likeCounter--; return likeCounter; } } export class Liked { isLiked = false; }Debe usar algunas herramientas angulares como ngClass para agregar una clase dinámica basada en el clic del usuario. Además, se realizará en una función en función de la condición de que al usuario ya le haya liked el botón o no:
Ejemplo de trabajo de stackblitz
Código:
import { Component, Injectable } from '@angular/core'; @Component({ selector: 'like-button', templateUrl: './button.component.html', styleUrls: ['./button.component.css'] }) export class ButtonComponent { likeCount= 100; isLiked = false; likeTheButton = () => { if(this.isLiked) this.likeCount--; else this.likeCount++; this.isLiked = !this.isLiked } } .like-button { font-size: 1rem; padding: 5px 10px; color: #585858; } .liked { font-weight: bold; color: #1565c0; } <button class="like-button" [ngClass]="{'liked':isLiked}" (click)="likeTheButton()"> Like | <span class="like-counter">{{ likeCount }}</span> </button>