I can't figure out what I'm doing wrong when trying to access a URL from an API using Axios. For instance, I'm attempting to select the following URL: "https://media4.giphy.com/media/yy6hXyy2DsM5W/giphy-downsized.gif?cid=482277c2s3j1s8uell6vhu03111i46npv57g8yqgikgiefr8&rid=giphy-downsized.gif"
Here is the API link I am referencing:
I have included my HTML and JavaScript code below. While my function successfully retrieves all the API data, it appears that my res.data[0].images.downsized.url line may be incorrect. Any assistance would be greatly appreciated!
async function getGiphs() {
const res = await axios.get(`https://api.giphy.com/v1/gifs/search?q=$puppies&api_key=MhAodEJIJxQMxW9XqxKjyXfNYdLoOIym`);
console.log(res.data[0].images.downsized.url);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Giphy Party!</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
<div class="jumbotron">
<h1 class="display-4 mb-3">GIPHY Party!</h1>
<div class="form-group">
<form>
<input id="search-word" class="form-control mb-3" placeholder="Enter search term">
<button id="search-btn" class="btn btn-primary btn-md mr-2" role="button" type="submit">Search GIPHY
<button id="remove-btn" class="btn btn-danger btn-md" role="button">Remove Images
</form>
</div>
<script src="giphyParty.css"></script>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://unpkg.com/axios/dist/axios.js"></script>
<script src="giphyParty.js"></script>
</body>
</html>