DEV Community

Technical Vandar
Technical Vandar

Posted on

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

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>

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

jQuery Link:

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

Enter fullscreen mode Exit fullscreen mode

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}" />
                    `)
                });
                }
            })
        })
Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

Top comments (0)