It's going to be a little bit different. I'm going to put that in my browser and see what it looks like. So it's up on Heroku and looking pretty crappy except for we know our grids are looking good.

So let's go into our code and let's close out the terminal and every file that we're in. Open up schedule.js and create a new style file and call it schedule.scss and let's just say .schedule.

Then let's go into main.scss and import it, and while we're at it let's import scheduleCourse.

let's create a new style file in your style folder called scheduleCourse.scss. Then we will say .schedule-course.

Now let's create our scheduleCourse in our schedule directory. New file: scheduleCourse.js and this is going to be similar to our libraryCourse.js so let's just copy our libraryCourse into our scheduleCourse. Now let's get rid of everthing except for our React imports and let's say:

scheduleCourse.js

import React, { Component } from "react";

class ScheduleCourse extends Component {
    render() {
        return (
            <div className="schedule-course">
                <label>{this.props.title}</label>
            </div>
        );
    }
}

Now let's go and head over to schedule.js and import scheduleCourse and make a few instances of it. We got our title and we have our Gradient. I'm just going to put it in between this, because our Gradient isn't going to belong on our grid. So let's say ScheduleCourse a couple times, and import it at the top.

So let's now set a grid on our schedule. So let's go into schedule.scss and say:

schedule.scss

.schedule {
    display: grid;
    grid-template-rows: 50px repeat(auto-fit, 1fr);
}

Now I want to reference back to library.scss and see what we did here. So we have the title and the courses. So what I want to do is make sure that it's 100 pixels and that we have the same amount of grid-row-gap, so let's go back to schedule and change it to:

schedule.scss

.schedule {
    display: grid;
    grid-template-rows: 100px repeat(auto-fit, 1fr);
    grid-row-gap: 22px;
}

We are likely going to change this, but I want to be consistent for now. Let's check our app and see what it looks like. It looks like we are not seeing anything, so let's inspect the element and see if the Gradient is covering it up. We just don't have titles in there, so let's go to our application and provide props to these items in our schedule.js.

So lets say:

schedule.js

<ScheduleCourse title={'Problem Solving'}/>
<ScheduleCourse title={'Problem Solving'}/>
<ScheduleCourse title={'Problem Solving'}/>

That should be good. That also looks good.

Now that finalizes that component, let's go ahead and build the progress tracker component in the next video. Then we will be done with the layout of the grid, and the base structure of our components. After that we will implement all of the functionality for the app, so let's get that progress tracker component in there. We won't build it out completely but I want to put something there so that we have something to come back to when we get to that piece of functionality.

So let's commit our code: git status, git add, git commit -m "built schedule course component and placed on grid", and git push origin master. I'm not going to push to Heroku. I'll see you in the next video.

Resources

Source Code