index.jsx

import ReactDOM from 'react-dom';
import React from 'react';

// Question 1

const Comment = (props) => {
    const { comment } = props;

    return (
        <div style={{display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', marginBottom: '20px'}}>
            <img style={{borderRadius: '50%'}} src={comment.author.profile} />
            <div style={{display: 'flex', flexDirection: 'column', width: '100%', marginLeft: '15px'}}>
                <div style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>
                    <span style={{fontWeight: '700'}}>{comment.author.name}</span>
                    <span style={{fontStyle: 'italic'}}>{comment.created_at}</span>
                </div>
                <p>{comment.text}</p>
            </div>
        </div>
    );
};

const CommentList = (props) => {
    const { comments } = props;

    return (
        <div>
            {comments.map((comment) => {
                return <Comment comment={comment} key={comment.id}/>;
            })}
        </div>
    );
};

class CommentForm extends React.Component {
    constructor(props) {
        super(props);

    }

    validate(event) {

    }

    send(event) {

    }

    render() {
        return (
            <form onSubmit={this.send.bind(this)} style={{display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', width: '100%'}}>
                <input type='text' placeholder='Say something nice' style={{flexGrow: 2}} />
                <button type='submit' style={{marginLeft: '5px'}}>Send</button>
            </form>
        );
    }
}

class CommentsView extends React.Component {
    constructor(props) {
        super(props);
    }

    send(text) {
    }

    render() {
        return (
            <div style={{width: '400px', margin: '0 auto'}}>
                <CommentList comments={this.props.comments} />
                <CommentForm onSend={this.send.bind(this)} />
            </div>
        );
    }
}

ReactDOM.render(
    <CommentsView comments={[
        {id: 1, author: {profile: 'http://lorempixel.com/100/100/', name: 'Evan'}, text: 'Hello', created_at: '12:34'},
        {id: 2, author: {profile: 'http://lorempixel.com/100/100/', name: 'Peter'}, text: 'Nice to meet ya!', created_at: '12:35'}
    ]}/>,
    document.getElementById('app')
);


// Question 2

class Card {
    constructor(suit, rank) {
        this.suit = suit;
        this.rank = rank;
    }
}

class Deck {
    constructor() {
        this.suits = ['♦', '♣', '♥', '♠'];
        this.ranks = ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A'];

        this.cards =  [];
        this.suits.forEach((suit) => {
            this.ranks.forEach((rank) => {
                this.cards.push(new Card(suit, rank));
            })
        })
    }

    shuffle() {
        for (let i = this.cards.length; i; i--) {
            let j = Math.floor(Math.random() * i);
            [this.cards[i - 1], this.cards[j]] = [this.cards[j], this.cards[i - 1]];
        }
    }

    dealCards(number) {
        if (number > 0 && number < this.suits.length * this.ranks.length) {
            return this.cards.splice(-number, number);
        }
    }

    addCards(cards) {
        const checkCard =(card) => {
            return (card instanceof Card) && !this.cards.includes(card);
        };

        if (cards.every((card) => {return checkCard(card)})) {
            this.cards.unshift(...cards);
        }
    }
}