Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

1.9K
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda