Actual Report Css

Amrutvahini Polytechnic,Sangamner
Academic Year: 2023 -2024
Report
On
Micro Project
TITLE: IMAGE SEARCHING WEBSITE

Program Code: Computer Technology Dept
Course Name: Client Side Scripting Language
Course Code:22519
Submitted by
Roll No: – 111 Name: -Ugale Gauri Sanjay
Roll No: – 119 Name: -Vaidya Sakshi Vijay
Roll No: – 130 Name: -Sangale Vibhuti Balu
Submitted to
Ms. Baheti S.S.
MAHARASHTRA STATE BOARD OF
TECHNICAL EDUCATION
Certificate
This is to certify that Ms. Vaidya Sakshi Vijay Roll No. 119 of fifth Semester
Diploma in Computer Technology Dept(CM5I) of Amrutvahini Polytechnic (0080)
has completed the Microproject satisfactory in Subject Client Side Scripting Language
(22519) for the academic year 2023 to 2024 as prescribed in the MSBTE curriculum.
Place: Sangamner Enrollment No.: 2100800461
Date: ___________________ Exam Seat No.: ____________________
Subject Teacher Head of the Department Principal
Seal of
Institution
TECHNICAL EDUCATION
Certificate
This is to certify that Ms. Ugale Gauri Sanjay Roll No. 111 of fifth Semester
Date: ___________________ Exam Seat No.: ____________________
Seal of
Institution
TECHNICAL EDUCATION
Certificate
This is to certify that Ms. Sangale Vibhuti Balu Roll No. 130 of fifth Semester
Date: ___________________ Exam Seat No.: ____________________
Seal of
Institution
Annexure – II
Micro-Project Report
Title of Micro-Project:Image Searching Website Using JavaScript
1.0 Rationale
The primary aim of our image searching website project is to provide users with an efficient and user-
friendly platform for searching and discovering images. We want to create an interface that allows users
to easily and effectively find the images they need, whether it's for research, entertainment, or any other
purpose. Scalability and performance optimization are crucial considerations. We will design the website
to handle a growing number of users and images without compromising performance.
2.0 Aims/Benefits of the Micro-Project
Aims:
1.Learning JavaScript Fundamentals: Developing a quiz app involves working with JavaScript to
handle user interactions, dynamically update the UI, and manage the quiz logic. It's a great way to
reinforce your understanding of basic JavaScript concepts like variables, functions, loops, and
conditionals.
2.Applying HTML and CSS Skills: You'll practice structuring your app's user interface using HTML
and styling it with CSS. This project allows you to enhance your skills in creating responsive and
visually appealing web designs.
3.Understanding DOM Manipulation: Manipulating the Document Object Model (DOM) is a core
skill in web development. A quiz app provides hands-on experience in modifying the DOM based on
user input and displaying different elements dynamically.
4.Working with Events: You'll learn how to handle various events like button clicks, user input, and
timers. This is important for creating interactive web applications.
5.Implementing Image Searching Website: Creating an image searching website using HTML, CSS,
and JavaScript involves several key components. First, in the user interface, HTML structures the
website, defining elements like the search bar and image display area. CSS is then used to style the site,
ensuring a visually appealing layout and responsive design. The search bar, implemented with HTML
and JavaScript, allows users to input search queries, and JavaScript handles user interactions and
triggers search queries.
Benefits:
1.Practical Application of Concepts: The project lets you apply the theoretical knowledge you've
gained in JavaScript, HTML, and CSS to a real-world scenario. This practical experience is crucial for
solidifying your skills.
2.Portfolio Enhancement: Completed projects like a image searching website can be added to your
portfolio, showcasing your abilities to potential employers or clients. It demonstrates your proficiency
in web development.
3.Problem-Solving: You'll encounter challenges while building the website, such as handling user
inputs, displaying results, and managing transitions. Overcoming these challenges improves your
problem-solving skills.
4.Customization and Creativity: The image display section is responsible for showing the search
results. Using JavaScript, you dynamically update this area with the search results, creating new
elements for each image and appending them to the display area. Additionally, for each image, you can
display relevant metadata such as title, author, and tags, fetched along with the image data.
5.Team Collaboration: If you're working with others, this project offers insights into collaborating on
a small-scale project, including version control, task allocation, and communication.
6.Building Confidence: Successfully completing a micro project boosts your confidence in your
abilities. It's a stepping stone towards tackling more complex projects.
the ultimate aim is not only to build a functional app but also to gain a deeper understanding of web
development concepts and refine your skills through hands-on experience.
3.0 Course Outcomes Addressed
Co. No. Course Outcome Statement

