WEB TECHNOLOGY

PROJECT FILE on

“IMAGE SEARCH WEBSITE”

NAME :
ROLL NO.:

DECLARATION
I, [Your Full Name], a student of Class 12, [Stream/Subject], at [School Name],

hereby declare that all the information provided by me in the examination form and

school records is accurate and true to the best of my knowledge. I affirm that the

project work submissions are my original creations, and I have properly cited all

references wherever necessary. I assure that I have followed the guidelines set by the

school and board for completing my coursework and preparing for examinations.

Furthermore, I commit to adhering to all the rules and regulations during the

examination and in all school-related activities.

CERTIFICATE
This is to certify that [Student's Name], a student of Class 12, [Stream/Subject],

Roll No. [Roll Number], at [School Name], has completed the project titled [Project

Title] during the academic session [Year]. The project was done under my guidance

and follows the rules set by the [Board Name]. It is the student's own work, and all

sources have been properly mentioned. I wish the student the best for their future.

TABLE CONTENT
SR. NO. CONTENT
1. INTRODUCTION

(i)Aim of the project

(ii)Feature of the project

(iii)web technology

(iv)working of the web application

2. IMPLEMENTATION

3. OUTPUT

4. CHALLENGES AND LEARNINGS

5. BIBLIOGRAPHY
ACKNOWLEDGEMENT

I would like to express my heartfelt gratitude to my project guide, for their

invaluable guidance, support, and encouragement throughout the completion of

this project. Their insights and expertise were instrumental in shaping my

understanding of the subject and in guiding me through the project process. I

am also thankful to [School Name] for providing the necessary resources and a

conducive environment for learning. Special thanks to my classmates for their

collaboration and constructive feedback, which greatly enriched my project.

Additionally, I am deeply grateful to my family for their unwavering support

and encouragement, which motivated me to give my best effort. This project

would not have been possible without the combined efforts of everyone

involved. Thank you all for your contributions and support.

INTRODUCTION
ABOUT PROJECT:
The Image Search Website is an innovative web application designed to provide users

with a quick and efficient way to search for and explore a vast collection of images

based on their queries. With its intuitive and user-friendly interface, this tool allows

individuals to effortlessly input keywords, resulting in real-time search results

displayed in an appealing format. Each image is accompanied by essential metadata,

including source and resolution, fostering a better understanding of visual content and

its applications. The application is equipped with advanced filtering options, enabling

users to refine their searches by categories, colors, orientations, and image types,

enhancing the overall user experience. the Image Search Website incorporates modern

web technologies such as HTML, CSS, and JavaScript, ensuring full responsiveness

and seamless compatibility across various devices, including desktops, tablets, and

mobile phones. Beyond its practical functionality, this project serves as an excellent

demonstration of the power of web development, showcasing how engaging and

interactive user experiences can be created through thoughtful design and coding

practices. Whether for content creation, marketing, or simply satisfying curiosity

about images, the Image Search Website stands out as a valuable tool in the digital

landscape. It illustrates how technology can enhance everyday life and provide users

with meaningful insights into the world of visual content.

AIM OF THE PROJECT

The primary aim of the Image Search Website project is to create a user-friendly web

application that allows individuals to easily search for and explore a vast collection of

images based on their queries. This project focuses on enhancing user experience by

providing real-time search results displayed in an appealing format, along with essential

metadata, fostering a deeper appreciation for visual content and its applications.

Additionally, the project seeks to showcase the capabilities of modern web technologies,

such as HTML, CSS, and JavaScript, in developing interactive and responsive applications.

By emphasizing ease of use and accessibility, the Image Search Website aspires to be a

valuable tool for creatives, marketers, and casual users alike, serving practical purposes like

content creation and inspiration while promoting an understanding of image rights and

usage.

FEATURE OF THE PROJECT

1. User-Friendly Interface: An intuitive layout that makes it easy for users to

navigate and search for images effortlessly.

2. Real-Time Search: Instant search results as users type in keywords, allowing

for quick access to relevant images.

3. Advanced Filtering Options: Users can refine search results based on

categories, colors, orientations (landscape or portrait), and image types

(photographs, illustrations, icons).

4. Image Metadata: Each image is accompanied by essential information, such

as source, resolution, and usage rights, helping users make informed decisions.

5. Responsive Design: The website is fully responsive, providing a seamless

experience across various devices, including desktops, tablets, and mobile

phones.

WEB TECHNOLOGY
Web Technology refers to the tools, techniques, and methodologies used to create

and manage websites and web applications. It plays a pivotal role in enabling

communication, interaction, and services over the internet. Web technology

encompasses both client-side (front-end) and server-side (back-end)

technologies that work together to deliver seamless experiences to users.

1. Client-Side Technologies

Client-side technologies focus on how a website looks and behaves in a user's

browser. These technologies are essential for developing interactive, user-friendly
interfaces.

 HTML (HyperText Markup Language):

HTML is the fundamental language used to structure content on the web. It
defines the placement of elements such as headings, paragraphs, links, images,
and multimedia on a webpage. It forms the backbone of any website.
o Example: <h1>Welcome to My Website</h1>, <p>This is a
paragraph.</p>
 CSS (Cascading Style Sheets):
CSS is used to control the presentation and layout of the HTML structure. It
allows developers to customize the appearance of web pages by defining styles
like colors, fonts, margins, padding, and overall layout, ensuring that websites
are visually appealing and consistent across different devices.
o Example: body {background-color: lightblue; font-family: Arial;}

 JavaScript:
JavaScript is a programming language that enables interactivity on websites. It
is used to create dynamic content, such as pop-up dialogs, interactive forms,
animations, and handling user inputs in real-time without reloading the
webpage. JavaScript can also fetch and update data in the background
o Example: document.getElementById('button').addEventListener('click',
function() { alert('Button clicked!'); });

2. Server -side Technologies

Server-side technologies handle the logic and data processing behind the
scenes. They are responsible for processing user requests, interacting with
databases, and generating dynamic content.

Working of a Web Application

A web application operates based on a simple request-response cycle between the
client (browser) and the server.
1. User Request:
The user initiates a request by typing a URL into their browser or clicking a
link/button on the website. This request is sent via the internet to the web
server.
2. Web Server Processing:
The web server receives the request and performs the required processing. This
may include fetching data from a database, running scripts, or generating
dynamic content depending on what is requested.
3. Response:
The server processes the request and sends the requested webpage or data back
to the browser. If any data is required from the database (such as user login
details), the server will query the database before sending the final response.

PROJECT REQUIREMENT

1. Front-End Design:

 HTML:
o A basic HTML form that allows user input.
o The form will include:
 An input field for user data.
 A submit button to process the input.
 A section to display the output or results.
 CSS:
o Basic styling for the form to enhance visual appeal.
o Responsive design to ensure the application looks good on both mobile
and desktop devices.

2.Functionality:

 Input Validation:
o Validate that the user has entered data in the correct format and meets
any specified criteria (e.g., valid dates, numbers).
 Calculation:
o Use JavaScript to perform calculations based on the user input.
o The application should return results based on the calculations
performed (e.g., age, BMI, etc.).
 Display Output:
o After the user submits their input, the calculated result will be displayed
in a designated output area.

TECHNOLOGIES USED IN WEB APPLICATION

1. HTML (HyperText Markup Language)
HTML is the standard markup language for creating web pages. It provides the structure and layout of
a webpage by using various elements and tags.
Key Features of HTML:
 Structure: Defines the structure of web content through elements like headings,
paragraphs, lists, links, and images.
 Forms: Allows users to input data using forms, which are essential for interactive
applications.
 Semantic Elements: Supports semantic HTML, which enhances accessibility and
SEO by providing meaning to the content.
Example Elements:
 <input>: Used for user input fields.
 <button>: Represents a clickable button.
 <div>: A generic container for grouping content.

2. CSS (Cascading Style Sheets)

CSS is a stylesheet language used for describing the presentation of a document written in HTML. It
controls the layout, colors, fonts, and overall visual aesthetics of a webpage.
Key Features of CSS:
 Styling: Defines the look and feel of web pages, allowing customization of elements,
backgrounds, and layouts.
 Responsive Design: Uses media queries to ensure webpages look good on various
devices and screen sizes.
 Animations and Transitions: Enables dynamic effects to enhance user experience.
Example Concepts:
 Selectors: Target specific HTML elements for styling.
 Box Model: Understanding how margins, borders, and padding affect layout.
 Flexbox/Grid: Modern layout techniques for responsive design.
3. JavaScript JavaScript is a powerful scripting language that makes web pages interactive and
dynamic. In the image search App, JavaScript is used to handle the logic that performs the actual
image searching.

IMPLEMENTATION
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Search App</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Image Search App</h1>
<form>
<input type="text" id="search-input" placeholder="Search for images..." />
<button id="search-button">Search</button>
</form>
<div class="search-results">
<!-- <div class="search-result">
<img
src="https://plus.unsplash.com/premium_photo-1664361480561-
3bdcd6eb3b6f?ixlib=rb-
4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bmF0dXJlfGVufDB8fDB8fA
%3D%3D&auto=format&fit=crop&w=1000&q=60"
alt="image"
/>
<a
href="https://unsplash.com/photos/g-7X6T7vAI4"
target="_blank"
rel="noopener noreferrer"
>an image of a beach</a
>
</div>
<div class="search-result">
<img
src="https://plus.unsplash.com/premium_photo-1664361480561-
3bdcd6eb3b6f?ixlib=rb-
4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bmF0dXJlfGVufDB8fDB8fA
%3D%3D&auto=format&fit=crop&w=1000&q=60"
alt="image"
/>
<a
href="https://unsplash.com/photos/g-7X6T7vAI4"
target="_blank"
rel="noopener noreferrer"
>an image of a beach</a
>
</div>
<div class="search-result">
<img
src="https://plus.unsplash.com/premium_photo-1664361480561-
3bdcd6eb3b6f?ixlib=rb-
4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bmF0dXJlfGVufDB8fDB8fA
%3D%3D&auto=format&fit=crop&w=1000&q=60"
alt="image"
/>
<a
href="https://unsplash.com/photos/g-7X6T7vAI4"
target="_blank"
rel="noopener noreferrer"
>an image of a beach</a
>
</div> -->
</div>
<button id="show-more-button">Show more</button>
<script src="index.js"></script>
</body>
</html>

Style.css
body {
background-color: #f9f9f9;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
margin: 0;
}

h1 {
font-size: 36px;
font-weight: bold;
text-align: center;
margin-top: 40px;
margin-bottom: 60px;
}

form {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 60px;
}

#search-input {
width: 60%;
max-width: 400px;
padding: 10px 20px;
border: none;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 5px;
font-size: 18px;
color: #333;
}

