Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

1.9K
Vistas
Codility like button angular

Hi I have a problem with the codility exercises on the square, I am trying to do something 2 days and nothing anyone has a solutions

Build a like button component using Angular (v4). Export the like button component as "LikeButtonComponent" (export class LikeButtonComponent).

Requirements:

There should be a like button: The content of the like button should be in the following format: "Like | 100", where 100 is the total number of likes. It should have a "like-button" class. Wrap the number of likes in a span with a "likes-counter" class. The initial number of likes in the counter should be 100.

Users can add a like. By clicking the button: The number of likes should increase by one. Like button should have "liked" class in addition to the "like-button" class.

Users can undo their like by clicking again on the button: The counter should decrease by one. "liked" class should be removed.

And code

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;
}
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

You have to use some Angular tools such as ngClass to add dynamic class based on user clicked. Also, it will be done in one function based on the condition of the user has already liked the button or not:

Working stackblitz example

Code:

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>

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda