After learning the basics of AJax using javascript and jquery, the course used the Flickr API for a real project.

Getting pictures of animals from flickr based on the button clicked

$('.btn').click(function(){
$('.btn').removeClass("bg-gray-700");
$(this).addClass("bg-gray-700");
let animal = $(this).text();
let imageContainer = $('.image');
let imageTag = $('.img');
console.log(animal);
let flickerAPI = "https://www.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
let flickerOptions = {
	tags: animal,
	format: "json",
};

function  displayPhotos(data){
let photoHtml = '<div class="md:grid grid-cols-5 gap-2  mt-30 mt-10">';
	$.each( data.items, function(i, photo){
		 photoHtml +=`
        <a href="${photo.link}" class="image">
        <img src="${photo.media.m}" alt="" class="img">

        </a>
		`
	});
	photoHtml += '</div>';
		$('.photos').html(photoHtml);	
}
	$.getJSON(flickerAPI,flickerOptions, displayPhotos);
})

Getting the tag to search in flickr from a form

$('form').submit(function(e){
	e.preventDefault();

	let formValue = $('input').val();

	let flickerAPI = "https://www.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
let flickerOptions = {
	tags: formValue,
	format: "json",
};

function  displayPhotos(data){
let photoHtml = '<div class="md:grid grid-cols-5 gap-2  mt-30 mt-10">';
	$.each( data.items, function(i, photo){
		 photoHtml +=`		
				<a href="${photo.link}" class="image">
				<img src="${photo.media.m}" alt="" class="img">	
				</a>	
		`
	});
	photoHtml += '</div>';
		$('.photos').html(photoHtml);	
}
	$.getJSON(flickerAPI,flickerOptions, displayPhotos);
});