A MICRO-PROJECT REPORT
ON
“Photo Gallery Website”
In the partial fulfilment of the requirement for the Diploma
In
Computer Technology
Submitted By
Hase Purva Bhausaheb
Godse Sanika Anil
Mansuri Aribafatema Shahidkhan
Under the Guidance of Prof. Musale. D. S
Amrutvahini Sheti and Shiksha Vikas Sanstha’s
Amrutvahini Polytechnic, Sangamner
Amrutvahini Sheti and Shiksha Vikas Sanstha’s
Amrutvahini Polytechnic, Sangamner
Department of Computer Technology
CERTIFICATE
This is to Certify that
Hase Purva Bhausaheb
Godse Sanika Anil
Mansuri Aribafatema Shahidkhan
Has satisfactorily carried out and completed the
microproject entitled:
“Photo Gallery Website”
As prescribed by MSBTE, Mumbai, as part of syllabus for
the partial fulfilment of Diploma in Computer Technology
Client-Side Scripting (22519)
For the academic year 2023-24
Prof- Mr. Musale D. S Prof- Mr. Kale. G. B
(Guide) (HOD)
INDEX
Sr No. Title
1.0 Rationale
2.0 Aim of Micro-Project
3.0 Course Outcomes Addressed
4.0 Literature Review
5.0 Actual Methodology Followed
6.0 Actual Resource Used
7.0 Output of Micro-Project
8.0 Skill Development/ Learning Outcomes of this Microproject
9.0 Application of this Microproject
Annexure II
M icro-Project Report
Online Feedback System
1.0 Rationale –
Creating a photo gallery website using JavaScript as a microproject is a compelling
endeavour with several strong rationales. Firstly, it serves as an excellent platform for
individuals interested in web development to gain practical experience with JavaScript,
one of the core technologies in modern web development.
2.0Aim of Micro-Project –
This website will provide a visually appealing platform for users to showcase and explore
photographs efficiently. The primary objective is to create an intuitive user experience,
allowing users to easily navigate through albums, view high-quality images, and
potentially. Through this project, we aim to demonstrate the capabilities of client-side
scripting in enhancing web interactivity and creating an aesthetically pleasing platform
for sharing and appreciating visual content.
3.0 Course Outcomes Addressed –
Co. No. Course Outcome Statement
CI503.1 Use3 different program flow control structure for design interactive web pages.
CI503.2 Exceute3 programs on Arrays and functions in Java script.
CI503.3 Implement3 event-based web forms and handling cookies using Java script.
CI503.4 Apply3 regular expressions for validations to design interactive webpages.
CI503.5 Implement3 Menus and navigations in web Pages.
4.0 Actual Methodology Followed –
o Identify the project's goals, objectives, and scope.
o Analyse the collected data to define the functional requirements of the project.
o Develop an abstract or project overview that provides a concise introduction to the
project.
o Create a step-by-step procedure that explains how the project works and its core
functionality.
o Write the project's code following the defined procedures and functional
requirements.
o Compile a comprehensive project report that documents the entire project lifecycle.
o Demonstrate the functioning project to stakeholders or project evaluators.
5.0 Literature Review:
The development of a photo gallery website using JavaScript is closely aligned with
the evolving trends and principles in web development. JavaScript, as a scripting
language, plays a pivotal role in enhancing the interactivity and responsiveness of
websites (Flanagan, 2020). By leveraging JavaScript, developers can create dynamic
and engaging user interfaces through the manipulation of the Document Object Model
(DOM) (Duckett, 2014). DOM manipulation is a fundamental skill for web
developers, as it enables the real-time loading and filtering of images in a photo
gallery.
6.0 Actual Resources Used –
Sr.
Name of Resource/material Specifications Quantity Remarks
No.
Computer System with broad
1. Zenith PC 2GB RAM
specifications
2. Operating System Linux Mint/Win 8.1
Office, Sublime Text 1
3. Software
Editor, Browser
4. Keyboard
5. Mouse
Program Code:
HTML file:
<!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>Photo Gallery</title>
<link rel="stylesheet" href="styles.css">
<style>
/* Your existing styles */
.filter-options {
margin-top: 20px;
}
.filter-options label {
margin-right: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>Photo Gallery</h1>
<h2>Enter the number of photos</h2>
<input
type="number"
id="input"
class="input"
value="2"
min="1"
max="10"
/>
<small class="errorMessage" id="errorMessage">Please enter a number between 1
and 10.</small>
<button class="btn" id="btn">Get Photos</button>
<!-- Filter options -->
<div class="filter-options">
<label for="landscape">Landscape</label>
<input type="checkbox" id="landscape" class="filter" value="landscape">
<label for="portrait">Portrait</label>
<input type="checkbox" id="portrait" class="filter" value="portrait">
<label for="nature">Nature</label>
<input type="checkbox" id="nature" class="filter" value="nature">
<!-- Add more categories as needed -->
</div>
<div class="gallery" id="gallery">
<!-- Gallery images will be displayed here -->
</div>
</div>
<script src="index.js"></script>
</body>
</html>
JS file:
const btnEl = document.getElementById("btn");
const errorMessageEl = document.getElementById("errorMessage");
const galleryEl = document.getElementById("gallery");
async function fetchImage() {
const inputValue = document.getElementById("input").value;
if (inputValue > 10 || inputValue < 1) {
errorMessageEl.style.display = "block";
errorMessageEl.innerText = "Number should be between 0 and 11";
return;
}
imgs = "";
try {
btnEl.style.display = "none";
const loading = `<img src="spinner.svg" />`;
galleryEl.innerHTML = loading;
await fetch(
`https://api.unsplash.com/photos?per_page=${inputValue}&page=${Math.round(
Math.random() * 1000
)}&client_id=B8S3zB8gCPVCvzpAhCRdfXg_aki8PZM_q5pAyzDUvlc`
).then((res) =>
res.json().then((data) => {
if (data) {
data.forEach((pic) => {
imgs += `
<img src=${pic.urls.small} alt="image"/>
`;
galleryEl.style.display = "block";
galleryEl.innerHTML = imgs;
btnEl.style.display = "block";
errorMessageEl.style.display = "none";
});
}
})
);
} catch (error) {
console.log(error);
errorMessageEl.style.display = "block";
errorMessageEl.innerHTML = "An error happened, try again later";
btnEl.style.display = "block";
galleryEl.style.display = "none";
}
}
btnEl.addEventListener("click", fetchImage);
CSS file:
body{
margin: 0;
font-family: 'Courier New', Courier, monospace;
background: linear-gradient(to bottom, lightgreen, lightblue);
display: flex;
min-height: 100vh;
justify-content: center;
align-items: center;
text-align: center;
}
.container{
background-color: aliceblue;
padding: 20px;
border-radius: 5px;
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
width: 90%;
margin: 10px;
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
align-items: center;
}
h2{
font-weight: 400;
}
.input{
padding: 20px 10px;
font-size: 18px;
background-color: white;
border-radius: 5px;
text-align: center;
width: 100px;
}
.errorMessage{
color: red;
font-weight: 600;
margin: 10px;
display: none;
}
.btn{
text-transform: uppercase;
width: 250px;
height: 45px;
margin: 20px 0;
font-size: 18px;
border-radius: 5px;
background-color: black;
color: aliceblue;
}
.btn:hover{
color: aliceblue;
background-color: green;
cursor: pointer;
transition: background-color 300ms ease-in-out;
}
.gallery img{
width: 400px;
height: 250px;
object-fit: cover;
border-radius: 5px;
margin: 5px;
}
.gallery{
display: none;
}
7.0 Output of Micro-project –
8.0 Skill Developed/Learning outcomes of this Micro-project: -
Improved understanding and application of JavaScript programming concepts and
syntax.
Proficiency in handling user interactions through event-driven programming.
Improved debugging skills for identifying and fixing issues in JavaScript code.
Opportunities to express creativity through design and layout choices.
9.0 Application of this Micro-project: -
Image Display: Create a web page that displays a grid or slideshow of images.
Users can click on images to view them in a larger size.
Image Upload: Allow users to upload their own images to the gallery. You can
implement a file input and use JavaScript to handle image uploads. Make sure to
validate and sanitize user input to prevent security issues.
Image Sorting: Implement sorting options to arrange images by date, name, or
other criteria. Users should be able to switch between these sorting options.
Image Filtering: Add filters to categorize images. Users can filter images by
categories, tags, or other metadata you provide.
