The purpose of the <show-trending> Web Component is to first make a call to the API and then show the most trending GIFs. For this component, the API that we will be using is, https://api.giphy.com/v1/gifs/trending.

Like the previous API, this also returns an array of objects that contains the URL and other metadata. To take a look at the documentation for this API, visit this link: https://developers.giphy.com/docs/#operation--gifs-trending-get.

Now that we know how the API works, lets take a look at the code for the <show-trending> Web Component:

export default class ShowTrending extends HTMLElement {

  constructor() {

    // We are not even going to touch this.
    super();

    this.key = 'YOUR_KEY';
    this.url = 'https://api.giphy.com/v1/gifs/trending';
    this.showlimit = 20;

    // lets create our shadow root
    this.shadowObj = this.attachShadow({mode: 'open'});

    this.registerOtherComponents();
    this.render();

  }

  ...
  ...
 
}

Here, just like the <search-bar> components, we have a key variable for YOUR_KEY, the URL to store the API call, and the showlimit variable to set the max amount of data that can come from the API call.

We have already seen how our registerOtherComponents() method should work, as follows:

registerOtherComponents() {
  if (typeof customElements.get('gif-cover') === 'undefined') {
    customElements.define('gif-cover', GifCover);
  }
}

Also, don't forget to import the GifCover component:

import GifCover from '../gif-cover';

Let's take a look at the render() method:

render() {
  this.shadowObj.innerHTML = this.getTemplate();
}

getTemplate() {
  return `
    <div class="show-trending__container">
      <h2 class="show-trending__heading">Trending Gifs</h2>
      <div class="show-trending__images"></div>
    </div>
    ${this.getStyle()}
  `;
}

Here, we just have a show-trending__images div that will have <gif-cover> Web Components once the API call is made.

The getStyles() method looks something like this:

getStyle() {
  return `
    <style>
      :host {
        display: block;
      }
      .show-trending__heading {
        text-align: center;
      }
      .show-trending__images {
        display: flex;
        padding: 10px;
        flex-wrap: wrap;
        box-sizing: border-box;
        justify-content: space-evenly;
      }

      gif-cover {
        flex-basis: 10%;
        padding: 5px;
      }
    </style>
  `;
}

Now that we have the component set up, it is time to make sure that the component makes the API call:

connectedCallback() {
  this.makeApiCall();
}

makeApiCall() {
  fetch(`${this.url}?api_key=${this.key}&limit=${this.showlimit}`)
  .then(response => response.json())
  .then((jsonResponse) => {
    this.handleTrendingData(jsonResponse.data);
  });

}

What we are doing is simply making the call when the component is connected and DOM is added to the page. Once we have the data from the fetch call, we pass this data to the handleTrendingData() method:

handleTrendingData(data) {

  data = data.map((val, index) => {
    return `
      <gif-cover url=${val.images.downsized_medium.url}></gif-cover>
    `;
  }).join('');

  this.shadowObj.querySelector('.show-trending__images')
    .innerHTML = data;
}

As you can see, this handleTrendingData() method is responsible for creating <gif-cover> Web Components, giving them GIF URLs, and adding them to the show-trending__images div.

Just like the <search-container> component, you can test the <show-trending> component inside the <my-app> component.