Exercise8 - Frontend

Angular Like Button: Create a simple like button component with Angular 4.

问题概述：Angular语法按题目要求写一个like-button，初始化的题目里是有大部分代码框架的，需要完善的只是template和class LikeButtonComponent中的内容。

解法概述：对Codility这部分的前端题，我觉得他也只是简单的功能试水罢了。其实只要会Angular，应该没啥难度。实际上我也不太会Angular，我之前就写过一段React，但React、Angular、Vue三者的代码实现上其实大同小异，参考了一下网上的一些资料，基本就会写了。

import { Component } from '@angular/core';

@Component({
    selector: 'like-button',
    template: `
        <button class="like-button" [ngClass]="{'liked':isLiked}" (click)="likeTheButton()">
            Like | <span class="likes-counter">{{ initialCount }}</span>
        </button>
    `,
    styles: [`
        .like-button {
            font-size: 1rem;
            padding: 5px 10px;
            color:  #585858;
        }

        .liked {
            font-weight: bold;
            color: #1565c0;
        }
    `]
})

export class LikeButtonComponent {
    public initialCount = 100;
    
    isLiked=false;

    likeTheButton=()=>{
        // console.log(1);
        if (this.isLiked) {
            this.initialCount--;
        } else {
            this.initialCount++;
        }
        this.isLiked=!this.isLiked
    }
}

ReactLikeButton: Create a simple like button component with React.

问题概述：题干和第一题完全一样

解法概述：本题的差异仅仅是变成要给出React下的解法代码，直接给出solution如下：

import cx from 'classnames';
import { Component } from 'react';

export default class LikeButton extends Component {
    constructor(props){
        super(props)
        this.state = {
            initial_count : 100,
            isliked : false
        }
    }

    BtnonClick = (e) => {
        const {initial_count, isliked} = this.state;
        if(this.state.isliked) {
            this.setState({
                initial_count: initial_count-1,
                isliked: !isliked
            })
        } else {
            this.setState({
                initial_count: initial_count+1,
                isliked: !isliked
            })
        }
    }

    render() {
        let {initial_count, isliked} = this.state;
        const className = cx('like-button', {liked:isliked});
        return (
            <>
                <div>
                    <button className={className} onClick={this.BtnonClick}>
                        Like | <span className='likes-counter'>{initial_count}</span> 
                    </button>
                </div>
                <style>{`
                    .like-button {
                        font-size: 1rem;
                        padding: 5px 10px;
                        color:  #585858;
                    }
                   .liked {
                        font-weight: bold;
                        color: #1565c0;
                   }
                `}</style>
            </>
        );
    }
}