Build a Stock HD Photo Finder App in Javascript

17th OCT 2018

javascript








Welcome folks I am back with another blog post. In this post I will guide you guys about how to create a stock hd photo finder application with the help of Ajax and jQuery. As you know that these two technologies come under javascript. So prior knowledge of Javascript is required before following this post.




In this application I am using API to retrieve the data (in this case) photos and display it to the user according the the respective query made by the user. For example if user wants to search some photos about computer he will enter query in input box and click on the search button as you see in the figure given below.







After pressing the search button the photos will be fetched from the API and then be displayed in a grid layout to the user. The magic of jQuery and Ajax comes into the picture in this process when we retrieve images and displaying it to the user. All this process happens Asynchronously i.e behind the scenes in the background. The user is not aware of it. So user don’t have to refresh the page. As user will scroll down some more images will be fetched and displayed.







As you can see in the figure we are also using some bootstrap for styling the images i.e some borders of images. Bootstrap is not required for this tutorial just for the sake of styling I am using it. You can also ignore it if you don’t want to get into Bootstrap.







I am using this Website Unsplash to retreive free HD photos into my application. This is a free website which provides free images for developers to use in their commercial projects and you don;t have to pay anything or give any attribution to the Website. Check out this Website and create a free account and then create your free app and then get access key to use the API. The process is very simple. Just follow the below steps.




Step – 1 : Just go to https://unsplash.com/developers and register for a developer account.







Step-2 : Create a new Application by giving a Application name and suitable description of the Application.







Step – 3 After creating the Application you will find your access key just copy it to the clipboard We will need it later in the tutorial to access the API.







Step – 4 : Just create an index.html file for your application. Copy paste the code into your favorite text editor. I am using visual code editor you can use any text editor of your choice.




<!DOCTYPE html>
<html>
<head>
<title>JSPDF Converter</title>
<body>
</body>
<script src="jspdf.min.js"></script>
</head>
</html>

var doc = new jsPDF()
doc.setFontSize(22)
doc.text(20,20,'This is a title')

doc.setFontSize(16)
doc.text(20,30,'This is some normal sized text underneath')
doc.save("file.pdf")

Step – 5 Just create style.css file in order to style the application and copy paste the following code into the text editor.


.jumbotron{
    background-color:black;
    color:white;
    text-align:center;
}
.form-group{
    margin:100px;
}
.btn{
    margin-left:100px;
    margin-top:-120px;
}
#dynamic{
    width:300px;
    height:300px;
    cursor:pointer;
    transition:0.3s;
}
.grid{
    display:grid;
    grid-template-columns: repeat(3,1fr);
    margin-left:80px;
}

#dynamic:hover{

    opacity:0.7;

}
#error{
    width:300px;
    height:300px;
    margin-left:480px;
}






Step – 6 : Just create script file called script.js which will hold the business logic of the application. In this script file we will be doing requests to the api and in return we will be displaying the images in a grid fashion to the user. Copy paste the code into the text editor and preview the final application into your browser.


$(document).ready(function(){

const client_id = "145a69e1cc1e4c571eeb07e6fa2f173487af08239a63c70aa418c4a9cb279116";

var query = "";

var page = 1;

// binding a event listener on the form

$("#form").submit(function(){

    // collection value submitted by user

    query = $("#search").val();

    makeCall(query);

    return false; // it prevents auto submission of the form this line is very important

});


function makeCall(query)
{
    // making a AJAX call to the api

    var q = "https://api.unsplash.com/search/collections?&client_id="+client_id+"&page="+page+"&query="+query;

    $.get(q,function(data,status){
         
         // detect the length of the array
         console.log(data);

         var length = data.results.length;

         if(length == 0)
         {
             alert("no results found");
         }
         else{
             for(var i =0;i<length;i++)
             {
                 // getting the thumbnail of the image

                var thumbnail = data.results[i].cover_photo.urls.small;
                
                // getting the downloaded url of the image

                var downloadUrl = data.results[i].cover_photo.links.download;

                var img = $('<img id="dynamic" class="float-left img-thumbnail">');

                img.attr("src",thumbnail);

                img.appendTo("#photos");

                img.click(function(){
                     
                    window.open(downloadUrl,"_blank");


                });
             }

             page = page + 1 ;
         }

    });

    $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() == $(document).height()) {
            makeCall(query);
        }
     });
}

$("#search").change(function(){
      
    $("#photos").empty();


});




});



In the above script first of all we are declaring some variables which will hold first of all the client id or access token of the api and then we make a variable query which will hold the actual input supplied by the user and then we make a variable page number which is initialized to 1. This variable will be used later on in the script to load more content when required by just updating this variable in the request to the API.


And after that we are just binding event listener on the form and the collecting user input and parsing the JSON which is coming from the API and then displaying the photos in a grid manner.




Congratulations we are done making a Stock HD Picture Finder App from scratch. All the source code of the Application is available below to download. Thanks for reading this post and if you like reading this and wants to read more of this please subscribe the blog below to get all the notications.





About Author

Gautam Sharma

Developer, Tech. Evangalist.