#search-button {
padding: 10px 20px;
background-color: #4caf50;
color: white;
border: none;
font-size: 18px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease-in-out;
}

#search-button:hover {
background-color: #3e8e41;
}

.search-results {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

.search-result {
margin-bottom: 60px;
width: 30%;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
overflow: hidden;
}

.search-result:hover img {
transform: scale(1.05);
}

.search-result img {
width: 100%;
height: 200px;
object-fit: cover;
transition: transform 0.3s ease-in-out;
}
.search-result a {
padding: 10px;
display: block;
color: #333;
text-decoration: none;
transition: background-color 0.3s ease-in-out;
}

.search-result:hover a {
background-color: rgba(0, 0, 0, 0.1);
}

#show-more-button {
background-color: #008cba;
border: none;
color: white;
padding: 10px 20px;
display: block;
margin: 20px auto;
text-align: center;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
display: none;
}

#show-more-button:hover {
background-color: #0077b5;
}

@media screen and (max-width: 768px) {

.search-result {
width: 45%;
}
}
@media screen and (max-width: 480px) {
.search-result {
width: 100%;
}

form {
flex-direction: column;
}

#search-input {
margin-bottom: 20px;
width: 85%;
}
}
Index.js
const accessKey = "RZEIOVfPhS7vMLkFdd2TSKGFBS4o9_FmcV1Nje3FSjw";

