API, JSON, fetch - Giphy clone

Teacher instructions

• I will be going through how to interact with the giphy api in class

  • If you would like to figure that out by yourself, then you can work outside the class

  • Query parameters, path

Learning objectives

• Working with API's

• Getting authentication key

• Reading documentation

Giphy api

Create a site where a user can search for any word. When searching a word the application will find a gif using the searched word using the giphy api: https://developers.giphy.com/docs/

Here is how it is going to work: The user can write some text indicating the gif he is looking for, click a button and then a gif will be found (using the searched word) and the gif will be displayed to the user.

Try break this problem into smaller problems and write down how you are going to solve the problem BEFORE you start coding.

I you are unsure of how to start you can off course ask me or you can try this prompt:

Hey ChatGPT :) 

I got an assignment from my super cool teacher. I am unsure of how to start. Can you help me break this assignment into smaller problems

```
Create a website using html, css and javascript where a **user can search for any word**. When searching a word the application will **find a gif** using the **searched word** using the giphy api: [https://developers.giphy.com/docs/](https://developers.giphy.com/docs/)

Here is how it is going to work: The user can write some text indicating the gif he is looking for, click a button and then a gif will be found (using the searched word) and the gif will be displayed to the user.
```

giphy search

Additional features

Make it possible for the user to control:

• The user should be able to control how many Gifs should be fetched and shown. If you are adventurous try: https://refreshless.com/nouislider/

• The user should be able to control the rating of the gifs (what input type makes sense here)

• Make a copy to clipboard feature, so its easy for the user to select a gif

• Make it mobile friendly

• Deploy the website

• Think about the design and the aesthetics of the website

• Make a share to button, so the user easily can share the gif to the platform the user wants