Let's go ahead into our code editor and close out all of the files. Next thing that we want to do is create a new file in our style folder and call it: addRemoveAction.scss. Then let's go and import this in our main.scss.

Let's go ahead and put in some styles here. So let's go to action.js and comment out a section and put in an <a>, just in case we mess up. Basically what we want to do here is have our onClick functionality and then our className. Then let's create a function in here. So just some small refactors here. Let's put in some additional functionality in our handleAction.

Action.js

class Action extends component {

    handleAction = function() {
        this.props.onClick()

        // document.getElementbyID('action').classList.add('')
    }.bind(this);

    render() {
        return (
            <a
                id='action'
                onClick={() => this.handleAction()}
                className={`${this.props.className} action`}>
            </a>
        )
    }
}

So from here, we will move onto intitial styles.

So for right now, it will not look like anything. You can't see it. It is functional but you can't see it.

So let's go ahead and add in some styles in our addRemoveAction:

addRemoveAction.scss

.action {
    background-color: black;
    font-size: 16px;
    height: 32px;
    width: 32px;

    border-radius: 16px;
    position: relative;
}

.action {
    &:after,
    &:before {
        content: '';
        display: block;
        background-color: white;

        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    &:before {
        height: 1em;
        width: 0.2em;
    }

    &:after {
        height: 0.2em;
        width: 1em;
    }
}

You will see that we have a plus sign now. That looks really good.

You will see that we have a problem here, and it is that it is not animating when we hit plus. So let's go ahead and end the video here and get that animation in the next video. So let's commit our code by saying git status, git add ., git commit -m "styled add remove button".

Resources

• Source Code