Hey guys today we are going to learn how to build an Image Search App with HTML CSS and JavaScript from scratch. Inside the project, you will learn how to use HTML & CSS to design it and then we will use JS to implement functionalities such as Search the Image and download the Image and Also you can add as many features as you want inside the application.
In today’s digital age, images play a crucial role in conveying information, emotions, and stories. As a result, the need for efficient image search tools has become more prominent than ever. In this article, we will explore the process of creating a simple yet effective Image Search App using the fundamental web technologies of HTML, CSS, and JavaScript.
Image Search App with HTML CSS and JavaScript
before moving the codes you can watch the video tutorial that I made. Inside the video, you will learn everything step by step from scratch. I hope the video is helpful and beneficial for you.
I hope you’ve watched the complete and hope you’ve learned something new from the tutorial. You can check the source codes of the project that I used inside the video.
You May Also Like:
- Build a Random Quote Generator with JavaScript
- Building a Chat Application with HTML CSS and JavaScript
- Currency Converter App Using HTML CSS and Javascript
- Movie App Using HTML CSS and JavaScript
- Weather App Using HTML CSS and JavaScript
HTML (Hypertext Markup Language) serves as the backbone of any web application, defining the structure and content of web pages. In our Image Search App, HTML will be used to create the basic structure. We’ll design a user-friendly interface that includes input elements for users to interact with the app.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
/>
<script defer src="js/script.js"></script>
<title>Image Searching App | OnlineITtuts</title>
</head>
<body>
<header>
<div class="content">
<h2>Image Search App</h2>
<p>Download high quality stock images</p>
<form>
<input type="text" placeholder="Search Image" class="search_input" />
<span><i class="fa fa-search"></i></span>
</form>
</div>
</header>
<div class="image_gallery">
<div>
<a href="#" target="_blank">
<img src="./img/img.jpg" alt="" />
</a>
</div>
<div class="v_img">
<a href="#" target="_blank">
<img src="./img/img1.jpg" alt="" />
</a>
</div>
<div class="h_img">
<a href="#" target="_blank">
<img src="./img/img2.jpg" alt="" />
</a>
</div>
<div class="l_img">
<a href="#" target="_blank">
<img src="./img/img.jpg" alt="" />
</a>
</div>
<div class="h_img">
<a href="#" target="_blank">
<img src="./img/img3.jpg" alt="" />
</a>
</div>
</div>
<button type="button" class="btn_load">Load More</button>
</body>
</html>
CSS (Cascading Style Sheets) enhances the visual presentation of our web application. By applying styles to HTML elements, we can create an aesthetically pleasing and responsive design. The Image Search App will benefit from a clean and intuitive layout, ensuring a seamless user experience. CSS will be employed to define colors, fonts, spacing, and overall styling to make the app visually appealing.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Ruda:wght@400;600;700&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #ddd;
font-family: "poppins", sans-serif;
}
header {
background: url("../img/img12.jpg") no-repeat center center/cover;
height: 40vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
color: #fff;
}
header::before {
position: absolute;
content: "";
width: 100%;
height: 40vh;
background: rgba(0, 0, 0, 0.6);
}
.content {
text-align: center;
position: relative;
}
.content h2 {
font-size: 4rem;
}
.content p {
font-size: 1.5rem;
}
.content input {
width: 100%;
outline: none;
border: none;
font-family: inherit;
padding: 1rem 1rem;
margin: 1rem 0;
border-radius: 5px;
font-size: 1.2rem;
}
.content span {
position: absolute;
top: 50%;
left: 94%;
transform: translate(-50%, 135%);
}
.content span i {
font-size: 2rem;
color: #ddd;
cursor: pointer;
}
.content span i:active {
transform: scale(0.98);
}
.image_gallery {
display: grid;
grid-template-columns: repeat(autofit, minmax(250px, 1fr));
grid-auto-rows: 250px;
grid-auto-flow: dense;
grid-gap: 40px;
padding: 20px;
margin: 5rem auto;
}
.image_gallery img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.v_img {
grid-row: span 2;
}
.h_img {
grid-column: span 2;
}
.l_img {
grid-row: span 2;
grid-column: span 2;
}
.btn_load {
outline: none;
border: none;
margin: 1rem auto;
padding: 1rem 3rem;
font-family: inherit;
background-color: #95020a;
color: #fff;
display: block;
font-size: 1rem;
border-radius: 5px;
cursor: pointer;
}
JavaScript, a versatile scripting language, brings life to our Image Search App by enabling interactivity and dynamic behavior. Through JavaScript, we can handle user input, perform actions, and manipulate the Document Object Model (DOM) to update the content of our web page in real-time.
In the context of our app, JavaScript will be used to capture user input, trigger the image search functionality, and display the results on the page without the need for page reloads. To make our Image Search App functional, we’ll integrate it with an image search API. APIs (Application Programming Interfaces) act as intermediaries that allow different software applications to communicate with each other. In this case, the image search API will fetch relevant images based on the user’s input and return the results to our app.
"use strict";
const inputEl = document.querySelector(".search_input");
const searchEl = document.querySelector(".fa-search");
const galleryContainer = document.querySelector(".image_gallery");
const btnLoad = document.querySelector(".btn_load");
const formEl = document.querySelector("form");
const API_KEY = "t-1PAyfarxTFtxPEUVK62P8ED4rZkE5FFkOou4UhJns";
let keywordSearch = null;
let page = 1;
async function searchImage() {
keywordSearch = inputEl.value;
const response = await fetch(
`https://api.unsplash.com/search/photos?page=${page}&query=${keywordSearch}&client_id=${API_KEY}&per_page=5`,
);
const data = await response.json();
const result = data.results;
console.log(data);
let htmlEl = "";
result.map((html) => {
galleryContainer.innerHTML = "";
htmlEl += ` <div>
<a href="${html.links.html}" target="_blank">
<img src="${html.urls.small}" alt="" />
</a>
</div>
<div class="l_img">
<a href="${html.links.html}" target="_blank">
<img src="${html.urls.full}" alt="" />
</a>
</div>
<div class="v_img">
<a href="${html.links.html}" target="_blank">
<img src="${html.urls.raw}" alt="" />
</a>
</div>
<div class="h_img">
<a href="${html.links.html}" target="_blank">
<img src="${html.urls.regular}" alt="" />
</a>
</div>
`;
});
galleryContainer.innerHTML = htmlEl;
}
formEl.addEventListener("submit", (e) => {
e.preventDefault();
searchImage();
});
searchEl.addEventListener("click", searchImage);
btnLoad.addEventListener("click", () => {
page++;
searchImage();
});
A great image search app not only provides accurate results but also prioritizes user experience. We’ll focus on implementing features such as loading indicators, error handling, and clear instructions to guide users through the search process seamlessly.
Conclusion:
Creating an Image Search App using HTML, CSS, and JavaScript is an exciting project that allows developers to apply fundamental web development skills. By combining these technologies and incorporating an image search API, we can build a user-friendly and visually appealing application that meets the modern demands for efficient image searching. This project serves as a foundation for those looking to delve deeper into web development and explore more advanced features and functionalities in future projects.
