<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Search</title>
<style>
#gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
margin-top: 20px;
}
img {
width: 100%;
height: auto;
border-radius: 8px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Image Search</h1>
<input type="text" id="searchInput" placeholder="Enter your search term">
<button onclick="searchImages()">Search</button>
<div id="gallery"></div>
<script>
async function searchImages() {
const searchInput = document.getElementById('searchInput');
const searchTerm = searchInput.value.trim();
if (searchTerm === '') {
alert('Please enter a search term');
return;
}
const accessKey = 'YOUR_UNSPLASH_ACCESS_KEY';
const apiUrl = `https://api.unsplash.com/search/photos?query=${searchTerm}&client_id=${accessKey}`;
try {
const response = await fetch(apiUrl);
const data = await response.json();
displayImages(data.results);
} catch (error) {
console.error('Error fetching images:', error);
}
}
function displayImages(images) {
const gallery = document.getElementById('gallery');
gallery.innerHTML = '';
images.forEach(image => {
const imgElement = document.createElement('img');
imgElement.src = image.urls.regular;
imgElement.alt = image.alt_description;
imgElement.addEventListener('click', () => openImage(image.urls.full));
gallery.appendChild(imgElement);
});
}
function openImage(imageUrl) {
window.open(imageUrl, '_blank');
}
</script>
</body>
</html>