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.

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

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.

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.

A programmer scientist by the mind and a passionate blogger by heart ❤️. Fountainhead of Coding Shiksha Life motto: Live while you can! Teach & inspire while you could & Smile while you have the teeth.

Gautam Sharma

Founder , Coding Shiksha

5 Comments

    • Gautam Sharma

      Thanks Buddy

      Reply
  1. Alphie

    am trying to get the api access key but the unsplash team wants to review my application for about 5-10 days. what do i do?

    Reply
    • Gautam Sharma

      Just wait bro

      Reply
  2. PamBig

    Hi. I have checked your codingshiksha.com and i see you’ve got some duplicate content
    so probably it is the reason that you don’t rank hi in google.
    But you can fix this issue fast. There is a tool that generates
    content like human, just search in google: miftolo’s tools

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *