Integrate Pexels Photos in JavaScript

Learn how to create a basic image search application using HTML, CSS, and JavaScript in this blog article. So let’s get going.

Here, I am gonna create a basic image search app in pure HTML,CSS and Javascript.

Prerequisite

  • Basic knowledge of JavaScript, HTML, and CSS

For this, I am going to use Pexels API, with this we can get images from API.

Configuring the Pexels API

  • First Visit Pexels.com , then perform Sign up.
  • After that, in the Menu click on the “Image & Video API” option.
  • Get your API Key.
  • And read their documentation.

For my sample project, I’ve created an HTML file, where I’ve added my code to call Pexels API.

Here I’ve used Fetch API, which is easy to use method to call API in Javascript.

In this, I’ve added functionality to search images through user inputs, with Search Textbox.

The code is given below.

<!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>Pexels Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">

</head>
<body>
    <div class="header">
        <div class="col-md-12 d-flex justify-content-center align-items-center py-1">
            <h2 class="text-info">Pexels Demo</h2>
        </div>
    </div>
    <div class="search">
        <div class="container">
            <div class="mb-3">                
                <input type="text" class="form-control" id="txtSearch" placeholder="Search Images..">                
              </div>
        </div>
    </div>
    <div class="container my-3">
        <div class="photos row py-3">
            
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" ></script>
    <script>
        let url = "https://api.pexels.com/v1/search?query=nature&per_page=10";
        let API_Key = "Your_API_KEY";
        photosDiv = document.querySelector('.photos');

        // Search images
        document.querySelector('#txtSearch').addEventListener('keypress',function(){
            let value = document.querySelector('#txtSearch').value;       
            if(value != null && value != '' && value !=undefined){
                console.log(value);
                let searchTerm = "https://api.pexels.com/v1/search?query="+value+"&per_page=10";
                loadPics(searchTerm);
            }
            else
            {
                loadPics(url);
            }
        });

        function loadPics(searchUrl){
            fetch(searchUrl,{
            method: 'GET',
            headers:{
                'Authorization':API_Key
                }
            }) 
        .then(response =>{
                return response.json();
        }).then(data =>{
            if(data && data != null && data != '' && data?.photos.length > 0){                
                photosDiv.innerHTML = "";
                let photo = "";
                for(let val of data.photos){
                    photo = photo + `
            <div class="col-md-4 col-sm-4 col-lg-4 col-xl-4">
                    <div class="card">
                        <img src="${val.src.medium}" class="card-img-top" alt="${val.alt}">
                        <div class="card-body">
                            <h5 class="card-title">${val.alt}</h5>
                            <p class="card-text">By : ${val.photographer}</p>    
                        </div>
                    </div>
            </div>
                    `;
                    
                    console.log(val);
                }
                photosDiv.innerHTML = photo;
                
            }
                
        })
    }
        
    loadPics(url);
       
    </script>
</body>
</html>

Here are some sample images.

I hope you enjoyed my blog.

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories