Tv Show GIF generator is an app that uses the giphy api to display gifs captured from tv dramas and animated cartoons.

Go here to view the app.

These instructions will get you a copy of the project up and running on your local machine.

Install the following programs if they aren't on your local machine.

GIT - https://git-scm.com/book/en/v2/Getting-Started-Installing-Git

Open your terminal and clone this repository to your computer.

git clone https://github.com/crystalodi/tv-show-gif-generator.git

Navigate to the /tv-show-gif-generator directory with your terminal

cd tv-show-gif-generator

Open file explorer from the /tv-show-gif-generator directory

explorer .

Open the index.html file by double clicking on it. The app will open in a web browser and should look like this:

After following the instructions in the installation section, the contents of the /tv-show-gif-generatorwill look like this

│   index.html
│   README.md
│
└───assets
    ├───css
    │       reset.css
    │       style.css
    │
    ├───images
    │       add_gif_search_term_1.png
    │       add_gif_search_term_2.png
    │       ezgif-4-e75bd4e6bd.gif
    │       home.png
    │       retrieve_gifs.jpg
    │
    └───javascript
            app.js

• index.html contains the ui for the application. This includes the form used to add buttons used to search for gifs.
• assets/css/reset.css removes any default styling applied by web browsers
• assets/css/style.css Contains styling for add tv show form, tv show search buttons, and gif search results.
• assets/javascript/app.js Each time a tv show search button is clicked, an ajax GET request is sent using the url https://api.giphy.com/v1/gifs/search to retrieve 10 gifs that match the tv show text on the button. The code also allows users to add more search terms and display them as buttons.

In the form below the page header, fill out the tv show field

Press the Add TV Show Button

The tv show you entered will appear as a button underneath the add tv show form.

Press any button located underneath the add tv show form. If there are any gifs associated with the tv show you entered they will appear like this:

All gifs retrieved will be loaded as still images. To make the gif move, click on the gif. To make it stop moving, click on the gif again.

• HTML
• jQuery
• JavaScript
• CSS
• Giphy Developer's API

• Crystal Odi - Initial work - crystalodi

• jQuery Documentation
• Mozilla Developer's Network
• Giphy Developer's API Documentation