CODEWITHSUNDEEP
javascript
fernie
fernie

Reputation: 57

Fetch Giphy API (add search box)

smart people! So, I'm learning about how to work with APIs, and I'm having a hard time implementing a search box for it. As you can see in the code below, it is supposed to have a search field for the user to search for a GIF and a button that search for another GIF but using the same term. Is that clear? In this code, you see that the button is working, it returns another gif using the word "random" (the word is at the end of the fetch).

I can't figure out how to make it work with the search box. I've tried getting the value of search using ${search.value} instead of random, and it works (although return a TypeError cannot read property 'fixed_height' of undefined). But how would I make that button to request another gif using the value passed (by the user) on search? I hope this wasn't too confusing and I appreciate any response.

My code:

const img = document.querySelector('img');
const btn = document.querySelector('button');
const form = document.querySelector('.form');
const search = document.getElementById('search');

btn.addEventListener('click', loadGIF);
form.addEventListener('submit', loadGIF);

function loadGIF(e) {
  e.preventDefault();
  fetch(
      'https://api.giphy.com/v1/gifs/translate?api_key=g3TEgnU2pGODGJrcvHcn36HwOhK3E8l9&s=random', {
        mode: 'cors'
      }
    )
    .then(function(response) {
      return response.json();
    })
    .then(function(json) {
      img.src = json.data.images.fixed_height.url;
    })
    .catch(function(err) {
      console.log(err);
    });
}

document.addEventListener('DOMContentLoaded', loadGIF);
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 90vh;
}

.form {
  margin-bottom: 0.8rem;
}

button {
  margin-top: 0.5rem;
  background: rgb(54, 43, 209);
  border: none;
  padding: 0.5rem 1rem;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
}

button:hover {
  background: rgb(90, 80, 240);
}
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<form class="form">
  <label for="search">Search GIF:</label>
  <input type="text" id="search" />
</form>
<img src="#" />
<button>Another GIF</button>

Upvotes: 0

Views: 793

Answers (1)

Tiago Emerenciano
Tiago Emerenciano

Reputation: 43

You just need to get the value and use it in the URL.

You can get the value from input using search.value.


const img = document.querySelector('img');
const btn = document.querySelector('button');
const form = document.querySelector('.form');
const search = document.getElementById('search');

btn.addEventListener('click', loadGIF);
form.addEventListener('submit', loadGIF);

function loadGIF(e) {
  var searchValue = search.value; // Create a variable with the input value
  if (!searchValue) {
    searchValue = 'random'; // If the value is empty, we put the 'random' value
  }
  e.preventDefault();
  fetch(
      'https://api.giphy.com/v1/gifs/translate?api_key=g3TEgnU2pGODGJrcvHcn36HwOhK3E8l9&s='+searchValue, { // Here we use the variable searchValue with what was typed by the user.
        mode: 'cors'
      }
    )
    .then(function(response) {
      return response.json();
    })
    .then(function(json) {
      img.src = json.data.images.fixed_height.url;
    })
    .catch(function(err) {
      console.log(err);
    });
}

document.addEventListener('DOMContentLoaded', loadGIF);

"although return a TypeError cannot read property 'fixed_height' of undefined"

This problem occurrs because when you search by a gif using a empty value, nothing is returned. Because of this you need set the value to 'random'

Upvotes: 1

Related Questions