Open zoeames opened 4 years ago
https://www.youtube.com/watch?v=HRh6zHRwRLo (this gets complicated) https://www.youtube.com/watch?v=pfdP26jPvEk (yeah. this video is the one) https://developers.giphy.com/docs/resource#code-examples
this div and button hold everything:
<div class="deleteThis">
<input id="searchText" type="text" placeholder="Search...">
<button class="btn-outline-primary" id="searchgifs" type="submit">Go</button>
<div id="inner"></div>
</div>
import $ from 'jquery'; import utilities from '../../helpers/utilities';
const gifMaker = () => {
$('#searchgifs').on('click', () => {
const xhr = $.get('http://api.giphy.com/v1/gifs/search?q=ryan+gosling&api_key=VaVkZ691aDNtSCDJLLbsiKDDNQlgWwFG&limit=5');
xhr.done((response) => {
console.error('success got data', response);
const jiffs = response.data;
console.log(Object.values(jiffs));
const arrays = Object.values(jiffs);
arrays.forEach((array) => {
utilities.printToDom('inner', <img src='${array.images.original.url}'></img>
);
});
});
});
};
// $('#inner').append('');
// $('#inner').append('
');
export default { gifMaker };
Giphy Api: Go to https://developers.giphy.com/ and set yourself up with a login and create an app (you can enter whatever information in those fields). You will be using the Search endpoint.
Add Gif
button. When I click on that button, a text field should show up in some way so that I can search for a gif.