Design an Image Search App in HTML CSS & JavaScript

Last Updated : 29 Jul, 2024

Image Search Application contains an input field, which takes the choice or type of the image for which the user is searching. When the user enters the search string and clicks on the button, the top 10 images are shown to the user. If the user wants more images, then there is a Generate More button through which more images can be generated.

Preview Image

Screenshot-from-2024-07-25-01-07-04 — Preview of Image Search App

Approach

Create the Image Search App UI Structure using HTML Elements like <div>, <h1>, <input>, and <button>. Embed all the essential CDN links for external Fonts, etc.
When the entire structure of the application is designed, then using CSS styling properties like box-shadow, padding, width, overflow, etc. style the application.
Create transition effects, animations, loading spinner effects using keyframes, and more stying properties.
In the JavaScript file, specify the API URL in the variable, retrieve the input element value, and validate the query with basic validation like if the input is not present, no images are present for the search query.
Send the Request to the Unsplash API for the images using the searchImages() function, and receive the 10 images displayed in the card component. If the user wants to retrieve more images, then the moreImgFn() function retrieves more than 10 images. The images can be viewed in attractive modal form.

Example: The below example describes the basic implementation for an Image Search App in HTML, CSS, and JavaScript.

HTML

<!DOCTYPE html>
<html>
  
<head>
	<title>GFG</title>
	<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
	<link rel="stylesheet" href=
"https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap">
	<link rel="stylesheet" href="style.css">
</head>

<body>
	<div class="app-container">
		<header>
			<h1 style="color: green;">
				GeeksforGeeks
			</h1>
			<h2 style="color: #000;">
				Image Search App
			</h2>
			<div class="search-bar">
				<input type="text" id="searchInput"
					placeholder="Search for images">
				<button onclick="searchImages()">
					Search
				</button>
			</div>
		</header>
		<main id="imageContainer"
			class="animate__animated animate__fadeIn">
		</main>
		<div class="load-more">
			<button onclick="moreImgFn()">
				Generate More
			</button>
		</div>
	</div>
	<div id="imageModal" class="modal">
		<span class="close" onclick="closePreFn()">
			×
		</span>
		<img id="modalImage" class="modal-content"
			alt="Image Preview">
	</div>
	<script src="script.js"></script>
</body>

</html>

CSS

body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    background: linear-gradient(to right, #4CAF50, #2196F3);
    color: #fff;
}

.app-container {
    max-width: 900px;
    margin: 50px auto;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

header {
    text-align: center;
    margin-bottom: 20px;
}

h1 {
    margin: 0;
    font-size: 3em;
    font-weight: bold;
}

.search-bar {
    margin-top: 10px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

input {
    padding: 20px;
    border: 2px solid #FF4961;
    font-size: medium;
    border-radius: 5px 0 0 5px;
    width: 60%;
}

button {
    padding: 30px 30px;
    margin-left: -2px;
    background: #FF595E;
    color: #fff;
    border: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
}

main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
}

.card {
    flex: 0 0 calc(20% - 10px);
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    background: #fff;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.card img {
    width: 100%;
    flex: 1;
    object-fit: cover;
}

.load-more {
    text-align: center;
    margin-top: 20px;
}

button {
    padding: 10px 20px;
    background: #FF595E;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
}

button:hover {
    background: #FF4961;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 20px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 800px;
}

.close {
    color: #fff;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 2em;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #FF595E;
    text-decoration: none;
    cursor: pointer;
}

@media(max-width: 800px) {
    .card {
        flex: 0 0 calc(50% - 10px);
    }
}

@media(max-width: 600px) {
    .card {
        flex: 0 0 calc(100% - 10px);
    }
}

JavaScript

const apiKey = "API_KEY";
let page = 1;
function searchImages() {
	const imgName = 
		document.getElementById("searchInput").value.trim();
	if (!imgName) {
		alert("Please enter a search query.");
		return;
	}
	const url = `API_URL`;
	fetch(url)
		.then(response => response.json())
		.then(data => {
			if (data.results.length === 0) {
				alert("No images found for the given search query.");
			} else {
				showImgFn(data.results);
			}
		})
		.catch(error => console.error('Error fetching images:', error));
}
function showImgFn(images) {
	const imageContainer = 
		document.getElementById("imageContainer");
	imageContainer.innerHTML = "";
	images.forEach(image => {
		const card = 
			document.createElement("div");
		card.classList.add("card");
		const img = 
			document.createElement("img");
		img.src = image.urls.regular;
		img.alt = "Image";
		img.onclick = function () { 
			preImgFn(image.urls.full); 
		};

		card.appendChild(img);
		imageContainer.appendChild(card);
	});
}
function moreImgFn() {
	page++;
	searchImages();
}
function preImgFn(imageUrl) {
	const m = 
		document.getElementById("imageModal");
	const mImg = 
		document.getElementById("modalImage");
	m.style.display = "block";
	mImg.src = "";
	mImg.src = imageUrl;
	mImg.onload = function () {
		mImg.onload = null;
	};
}
function closePreFn() {
	const modal = 
		document.getElementById("imageModal");
	modal.style.display = "none";
}
document.getElementById("searchInput").value = "Computer";
searchImages();

Output:

Design an Image Search App in HTML CSS & JavaScript

gpancomputer

Improve

Article Tags :

Design an Image Search App in HTML CSS & JavaScript

Preview Image

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?