Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • PDF Invoice Generator
Menu

Pexels API Photo Search App in Javascript

Posted on May 16, 2023

 

 

 

To create a photo search app in JavaScript using the Pexels API, follow these steps:

 

 

Step 1: Sign up and get API key from Pexels

 

 

Visit the Pexels website (https://www.pexels.com/) and sign up for an account. Once you’re signed in, go to the Developers page (https://www.pexels.com/api/new/) and generate an API key.

 

 

Step 2: Set up HTML structure

 

 

Create an HTML file and set up the basic structure:

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
  <title>Pexels API Photo Search App</title>
</head>
<body>
  <div id="app">
    <h1>Pexels API Photo Search App</h1>
    <input type="text" id="searchInput" placeholder="Enter search term">
    <button id="searchButton">Search</button>
    <div id="results"></div>
  </div>
 
  <script src="script.js"></script>
</body>
</html>

 

 

Step 3: Create JavaScript file

 

 

Create a JavaScript file (e.g., script.js) in the same directory as the HTML file.

 

 

Step 4: Fetch photos from the Pexels API

 

 

In script.js, add the following code to fetch photos from the Pexels API:

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
const API_KEY = 'YOUR_PEXELS_API_KEY';
const searchInput = document.getElementById('searchInput');
const searchButton = document.getElementById('searchButton');
const resultsContainer = document.getElementById('results');
 
searchButton.addEventListener('click', searchPhotos);
 
async function searchPhotos() {
  const searchTerm = searchInput.value;
 
  try {
    const response = await fetch(`https://api.pexels.com/v1/search?query=${searchTerm}`, {
      headers: {
        Authorization: API_KEY
      }
    });
    const data = await response.json();
    displayPhotos(data.photos);
  } catch (error) {
    console.error(error);
  }
}
 
function displayPhotos(photos) {
  resultsContainer.innerHTML = '';
 
  photos.forEach(photo => {
    const photoElement = document.createElement('div');
    photoElement.classList.add('photo');
 
    const imgElement = document.createElement('img');
    imgElement.src = photo.src.medium;
    imgElement.alt = photo.photographer;
 
    photoElement.appendChild(imgElement);
    resultsContainer.appendChild(photoElement);
  });
}

 

 

Replace 'YOUR_PEXELS_API_KEY' with your actual Pexels API key obtained in Step 1.

 

 

In the code above, we select the necessary elements from the HTML DOM and attach an event listener to the search button.

 

 

The searchPhotos function is called when the search button is clicked. It fetches photos from the Pexels API based on the search term entered in the input field. The API key is sent in the request header.

 

 

The displayPhotos function takes an array of photo objects and dynamically creates HTML elements to display the photos in the resultsContainer div.

 

 

Step 5: Run the application

 

 

Save the files and open the HTML file in a web browser. You should see the search input field, a search button, and an empty results container. Enter a search term and click the search button. The app will fetch and display the corresponding photos from the Pexels API.

That’s it! You have created a photo search app in JavaScript using the Pexels API. Feel free to enhance the app with additional features, such as pagination, image click functionality, or styling improvements.

 

Recent Posts

  • Node.js Express Project to Remove Background of Images Using Rembg & Formidable Library in Browser
  • Node.js Tutorial to Remove Background From Image Using Rembg & Sharp Library in Command Line
  • Python 3 Flask Project to Remove Background of Multiple Images Using Rembg Library in Browser
  • Python 3 Rembg Library Script to Bulk Process Multiple Images and Remove Background in Command Line
  • Python 3 Rembg Library Script to Remove Background From Image in Command Line
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme