Pexels API Photo Search App in Javascript

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:

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

<!DOCTYPE html>

<html>

<head>

<title>Pexels API Photo Search App</title>

</head>

<body>

<h1>Pexels API Photo Search App</h1>

<button id="searchButton">Search</button>

</div>

</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:

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);
  });
}

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.