This going to be a pretty quick video, we're going to be building a very simple component for the progress tracker.

Inside of it, we have a header tag and a percentage display. We're going to build that with a grid inside of that component. Inside of our schedule directory, we're going to create a new file called progressTracker.js and inside of it we'll build our normal component layout, with a div that has the className of progress-tracker, then export the component.

progressTracker.js

import React, { Component } from 'react';

class ProgressTracker extends Component {
  render() {
    return (
      <div className="progress-tracker">

      </div>
    )
  }
}

export default ProgressTracker;

From there we want to add a label and a div for our percentage.

progressTracker.js

import React, { Component } from 'react';

class ProgressTracker extends Component {
  render() {
    return (
      <div className="progress-tracker">
        <label className="progress-tracker__label">Progress Tracker</label>
        <div className="progress-tracker__percentage">
          0%
        </div>
      </div>
    )
  }
}

export default ProgressTracker;

Now let's put it in a grid. In our style directory, we want to create a new file named progressTracker.scss, and we'll display our grid with one row and two columns. If we check the design, we can see that there's also background fade, so let's throw that in here as well.

progressTracker.scss

.progress-tracker {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 76px;
    background-color: rgba(255,255,255,0.3);
}

Then we'll put the elements on the grid.

progressTracker.scss

.progress-tracker {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 76px;
    background-color: rgba(255,255,255,0.3);

    &__label {
        grid-column: 1/2;
    }
    &__percentage {
        grid-column: 2/3;
    }
}

Let's not forget to import it in our main.scss as well as in schedule.js.

main.scss

schedule.js

Okay, after we've done that we can see that it looks pretty good, but it appears to be extending it down a little too far, so we can change that in our grid. Open up schedule.scss again and we'll just add seventy-six pixels as our last row on the grid with start and end labels for the gradient.

schedule.scss

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

Now we go to progressTracker.scss and input those labels.

progressTracker.scss

.progress-tracker {
    grid-row: progress-s/progress-e;

    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 76px;
    background-color: rgba(255,255,255,0.3);

    &__label {
        grid-column: 1/2;
    }
    &__percentage {
        grid-column: 2/3;
    }
}

This seems like it should fix it, but it won't because it's having trouble with the repeat call in schedule.scss, so let's open it back up and change it to 1fr 1fr 1fr instead.

schedule.scss

.schedule {
    display: grid;
    grid-template-rows: 100px 1fr 1fr 1fr [progress-s] 76px [progress-e];
    grid-row-gap: 22px;
}

Now this will work for now, but we'll have to come back and change it later once we have the full functionality of the app finished for adding and removing courses to our schedule, plus our progress tracker functionality, which is all there is since this is a simple app.

What will be challenging, though, is the beginning concepts since they involve a lot of Redux. But we'll get the hang of it as we go on. Once the functinality is all finished, we'll put in the final style, the good-looking ones with the animations to finish up this app.

Let's commit our code.

git status
git add .
git commit -m "built progress tracker component"
git push

I'll see you in the next video

Resources

Code at this stage