Gif Selector

[zoeames]

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.

• Near my message input field, I would like to be able to click on a 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.
• After searching, I would like to see some options of gifs to choose. I choose a gif by clicking on the image. The options should then disappear and I should see some indicator that I selected a gif for my message.
• When I click send on my message, the gif should appear in the dom with the message that I sent. If there was no text in the chat field, the message should only contain the gif.

[gseals]

https://medium.com/@mattcroak718/beginners-guide-to-the-giphy-api-316f98459d06

https://gist.github.com/nealrs/28dbfe2c74dfdde26a30

[gseals]

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

[gseals]

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>

[gseals]

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 };