In preparation for a project, we are required to utilize the Flickr API in order to display a collection of photos when a specific category is selected. I have successfully set up my categories on the left side of a flexbox container. However, I am struggling with configuring the system to display the Flickr API results tagged with 'tennis' when the user clicks on the tennis category.
Another issue I have encountered with the Flickr API is that the images lack titles underneath them, which is a necessary feature for my project. Additionally, no matter how much I attempt to adjust them, the images continue to appear in a single column. Any assistance or guidance on these matters would be greatly appreciated.
Being relatively new to coding, I would benefit from a clear explanation of how to resolve these challenges.
Below you will find the code snippet:
$("#tennis").click(function() {
//api search for tennis
let API_KEY = MY API KEY ";
let tennisStr = "https://api.flickr.com/services/rest/?method=flickr.photos.search&tags=tennis&per_page=15&format=json&nojsoncallback=1&" + API_KEY;
let photos = [];
let nrequest;
let nreceived;
$(document).ready(function() {
console.log(tennisStr);
$.get(tennisStr, function(data) {
fetchPhoto(data);
});
});
function fetchPhoto(data) {
nrequest = data.photos.photo.length;
nreceived = 0;
for (let i = 0; i < data.photos.photo.length; i++) {
let photoObj = {
id: data.photos.photo[i].id,
title: data.photos.photo[0].title
}
photos.push(photoObj);
getSizes(photoObj);
}
function getSizes(photoObj) {
let getSizesStr = "https://api.flickr.com/services/rest/?method=flickr.photos.getSizes&format=json&nojsoncallback=1&" + API_KEY + "&photo_id=" + photoObj.id;
$.get(getSizesStr, function(data) {
nreceived++;
photoObj.file = data.sizes.size[5].source;
photoObj.full = data.sizes.size[data.sizes.size.length - 1].source;
if (nreceived == nrequest) {
display(photos);
}
});
}
function display(photos) {
let htmlStr = "";
for (let i = 0; i < photos.length; i++) {
htmlStr += `<figure><a href=${photos[i].file}'><img src = "${photos[i].file}" height = "200" width = "200"></a><figcaption>photos</figcaption></figure>`;
}
$("#flickrphoto").html(htmlStr);
}
}
});.flex-container {
display: flex;
}
.flex-container>div {
border: 1px solid black;
flex-direction: column;
}
#navigation {
flex-grow: 1;
text-align: left;
}
#flickrphoto {
display: flex;
flex-grow: 2;
text-align: center;
flex-wrap: wrap;
justify-content: center;
flex-basis: auto;
}
#recenthistory {
flex-grow: 1;
text-align: left;
}
header {
text-align: center;
background-color: black;
color: white;
padding: 4rem;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="./js/main.js"></script>
<title>Sports Album</title>
<header>
<h1>Sports Album</h1>
</header>
</head>
<body>
<div class="flex-container">
<div id="navigation">
<h2>Categories</h2><br>
<div id="nav">
<div id="tennis">
<p>Tennis</p>
</br>
</div>
<div id="football">
<p>Football</p>
</br>
</div>
<div id="swimming">
<p>Swimming</p>
</br>
</div>
</div>
</div>
<div id="flickrphoto">
<h2>Flickr</h2>
</div>
<div id="recenthistory">
<h2>Recent history</h2>
</div>
</div>
<div class="footer">
<p>Jasmine</p>
</div>
</body>
</html>Preview image of the current progress
Thank you for reviewing my work and providing guidance on addressing the issues I have encountered!