Building Image search website using HTML, jQuery, AJAX, Unsplash Api.
Tags: html, jquery, javascript
Published: 2021-09-11 05:40:17

Here i have made image search aaplication using HTML, Bootstrap, jQuery, AJAX and unsplash API

It can render images from unsplash website.

<h1>Source Code</h1> 
<h2>HTML Code:</h2>
```HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Search Application</title>
</head>
<body>
    <div class="container">
        <h1 class="text-center py-4">Image Search Application</h1>
        <div class="form-group">
            <input type="text" name="" id="search" placeholder="Search Images" class="form-control" autocomplete="off">
        </div><br>
        <div class="form-group">
            <button class="btn btn-success" id="button">Search Images</button>
        </div>
        <div id="result"></div>
    </div>
   
</body>
</html>

```

<br><br>
<h2>Bootstrap Link For CSS:</h2>
```html
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

```
<br><br>

<h2>jQuery Link:</h2>
```html
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

```<br><br>
<p>You Need To Get Your own client id from unsplash official website for get api key you need to go <br>
<a href="https://unsplash.com/developers">Usnplash Developer Page</a>
<br>
open link and register there and click new app and make new app !
Fill up your application name and details here and get your access id.
  </p>
<br><br>

<h1>Main Script Code For Our Application:</h1>
```javascript
  $("button").click(function(event){
            event.preventDefault()
            $("#result").empty()
            var search=$("#search").val()
            var url="https://api.unsplash.com/search/photos?query="+search+"&client_id={YOUR_CLIENT_ID}&per_page=60"

            $.ajax({
                method: 'GET',
                url: url,
                success:function(data){
                    console.log(data)
                    
                    data.results.forEach(photo => {
					$("#result").append(`
						<img src="${photo.urls.small}" />
					`)
				});
                }
            })
        })
```

<h1>Full Source Code:</h1>
```html

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body{
            height: 100vh;
            width: 100vw;
            display: grid;
            justify-content: center;
            overflow-x: hidden;

        }
        img{
            height: 250px;
            width: 370px;
            margin: 10px;
            border-radius: 3px;
        }
        #result{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            position: absolute;
            margin-left: -155px;
            margin-top: 25px;
        }
        input{
            /* position: absolute; */
            /* margin-left: -355px; */
            width: 70vw !important;
        }
    </style>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Search Application</title>
</head>
<body>
    <div class="container">
        <h1 class="text-center py-4">Image Search Application</h1>
        <div class="form-group">
            <input type="text" name="" id="search" placeholder="Search Images" class="form-control" autocomplete="off">
        </div><br>
        <div class="form-group">
            <button class="btn btn-success" id="button">Search Images</button>
        </div>
        <div id="result"></div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

    <script>
        $("button").click(function(event){
            event.preventDefault()
            $("#result").empty()
            var search=$("#search").val()
            var url="https://api.unsplash.com/search/photos?query="+search+"&client_id={YOUR_ACCESS_ID}&per_page=60"

            $.ajax({
                method: 'GET',
                url: url,
                success:function(data){
                    console.log(data)
                    
                    data.results.forEach(photo => {
					$("#result").append(`
						<img src="${photo.urls.small}" />
					`)
				});
                }
            })
        })
    </script>
</body>
</html>

```