- Open your command line and navigate to your
repos
directory (if you do not have arepos
folder, then you can usemkdir repos
to create one) - Use this template repository to start a new project in your repos folder:
git clone <repo_name>
- cd
repo_name
to navigate into your new repo directory - Start Visual Studio Code and select 'Open Folder'. Then select
repo_name
to open the folder in the editor (or just typecode .
in your terminal inside the repo directory) - Follow the instructions on the README.md file to complete exercises
- Open the index.html file to get started
- Let's play around with API calls to Giphy
- Open your index.html
- Beneath the p tag, but before the img tag, add the following:
- Label, input, and button
- Feel free to label and style
- Open your app.js
- Add an event listener to the button that listens for a click event, and does the following:
- Selects the img element and assigns it to a variable
- Selects the input element, grabs the
value
from the element and assigns it to a variable - Then, write a fetch request to "https://api.giphy.com/v1/gifs/translate?api_key=YOURAPIKEY&s="
- Add the stored input value from above to the end of the api call
- Make sure that you enable CORS with
{mode: "cors"}
- Chain a
.then
that takes the response and converts the json to a regular object - Chain another
.then
that takes the result and assigns the image url of the response object to the image tag source - Add the
.catch
method that accepts a callback thatconsole.log
's the rejection (if any)
- If you have added the event listener correctly, and correctly called the Giphy API, then you will be able:
- Let the user input any keyword to the input box
- Let the user press the button
- And display a gif in the image tag depending on the API response for the keyword