https://github.com/kbelltree/fetch-api-practice

The Odin Project: Working with APIs
https://github.com/kbelltree/fetch-api-practice

css giphy-api html js odin-project the

Last synced: about 22 hours ago
JSON representation

The Odin Project: Working with APIs

• Host: GitHub
• URL: https://github.com/kbelltree/fetch-api-practice
• Owner: kbelltree
• Created: 2024-05-19T22:42:22.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-05-22T02:23:04.000Z (9 months ago)
• Last Synced: 2024-05-22T05:22:23.572Z (9 months ago)
• Topics: css, giphy-api, html, js, odin-project, the
• Language: CSS
• Homepage:
• Size: 6.2 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# fetch-api-practice



    






### First Phase: Understanding APIs with fetch and .then

This browser-based random Giphy Gif display was created to enhance understanding of working with APIs. For more details on this project, please refer to the lesson ["Working with APIs"](https://www.theodinproject.com/lessons/node-path-javascript-working-with-apis#fetching-data) on The Odin Project.

### Second Phase: Enhancing Code with async/await

Transform the code from the first phase to use async and await for better readability and efficiency. For more details on these JavaScript features, refer to the lesson ["Async and Await"](https://www.theodinproject.com/lessons/node-path-javascript-async-and-await) on The Odin Project.

## Key Assignment Instructions

### First Phase (Use fetch and .then): 

- **API Key:**


    Create an account and obtain a free API key from Giphy to display random Gifs in a browser.

- **URL Setting:**


    Use the 'translate' endpoint URL with two parameters: the API key and a search term. Refer to the [Giphy API guide](https://developers.giphy.com/docs/api/endpoint/#translate) for details.

    

    The URL format should be: 

    ```

    https://api.giphy.com/v1/gifs/translate?api_key=YOUR_KEY_HERE&s=cats`

    ```

- **fetch and .then**


    Use `fetch`, and `.then` methods to locate the exact access point for image data within the JSON, which will be assigned to `img.src`. 

- **Displaying the Image**


    In the subsequent `.then` clause, assign the access point to `img.src`, and verify that the image appears in the browser.

- **Button Function for Showing a New Image**


    Add a button that, when clicked, fetches and displays a new image using the same search term without refreshing the browser.

- **Search Function and .catch**


    Add a search box and incorporate error handling with `.catch`. Note a specific case: when no image is found by the search term, Giphy returns a status 200 with an empty array; this won't trigger `.catch` as an error. Adjust the implementation to handle this scenario as an error, displaying an appropriate message or image to users.

### Second Phase (Refactor with async and await):

- **async and await**

    Refactor the existing `fetch` and `.then` functionality using `async` and `await` to make the asynchronous code more readable and easier to manage. This involves modifying function declarations to async and replacing .then with await for handling promises.

    

Note: 


Because the API key should be kept private, it is omitted from the final repository. Instead, a separate module that retrieves the API key has been created.

## Built With

- HTML

- CSS

- JavaScript