CI505.1 Use3 different program flow control structure for design interactive web pages .
CI505.2 Exceute3 programs on Arrays and functions in Java script.
CI505.3 Implement3 event based web forms and handling cookies using Java script.
CI505.4 Apply3 regular expressions for validations to design interactive webpages.
CI505.5 Implement3 Menus and navigations in web Pages.
4.0 Literature Review
Web Development Technologies: Explore the current best practices and trends in HTML, CSS, and
JavaScript for effective web development.
User Interface and Responsive Design: Review resources on responsive design and CSS frameworks
to ensure your website looks good on various devices.
User Experience and Usability: Understand UX design principles and usability testing to create an
engaging and intuitive user experience.
JavaScript Search Functionality: Learn how to use JavaScript, including frameworks like jQuery,
for implementing search functionality and dynamic page updates.
Performance Optimization: Optimize your website for speed by considering techniques like image
loading, minimizing HTTP requests, and performance audit tools.
Security Best Practices: Familiarize yourself with web security best practices to protect your site from
common vulnerabilities.
Accessibility (a11y): Ensure your website is accessible to users with disabilities by following web
accessibility standards.
Browser Compatibility: Address cross-browser compatibility issues and testing tools to ensure your
website works well on different browsers.
Front-End Development Tools: Use front-end development tools and build systems to streamline
your workflow.
Code Optimization: Optimize your code for faster load times and improved performance.
Mobile-First and Progressive Web App (PWA) Principles: Consider a mobile-first approach and
explore the benefits of converting your website into a Progressive Web App for a more app-like
experience.
Methodology:
Requirement Analysis:
Begin by defining the project's objectives, target audience, and key features. Understand the specific
requirements for your image searching website, including the type of images to be searched and any
additional features, such as user accounts or personalization.
2. Design and Planning:
Create a wireframe or mockup of the website's layout to plan its structure and user interface. Decide on
the visual design, color scheme, and typography. Outline the user flow and interactions.
3. Technology Selection:
Choose the appropriate web development tools and frameworks for your project, such as a text editor,
version control system (e.g., Git), and any JavaScript libraries or frameworks (e.g., jQuery, React).
4. Data Source Selection:
Decide whether you will maintain your own image database, use external APIs for image retrieval, or
a combination of both. Explore potential sources for image data and understand their usage terms.
5. Front-End Development:
Start building the front-end of your website:
Create the HTML structure for your web pages, including the search bar, image display area, and user
interface elements.
Style the website using CSS to achieve the chosen visual design.
Implement JavaScript to handle user interactions, search functionality, and dynamic updates of the
image display area.
6. Back-End Development (Optional):
If your project requires a back-end component (e.g., for user accounts), develop it using a suitable
server-side technology such as Node.js, Python, or PHP.
7. Image Data Handling:
Implement mechanisms to fetch and manage image data. If using external APIs, integrate them into
your website. If maintaining your database, design a database schema and create scripts for data entry
and retrieval.
8. Search Functionality:
Develop the image search functionality using JavaScript. Handle user queries and process them to
retrieve relevant images from your data source. Update the image display area with the search results.
9. User Interface Enhancement:
Implement additional features such as image metadata display, pagination, user interactions (e.g.,
viewing images in full size), and any filters or sorting options.
10. Performance Optimization:
Optimize your website for fast loading times. Employ techniques like lazy loading for images, browser
caching, and minification of CSS and JavaScript files.
11. Security Measures:

