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