Welcome back to the course. In this video, we are going to add some padding to our margins and we are going to style the arrow and I'm going to make it move up and down as well. Let's begin with styling the line.

Open up libraryCourse.scss and add the following styles.

libraryCourse.scss

  &__line {
    border-bottom: 1px solid #F2f2f2;
    margin-top: 19px;
    margin-bottom: 24px;
  }

Now if we look at the application, we can see that the bottom margin is working, but not the top margin. The reason for this is that where it lies on the grid rows will not allow it to work. So let's change that to 80px.

That'll give plenty of space. We can see that both the top and bottom margins are working. Let's move on to our arrow. This should be pretty simple, all we have to do is change the color and make it a little bit smaller. Open up our arrow.scss and let's change it to 8px on the sizes.

arrow.scss

  .arrow {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid $color-blue;

    height: 0;
    width: 0;
  }

Now let's make it animate by making it turn over and hide the description. This is going to be the bulk of this video. We will be working with JavaScript, not just styles, but we're going to add classes to the description to hide it.

We need to figure out how we can do this, let's go to our design and just see which way the arrows are pointing initially.

So it looks like the arrows are pointing down initially and are closed, so we need to flip ours over while closed. Update your arrow.scss to this:

arrow.scss

  .arrow {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid $color-blue;

    transform: rotate(180deg);

    height: 0;
    width: 0;
  }

  .arrow-closed {
    transform: rotate(0deg);
  }

So that will have it pointing down at first. Now let's head into the JavaScript to set it up that when we click it, it rotates up or down based on its status. We could do this through Redux, but I don't think we'll need to.

Open up your arrow.js file. We'll change the div to an 'a' tag, which shouldn't ruin our styles at all. Now that it's an 'a' tag, we can give it an onClick with an arrow function.

arrow.js

import React, { Component } from 'react';

class Arrow extends Component {
  render() {
        return (
            <a onClick={() => console.log('trying to handle click')}className={`${this.props.className} arrow`}></a>
        )
    }
}

export default Arrow;

When we look at our browser with the console open, we can see the message everytime we click, so it definitely is working.

Now, all we need to do is make it flip. We can accomplish this using pure JavaScript. If we Google 'document javascript get element', and it leads us to the getElementById() method. (link below) At this website we can also test out their examples of getElementById().

The example shows that when you click the button, the text changes. we can also change this up to test different ideas. Here is an example for our needs.

This shows that we can add and change classNames for elements, and we can use them with transitions for animations. Let's use this in our arrow.js.

arrow.js

import React, { Component } from 'react';

class Arrow extends Component {

  constructor(props) {
    super(props)

    this.state = {
      status: false
    }
  }

  toggleArrow = function() {
    console.log('trying to toggle arrow');
  }.bind(this);

  render() {
        return (
            <a onClick={() => this.toggleArrow()}className={`${this.props.className} arrow`}></a>
        )
    }
}

export default Arrow;

Now we have it set up with these functions to call each other. Basically onClick is a function that contains the function of toggleArrow, so when we click, onClick calls toggleArrow. When we test that out in the browser, we can see that it works. Let's update our arrow.js

arrow.js

import React, { Component } from 'react';

class Arrow extends Component {

  constructor(props) {
    super(props)

    this.state = {
      status: false
    }
  }

  toggleArrow = function() {
    if(this.state.status) {
      //closes it
    } else {
      //opens it
    }
  }.bind(this);

  render() {
        return (
            <a onClick={() => this.toggleArrow()}className={`${this.props.className} arrow`}></a>
        )
    }
}

export default Arrow;

Now let's write some styles for this. By default our arrow is rotated 180 degrees and it requires two transform calls, which isn't something that we want for our default. So let's change our file. We also need to flip our arrows' starting points.

arrow.scss

  .arrow {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid $color-blue;

    height: 0;
    width: 0;
  }

  .arrow-closed {
    transform: rotate(180deg);
  }

Since we want the closed arrow to be our default, we technically only need to add and remove the .closed-arrow className, which will make it easier than our example code.

arrow.js

import React, { Component } from 'react';

class Arrow extends Component {

  constructor(props) {
    super(props)

    this.state = {
      status: false
    }
  }

  toggleArrow = function() {
    if(this.state.status) {
      //closes it
      document.getElementById('arrow').classlist.remove('arrow-closed');

    } else {
      //open
      document.getElementById('arrow').classlist.add('arrow-closed');
    }

    this.setState({ status: !this.state.status })
  }.bind(this);

  render() {
        return (
            <a id="arrow" onClick={() => this.toggleArrow()}className={`${this.props.className} arrow`}></a>
        )
    }
}

export default Arrow;

Now we have our functions, you can see that by either adding or removing the arrow-closed class, we should be able to flip the arrow. Let's go to our browser and test it out. It flipped, but it appears that we have a bug already, and it's only letting us flip the first arrow.

We'll put in our animations first, then figure out that bug. Let's open up our arrow.scss

arrow.scss

  .arrow {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid $color-blue;

    height: 0;
    width: 0;

    transition: all .3s ease;
  }

  .arrow-closed {
    transform: rotate(180deg);
  }

Let's try this out now. As you can see it looks really nice. Well let's commit our code, and in the next video we'll fix that bug, and see what else we can do.

git status
git add .
git commit -m "line styles and arrow animations"

See you in the next video.

Resources

Code at this stage

w3schools.com JavaScript