Implement security measures to protect user data and prevent common web vulnerabilities. This
includes input validation, data encryption, and user authentication (if applicable).
Algorithm:
Algorithm for Building an Image Searching Website
1. Start
2.Initialize ‘accessKey’ with your Unsplash API key.
3.Get references to essential DOM elements:
• ‘formEl’: The search form element.
• ‘inputEl’: The input field for the search query.
• ‘searchResults’: The container for displaying search results.
• ‘showMore’: The "Show more" button.
4.Initialize variables:
• ‘inputData’ to store the user's search query.
• ‘Page’ to track the current page of search results.
5.Define an asynchronous function ‘searchImages’:
a. Get the user's search query from ‘inputEl’.
b. Construct the Unsplash API URL with the search query and the ‘page’.
c. Fetch data from the Unsplash API.
d. Process the API response and extract image results.
e. If it's the first page (‘page === 1’), clear existing search results.
f. Iterate through the image results:
• Create HTML elements for each result, including the image and a link to the image
source.
• Append these elements to the ‘searchResults’ container in the HTML.
g. Increment the ‘page’ variable.
h. If ‘page’ is greater than 1, display the "Show more" button.
6.Set up event listeners:
• Listen for form submission:
a. Prevent the default form submission.
b. Reset ‘page’ to 1.
c. Call the ‘searchImages’ function to perform the search.
Listen for "Show more" button click:
d. Call the ‘searchImages’ function to load more search results.
7.End
6.0 Actual Resources used
Sr.
Name of Resource/material Specifications Quantity Remarks
No.
Computer System with broad Zenith Pc
1. 2GB Ram
specifications
Linux
2. Operating System Mint/Win8.1 1
3. Software Office
4. Keyboard
5. Mouse
7.0 Outputs of the Micro-Projects:

Actual Code:
1.HTML file:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Image Search App</h1>
<form action="">
<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://images.unsplash.com/photo-1691971943379-5965d3d7f07f?ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDEwfHhIeFlUTUhMZ09jfHxlbnwwfHx8fHw%3D&auto=f
ormat&fit=crop&w=600&q=60"
alt="Dog and a Woman" />
<a
href="https://unsplash.com/photos/a-woman-kneeling-down-next-to-a-dog-TB8LXHZeK-w"
target="_blank"
>Dog and a Woman</a
>
</div>
<img
<a
target="_blank"
>Dog and a Woman</a
>
</div>
<img
<a
target="_blank"
>Dog and a Woman</a
>
</div>
</div>
<button id="show-more-button">Show more</button>

<script src="script.js"></script>
</body>
</html>
2. CSS file:-
@import
url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;1,200&display=sw
ap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
line-height: 1.6;
}
h1{
font-size: 36px;
font-weight: bold;
text-align: center;
margin: 40px 0 60px 0;
}
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 6px rgba(0, 0, 0, 0.2);
border-radius: 5px;
font-size: 18px;
color: #333;
}
#search-button{
padding: 10px 20px;
background-color: #138065;
color: #fff;
border: none;
font-size: 18px;
cursor: pointer;
border-radius: 5px;
margin-left: 10px;
}
.search-results{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
}
.search-result{
margin-bottom: 60px;
width: 30%;
height: 100%;
border-radius: 5px;
overflow: hidden;
}
.search-result img{
width: 100%;
height: 200px;
object-fit: cover;
}
.search-result:hover img{
opacity:0.8;
}
.search-result a{
font-size: 20px;
text-decoration: none;
color: #333;
display: block;
padding: 10px;
text-transform: capitalize;
}
#show-more-button{
background-color: #008cba;
font-size: 18px;
border: none;
color: #fff;
padding: 10px 20px;
text-align: center;
display: block;
margin: 30px auto;
border-radius: 5px;
cursor: pointer;
display: none;
}
@media screen and (max-width: 768px) {

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

.search-result{
width: 100%;
}
}
3.Script file:-
const accessKey = "HkYE-95ud-FYV-zxUgSV6MDjUP-KHitqB5JhlDqZqM8" //restoring api key
const formEl = document.querySelector("form")

