DEV Community

Technical Vandar
Technical Vandar

Posted on

2 2

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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay