Flickr API and JavaScript functions?

Question

For an assignment we need to use Flickr API to get a string of photos to appear when a certain category is clicked. I have my categories on the left side of a flexbox container but I'm not sure how to get the text 'tennis' when clicked to show the Flickr API of everything with the tag tennis.

Also with the Flickr API, the photos don't have their titles under them which is what I needed as well. The images also show up in a column no matter how much I edit them. Could anyone help me with this?

I'm a beginner to coding so I would love some clarification on how these things are done.

Here is the code:

 $("#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>

This is a quick image of what it looks like so far

Thank you for looking at my work and trying to help me understand where I'm going wrong!

Answer 1

I've found some issues in your code:

HTML5:

You should use only one version of jQuery. In this case:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

The <header> tag goes inside the <body> tag.
You can use a class attribute to associate an action for every div instead to use its id . For example:

<div id="nav">
  <div id="tennis" class="request">
    <p>Tennis</p>
    <br />
  </div>
  <div id="football" class="request">
    <p>Football</p>
    <br />
  </div>
  <div id="swimming" class="request">
    <p>Swimming</p>
    <br />
  </div>
</div>

CSS:

The images also show up in a column no matter how much I edit them. Just remove: flex-direction: column; .

Something like this:

.flex-container > div {
   border: 1px solid black;
}

JavaScript/jQuery:

Wrap your jQuery code inside of $(function(){}); . Something like this:

$(function()
{
   // Code goes here...
});

The API_KEY variable must have a string value inside of double quotes. For example: let API_KEY = "39417c145483a7fb3ee91c5fe5bc93fe"; .
You can use $(".request").on("click", function() { to make a request to Flickr API for every category with a single function. I'd suggest to use .on("click") .
In your fetchPhoto you have: data.photos.photo[0].title . Change to data.photos.photo[i].title .
Then, in your display function you can print the proper titles by using:
<figcaption>${photos[i].title}</figcaption>

See this example:

Something like this:

 $(function() { $(".request").on("click", function() { let searchText = $(this).children().text(); let API_KEY = "39417c145483a7fb3ee91c5fe5bc93fe"; let tennisStr = "https://api.flickr.com/services/rest/?method=flickr.photos.search&tags=" + searchText + "&per_page=15&format=json&nojsoncallback=1&api_key=" + API_KEY; let photos = []; let nrequest; let nreceived; $.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[i].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=" + 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[i].title}</figcaption></figure>`; } $("#flickrphoto").html(htmlStr); } } }); });

 .flex-container { display: flex; } .flex-container>div { border: 1px solid black; } #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://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="./js/main.js"></script> <title>Sports Album</title> </head> <body> <header> <h1>Sports Album</h1> </header> <div class="flex-container"> <div id="navigation"> <h2>Categories</h2><br> <div id="nav"> <div id="tennis" class="request"> <p>Tennis</p> <br /> </div> <div id="football" class="request"> <p>Football</p> <br /> </div> <div id="swimming" class="request"> <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>

Have a good day.

Flickr API and JavaScript functions?

Question

1 answers

solution1
2 ACCPTED 2018-04-16 18:00:16

Flickr API and JavaScript functions?

Question

1 answers

solution1 2 ACCPTED 2018-04-16 18:00:16

solution1
2 ACCPTED 2018-04-16 18:00:16