Welcome back, let's start writing some beautiful code. You may have noticed a couple of different things wrong here. You'll see that all of our classes have a check mark next to them, even though we haven't enrolled in any classes yet, and we certainly don't want to think that we're enrolled in all of the classes.

Also, I recently noticed how even though we haven't added any classes in, we still have the 'X' button to remove the classes.

The problem also comes up when we add a class, and then remove it with our button in the scheduler. It's a tragedy. But it's a super simple fix, and I'll show you.

Let's go into our libraryCourse.js. In an earlier video we built the schedule show what we added in our schedule with the 'X' button preprogrammed in. We can do the same thing here for the action button, as well as the icon.

libraryCourse.js

render() {
    this.id = `library-course-${this.props.id}`;
    return (
      <div id={this.id} className="library-course">
        <div className="library-course__title-check">
          <div className="library-course__title">{this.props.title}</div>
          { this.props.enrolled ? Icon("fas fa-check", "library-course__icon") : ''}
        </div>
        <Arrow
          callback={status => this.handleCallback(status)}
          id={this.props.id}
          className="library-course__arrow"
        />
        <Action
          id={this.props.id}
          onClick={() => this.props.toggleEnrolled(this.props.id)}
          className={`library-course__action ${this.props.enrolled ? 'action-remove' : ''}`}
        />

You can see that by using our ternary operator, we can set a simple conditional that will render what we want. Now our next problem is that the schedule isn't putting the classes where we need them to be.

We'll try to fix this in this video, but we might not be able to, depending on how complex the issue is. Let's commit our code just to be safe.

git status
git add .
git commit -m "rendering checkmark and add remove button based on enrollment status"

Now let's continue on. We'll need to work on our grid, because all we're doing is just centering it. What I want to do is have the title not be inside of the grid, I want it to be in it's own tag here.

Let's open up schedule.scss. With how it's set up, it's making it hard for the app to render in the correct space, so let's take the title out of the template.

schedule.scss

.schedule {
    grid-column: schedule-s/schedule-e;
    grid-row: 1/-1;
    position: relative;
    height: 100%;
    width: 100%;

    display: grid;
    grid-template-rows: [space-one-s] 1fr [space-one-e] repeat(5, 80px) [progress-s] 1fr [progress-e];
    grid-row-gap: 22px;
    align-items: center;
    justify-items: center;

    align-content: center;

    &__title {
        color: white;
        font-family: $font-alegreya;
        font-size: 20px;
        @include border-left;
    }
}

Wow, that move it up to the top, and if we test our classes, they're actually doing what they're supposed to. It looks pretty good. If we check our design, we can see that we need to move the title down just a little bit.

It looks like it's about 164px from the top, and about 56 away from the side. Let's set it to say align-content: start, and position our title.

schedule.scss

.schedule {
    grid-column: schedule-s/schedule-e;
    grid-row: 1/-1;
    position: relative;
    height: 100%;
    width: 100%;

    display: grid;
    grid-template-rows: [space-one-s] 1fr [space-one-e] repeat(5, 80px) [progress-s] 1fr [progress-e];
    grid-row-gap: 22px;
    align-items: center;
    justify-items: center;

    align-content: start;

    padding-top: 237px;

    &__title {
        position: absolute;
        top: 154px;
        color: white;
        font-family: $font-alegreya;
        font-size: 20px;
        @include border-left;
    }
}

If we look at it, we can see that it's looking really good. But if you look closely you can see that our font is a little too thick.

application

design

The nice thing about google fonts is that they usually offer a couple different options for each font. Unfortunatly, they don't seem to have that for the one font we need. That's too bad. What we'll do instead is change the font weight of our font in schedule.scss

schedule.scss

    &__title {
        position: absolute;
        top: 154px;
        color: white;
        font-family: $font-alegreya;
        font-size: 20px;
        font-weight: 300;
        @include border-left;
    }
}

I personally don't like the alegreya font, but we'll use it because it's what the design calls for. It actually doesn't look too bad.

Well, that basically completes this application. Obviously, there are still some design choices and very minor bugs, but I challenge you guys to fix those, since the point of this application was to teach you a bit about Redux. It's taken a bit because of styling, but all of the functionality is there. I especially like the scroll function in the library.

The next application that we're going to build is a property management application, and we'll be learning a lot about API's.

Let's commit our code.

git status
git add .
git commit -m "fixed remaining bugs"

now let's push our code up.

git push origin master
git push heroku master

We're good to go and that's all, folks, you can now show people three applications you built so far. We've built the Bottega scheduler course library application, Birthday Countdown application, and Madlibs.

Resources

Code at this stage