const formEl = document.querySelector("form");

const searchInputEl = document.getElementById("search-input");
const searchResultsEl = document.querySelector(".search-results");
const showMoreButtonEl = document.getElementById("show-more-button");

let inputData = "";

let page = 1;

async function searchImages() {

inputData = searchInputEl.value;
const url = `https://api.unsplash.com/search/photos?page=${page}&query=$
{inputData}&client_id=${accessKey}`;

const response = await fetch(url);

const data = await response.json();
if (page === 1) {
searchResultsEl.innerHTML = "";
}

const results = data.results;

results.map((result) => {
const imageWrapper = document.createElement("div");
imageWrapper.classList.add("search-result");
const image = document.createElement("img");
image.src = result.urls.small;
image.alt = result.alt_description;
const imageLink = document.createElement("a");
imageLink.href = result.links.html;
imageLink.target = "_blank";
imageLink.textContent = result.alt_description;

imageWrapper.appendChild(image);
imageWrapper.appendChild(imageLink);
searchResultsEl.appendChild(imageWrapper);
});

page++;

if (page > 1) {
showMoreButtonEl.style.display = "block";
}
}

formEl.addEventListener("submit", (event) => {

event.preventDefault();
page = 1;
searchImages();
});

showMoreButtonEl.addEventListener("click", () => {
searchImages();
});

OUTPUT
CHALLENGES AND LEARNINIG
Challenges
1. Basic HTML/CSS Skills: Learning how to structure the webpage using HTML
and style it with CSS can be challenging at first, especially for those new to
coding.
2. Understanding JavaScript: Grasping the basics of JavaScript, including how
to manipulate the DOM (Document Object Model) and handle events, may feel
overwhelming.
3. Creating a Search Functionality: Implementing a basic search feature that
filters images based on user input can be tricky, especially if you're unfamiliar
with how to handle user input.
4. Image Display: Learning how to display images properly on the webpage,
including using the correct HTML tags and ensuring they load correctly, can be
challenging.
5. Responsive Design: Understanding how to make the website look good on
different screen sizes using CSS.

Learnings

1. HTML Basics: Gaining foundational skills in HTML for structuring web

pages, including understanding elements, attributes, and how to create forms.

2. CSS Styling: Learning how to use CSS for styling and layout, including

concepts like colors, fonts, margins, and responsive design techniques.

3. JavaScript Fundamentals: Understanding basic JavaScript concepts, such as

variables, functions, and event handling, which are essential for making the

website interactive.
BIBILIOGRAPHY

1. https://www.w3schools.com
2. https://www.geeksforgeeks.org/web-
development/
3.CBSE Class 12 Computer Science