If we take a look at the Search page, we will see that there is a search bar. The input field and the Search button are a part of this <search-bar> component and are responsible for making API calls.

The API call that we will be using here is the GIPHY Search Endpoint API, https://api.giphy.com/v1/gifs/search.

You will need to provide it with your key, which can be obtained from your dashboard. And, you may want to take a look at the docs here: https://developers.giphy.com/docs/#operation--gifs-search-get.

When you make a call to this API, it is going to return an array of objects, each representing a GIF and its metadata.

Now that we know what API to use, let's take a look at the code:

export default class SearchBar extends HTMLElement {

  constructor() {

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

    this.key = 'YOUR-KEY';
    this.searchUrl = 'https://api.giphy.com/v1/gifs/search';
    this.showlimit = 20;

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

    this.render();
  }

  ...
  ...

}

The constructor() method contains your key (which you will get from the GIPHY dashboard), the search URL, which is the API URL, and the limit or the amount to show in one call. Let's take a look at the render() method:

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

getTemplate() {
  return `
    <div class="search-bar__container">
      <input type="text"
        class="search-bar__search-field"
        placeholder="Enter Search Text Here">
      <button class="search-bar__button">Search</button>
    </div>
    ${this.getStyle()}
  `;
}

It is nothing unusual. We just have a text field and a button. And the styles look something like this:

getStyle() {
  return `
    <style>
      :host {
        display: block;
      }
      .search-bar__container {
        display: flex;
      }
      .search-bar__search-field {
        flex: 1;
        margin: 10px;
        height: 50px;
        font-size: 18px;
        padding: 10px;
        border-radius: 5px;
        border: none;
        color: #8e8e8e;
      }
      .search-bar__button {
        margin: 10px;
        width: 200px;
        border: none;
        font-size: 18px;
        color: #5f5f5f;
        cursor: pointer;
      }
      .search-bar__button:hover {
        background: #68f583;
      }
    </style>
  `;
}

Along with basic rendering, we will also need to add a click event for the button, so that it can make a call to the API:

connectedCallback() {
  this.shadowObj.querySelector('button')
    .addEventListener('click', (e) => {
      this.handleSearch();
    });
}

This way, when a user clicks on the button, it is going to trigger the handleSearch() method, which looks something like this:

handleSearch() {
  let value = this.shadowObj.querySelector('input').value;

  fetch(`${this.searchUrl}?api_key=${this.key}&q=${value}&limit=${this.showlimit}`)
  .then(response => response.json())
  .then((jsonResponse) => {
    this.dispatchDataInEvent(jsonResponse.data);
  });

}

Here, in the handleSearch() function, we are first getting the value of the input field. This is the value that the user entered. Then, we are making a call to the API by concatenating the API URL. The URL looks like the following:

`${this.searchUrl}?api_key=${this.key}&q=${value}&limit=${this.showlimit}`

This will get the URL from the searchUrl variable, and the key from the key variable. The value is obtained from the input field. And the limit is obtained from the showlimit variable.

Once the call is made, and the promise resolves, it will call the dispatchDataInEvent() method:

dispatchDataInEvent(data) {
  this.dispatchEvent(new CustomEvent('search-complete', {
    detail: {
      data: data,
    },
    bubbles: true,
  }));
}

This dispatchDataInEvent() method will be responsible for notifying the parent Web Component of the new data that is obtained after the call.

Now that we have created Web Components that can be reused in the <search-container> component, let's take a look at <search-container>.