const inputEl = document.getElementById("search-input")
const searchResults = document.querySelector(".search-results")
const showMore = document.getElementById("show-more-button")
let inputData = "";

let page = 1;
async function searchImages(){

inputData=inputEl.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()
const results = data.results;

if(page === 1){
searchResults.innerHTML = "";
}
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)
searchResults.appendChild(imageWrapper);
});
page++;
if(page>1){
showMore.style.display = "block";
}
}
formEl.addEventListener("submit",(event) =>{
event.preventDefault();
page = 1;
searchImages();
})
showMore.addEventListener("click",() =>{
searchImages();
})
Output:-
8. Skill Developed / Learning outcomes:
● Analyzing the problem
● Problem solving approach
● Planning
● Design skill
● Logical skill
● Programming
● Testing and Troubleshooting
● Presentation
● Report writing
9.Applications of the Micro-Project:

1.Learning JavaScript:
Creating a quiz app is a great way to learn and practice JavaScript programming concepts such as
variables, functions, conditional statements, loops, and event handling.
2.Interactive Learning Tool:

Teachers can use a simple quiz app to engage students in an interactive learning experience. They can
create quizzes on various subjects and allow students to test their knowledge.
3.Skill Assessment:
Organizations or online platforms can use quiz apps to assess the skills and knowledge of candidates
or learners. This can be used for job interviews, training evaluations, or educational assessments.
4.Website Enhancement:
Adding a quiz section to a website can make it more interactive and engaging for visitors. For example,
a blog about history could have history quizzes to test readers' understanding.
5.Language Learning:
Language learning apps can include quizzes to test users' vocabulary, grammar, and comprehension
skills. This provides an opportunity for learners to practice and reinforce their language skills.
6.Revision and Review:

Students can use quiz apps as a tool for self-assessment and revision. Creating quizzes based on their
study material helps them review and consolidate their knowledge.
Teacher Signature
(Ms. S.S.Baheti)
Amrutvahini Polytechnic, Sangamner
Computer Technology Department
Annexure –III & IV (Rubrics & Micro Project Evaluation Sheet)
Name of Student: Vaidya Sakshi Vijay Enrollment No:2100800461
Name of Program:CM5I Semester:5th
Course Title: Client Side Scripting Language Code:22519
Title of Micro Project: Image Searching Website
Course Outcomes:
1. Use3 different program flow control structure for design interactive web pages .
2. Exceute3 programs on Arrays and functions in Java script.
3. Implement3 event based web forms and handling cookies using Java script.
4. Apply3 regular expressions for validations to design interactive webpages.
5. Implement3 Menus and navigations in web Pages.
Indicators for different levels of performance evaluation scale (1 to 2)
Criteria A) Process & Product Assessment (Performance in Group Activity Out of 6)
Poor (1) Marks Average (1.5) Marks Good (2) Marks
At least two
Literature No reference is used At least one reference
references website
review / only taken material website or book is referred
or book are referred
Information from Google and copy to collect literature or
to collect literature
collection pasted information
or information
a) Well assembled /
a) Just assembled /
a) Quality of a) Incomplete fabricated with
fabricated, not in proper
prototype/ fabrication / assembly / proper shape
shape, dimensions /
model / chart / survey dimensions / well
average survey
drawing b) Most of the content defined survey
b) Most of the portion in
b) Quality of is non-relevant. Report b) Everything in the
project report irrelevant
project report / drawing is not project report is
and is formatted but some
(for study formatted as per formatted as per
of the portion is remaining
project) instructions. the instructions
to format.
given.
No previous review and No previous review but Reviewed &
Timely
submission after the submission on or before submission on or
submission.
given date. given date. before given date.
Criteria B) Individual Presentation/Viva (Out of 4)
Major information is Included major Well organized,
Presentation
not included, information but not well included major
of the micro
information is not well organized and not information, well
project
organized presented well presented
Answer to
Could not reply to Replied to considerable
sample Replied most of the
considerable number number of questions but
questions questions properly.
of question. not very properly.
(Oral)
(A) (B)
Process & ProductAssessment Individual Presentation/Viva Total Marks
(06) (04) (10)
Comments/ Suggestions about team work/leadership/Inter-personal communication (if Any)

