Counter

counter.markdown

Counter

A Pen by Trey Piepmeier on CodePen.

License.

script.babel

const Counter = React.createClass({
	getInitialState() {        
        return { count: 0 };
    },

    incrementCount() {
        this.setState({ count: this.state.count + 1 });
    },
    
    decrementCount() {
        this.setState({ count: this.state.count - 1 });
    },
    
    reset() {
        this.setState({ count: 0 });
    },
    
    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button className="plus" onClick={this.incrementCount}><span>+</span></button>
                <button className="minus" onClick={this.decrementCount}><span>-</span></button>
                <button className="reset" onClick={this.reset}>Reset</button>
            </div>
        );
    }
})

ReactDOM.render(
    <Counter />,
    document.body
);

scripts

<script src="https://fb.me/react-15.1.0.min.js"></script>
<script src="https://fb.me/react-dom-15.1.0.min.js"></script>

style.scss

body {
    padding: 20px;
    display: flex;
}

div {
    margin: auto;
    text-align: center;
}

h1 {
    font-size: 100px;
}

button {
    align-items: center;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .5);
    color: white;
    display: block;
    font-weight: bold;
    margin: 0 auto;
    justify-content: space-between;
    outline: 0;
    user-select: none;
    cursor: pointer;
    
    &:active {
        box-shadow: 0 1px 2px rgba(0, 0, 0, .5);;
        position: relative;
        top: 2px;
    }    
    &.plus {
        background: green;
        font-size: 30px;
        height: 80px;
        width: 80px;
    }
    &.minus {
        margin-top: 20px;
        background: red;
        height: 40px;
        width: 40px;
    }
    &.reset {
        border-radius: 0;
        color: rgba(0, 0, 0, 0.5);
        font-size: 10px;
        margin-top: 65px;
        padding: 5px 10px;
        text-transform: uppercase;
    }
}