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

It can render images from unsplash website.

Source Code

HTML Code:


<!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>

Bootstrap Link For CSS:

    <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">

jQuery Link:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

You Need To Get Your own client id from unsplash official website for get api key you need to go
Usnplash Developer Page
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.

Main Script Code For Our Application:

  $("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}" />
                    `)
                });
                }
            })
        })

Full Source Code:


<!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>

Blog

Building Image search website using HTML, jQuery, AJAX, Unsplash Api.

Technical Vandar