Name & Designation of the Teacher:
Dated Signature:
Name of Student: Ugale Gauri Sanjay Enrollment No:2100800372
Course Title: Client Side Scripting Language Code:22519
Course Outcomes:
1. Use3 different program flow control structure for design interactive webpages .
At least two
references website
or information
c) Well assembled /
c) Just assembled /
c) Quality of c) Incomplete fabricated with
shape, dimensions /
average survey
drawing d) Most of the content defined survey
d) Most of the portion in
d) Quality of is non-relevant. Report d) Everything in the
to format.
given.
Timely
submission.
Presentation
of the micro
project
Answer to
(Oral)
(A) (B)
(06) (04) (10)

Dated Signature:
Name of Student: Sangale Vibhuti Balu Enrollment No:2100800667
Course Title:Client Side Scripting Language Code:22519
Course Outcomes:
1. Use3 different program flow control structure for design interactive web pages .
At least two
references website
or information
e) Well assembled /
e) Just assembled /
e) Quality of e) Incomplete fabricated with
shape, dimensions /
average survey
drawing f) Most of the content defined survey
f) Most of the portion in
f) Quality of is non-relevant. Report f) Everything in the
to format.
given.
Timely
submission.
Presentation
of the micro
project
Answer to
(Oral)
(A) (B)
(06) (04) (10)

Dated Signature:

Actual Report Css

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Actual Report Css

Uploaded by

Copyright:

Available Formats

Amrutvahini Polytechnic,Sangamner

Academic Year: 2023 -2024

TITLE: IMAGE SEARCHING WEBSITE

Diploma in Computer Technology Dept(CM5I) of Amrutvahini Polytechnic (0080)

Place: Sangamner Enrollment No.: 2100800461

Date: ___________________ Exam Seat No.: ____________________

Subject Teacher Head of the Department Principal

Diploma in Computer Technology Dept(CM5I) of Amrutvahini Polytechnic (0080)

Place: Sangamner Enrollment No.: 2100800372

Date: ___________________ Exam Seat No.: ____________________

Subject Teacher Head of the Department Principal

Diploma in Computer Technology Dept(CM5I) of Amrutvahini Polytechnic (0080)

Place: Sangamner Enrollment No.: 2100800667

Date: ___________________ Exam Seat No.: ____________________

Subject Teacher Head of the Department Principal

2.0 Aims/Benefits of the Micro-Project

3.0 Course Outcomes Addressed

Co. No. Course Outcome Statement

CI505.4 Apply3 regular expressions for validations to design interactive webpages.

CI505.5 Implement3 Menus and navigations in web Pages.

4.0 Literature Review

11. Security Measures:

7.0 Outputs of the Micro-Projects:

<button id="show-more-button">Show more</button>

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

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

const accessKey = "HkYE-95ud-FYV-zxUgSV6MDjUP-KHitqB5JhlDqZqM8" //restoring api key

const formEl = document.querySelector("form")

let inputData = "";

async function searchImages(){

const response = await fetch(url)

const results = data.results;

9.Applications of the Micro-Project:

2.Interactive Learning Tool:

6.Revision and Review:

Comments/ Suggestions about team work/leadership/Inter-personal communication (if Any)

Comments/ Suggestions about team work/leadership/Inter-personal communication (if Any)

Comments/ Suggestions about team work/leadership/Inter-personal communication (if Any)

You might also like

Date: _ Exam Seat No.: __

Date: _ Exam Seat No.: __

Date: _ Exam Seat No.: __