A

Micro project
On

“Image to Pdf Converter Website”

Submitted By

Anurag Bankhele (37)

Guided By

Mrs. S.S. Kadam

Diploma Course in Computer Technology

(As per directives of I Scheme, MSBTE)

Sinhgad Technical Education Society’s

SOU.VENUTAI CHAVAN POLYTECHNIC

PUNE – 411041

ACADEEMIC YEAR 2024-2025

 Maharashtra State Board of
Technical Education
Certificate
This is to certify that Mr. Anurag Bankhele with Roll No. 37 of Semester V of Diploma in
Computer Technology of Institute Sou. Venutai Chavan Polytechnic (Code: 0040) has
successfully completed the Micro-Project in Client-Side Scripting Language (22519) for
the academic year 2024-2025 as prescribed in curriculums.

Program Code:CM
Course Code:CM/5/I
Place: SVCP, Pune Enrolment No: 2200400357
Date: Exam Seat No:

Mrs. S.S. Kadam Mrs. A.V. Kurkute Dr.(Mrs.) M.S. Jadhav

Course Teacher HOD Principal
Client-Side Scripting Language- 22519 Image to Pdf Converter website

INDEX

SR NO CONTENTS PAGE NO

1 Aim of the Micro-Project 01

2 Rationale 03

3 Course Outcomes Achieved 03

4 Literature Review 04

5 Actual Methodology Followed 05

6 Output 07

7 Skills Developed 07

8 Applications of Micro Project 08

Department of Computer Technology Academic Year 2024-25

Client-Side Scripting Language- 22519 Image to Pdf Converter website

Annexure - I
Micro-Project Proposal
“Portfolio Generator Website”

1.0 Aim of the Micro-Project:

The aim of the micro-project is to develop a Image to Pdf converter Website using
HTML, CSS & Javascript.

2.0 Intended Course Outcomes:

a) Create interactive web pages using program flow control structure.

b) Implement Arrays and functions in Java script.
c) Create event-based web forms using Java script.

3.0 Proposed methodology:

I. Study the concept of JavaScript.

II. Study various syntax and functions of JavaScript.

III. Study to create small programs using JavaScript and html.
IV. Make program for given criteria.
V. Prepare the final report

Department of Computer Technology Academic Year 2024-25

Client-Side Scripting Language- 22519 Image to Pdf Converter website

4.0 Action Plan:

Name of responsible
Sr. Details of Activity Planned Planned
Team members
No. Start Date Finish Date

Identify the requirements of the

1 project. Anurag Bankhele

2 Design the structure of the project Anurag Bankhele

Develop the program using in

3 JavaScript Anurag Bankhele

Debug code and eliminate errors

4 occurred. Anurag Bankhele

5 Test the Project Anurag Bankhele

6 Prepare the final report. Anurag Bankhele

5.0 Resources Required:

S. No. Resources required Specifications

1 Computer system Intel(R) Pentium CPU, RAM 4 GB

2 Operating System Windows 11, 64 Bit Operating System

3 Software used VScode, Notepad++, Google browser

6.0 Team members:

S. No. Roll. number Name of Student

1 37 Anurag Bankhele

Department of Computer Technology Academic Year 2024-25

Client-Side Scripting Language- 22519 Image to Pdf Converter website

Annexure - II
Micro-Project Report

1.0 Rationale:

The "Image to PDF Converter" website offers a practical solution for digitizing documents,
creating e-books, and compiling visual content into cohesive PDF files. It simplifies
document management, enhances professional presentations, and supports various user needs
in an efficient and user-friendly manner, making digital organization seamless and accessible.

2.0 Aim of the Micro-Project:

The aim of the micro-project is to develop a Image to Pdf Converter Website using HTML,
CSS & JavaScript

3.0 Course Outcomes Achieved:

a) Create interactive web pages using program flow control structure.

b) Implement Arrays and functions in Java script.
c) Create event-based web forms using Java script.

4.0 Literature Review

The Portfolio Generator Website is a basic web application built using HTML, CSS, and
JavaScript, focusing on creating interactive, event-driven web pages. This system
demonstrates key concepts in front-end development, including:

Department of Computer Technology Academic Year 2024-25

Client-Side Scripting Language- 22519 Image to Pdf Converter website

1. Interactive Web Pages: JavaScript is used to manipulate the DOM (Document Object
Model) to dynamically update the portfolio content, enabling users to add, edit, or
delete project entries and showcase their work in real-time without refreshing the page.
2. JavaScript Arrays and Functions: Image Preview Functionality: This
function is triggered when the user selects an image file to upload. Form Submission
Functionality: This function is triggered when the form is submitted.
3. Event-Driven Web Forms: The system relies on event listeners to trigger actions
when users submit the form, click buttons (like Edit), or interact with the UI elements.
These events dynamically update the content, providing a responsive and user-
friendly interface.

5.0 Actual Methodology Followed:

I. Study the concept of JavaScript programming language
II. Study various syntaxes and function of JavaScript.
III. Study to create small programs using JavaScript.
IV. Study various html tags.
V. Make program for given criteria.
VI. Prepare the final report.

6.0 Actual Resources Used:

S. No. Resources required Specifications

1 Computer system Intel(R) Pentium CPU, RAM 4 GB

2 Operating System Windows 11, 64 Bit Operating System

3 Software used VScode, Notepad++, Google browser

7.0 Source code of program

Index.html
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

Department of Computer Technology Academic Year 2024-25

Client-Side Scripting Language- 22519 Image to Pdf Converter website

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image to PDF Converter</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
font-family: Arial, sans-serif;
}
input, button {
margin: 10px;
padding: 10px;
font-size: 16px;
}
img {
max-width: 100%;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>Image to PDF Converter</h1>
<input type="file" id="imageInput" accept="image/*">
<button id="convertButton">Convert to PDF</button>
<div id="preview"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script>
document.getElementById('convertButton').addEventListener('click', async () => {
const imageInput = document.getElementById('imageInput');
if (imageInput.files.length === 0) {
alert('Please select an image.');

return;

Department of Computer Technology Academic Year 2024-25

Client-Side Scripting Language- 22519 Image to Pdf Converter website

const file = imageInput.files[0];

const reader = new FileReader();

reader.onload = async (event) => {

const imgData = event.target.result;

const { jsPDF } = window.jspdf;

const pdf = new jsPDF();

// Load the image

const img = new Image();

img.src = imgData;

img.onload = () => {

const imgWidth = pdf.internal.pageSize.getWidth();

const imgHeight = (img.height * imgWidth) / img.width;

pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight);

pdf.save('converted.pdf');

};

};

reader.readAsDataURL(file);

});

</script>

</body>

</html>

8.0 Output

Department of Computer Technology Academic Year 2024-25

Client-Side Scripting Language- 22519 Image to Pdf Converter website

Department of Computer Technology Academic Year 2024-25

Client-Side Scripting Language- 22519 Image to Pdf Converter website

9.0 Skills Developed:

During the course of this microproject on developing the Portfolio Generator Website, the
following skills were developed:

1. Web Development: Learned to build interactive web pages using HTML, CSS, and
JavaScript.
2. JavaScript Programming: Gained experience in working with arrays, functions, and
event handling.
3. Form Handling: Learned to manage and validate web forms for accurate data input.
4. Event-Driven Programming: Implemented event-based interactions for user actions.
5. Problem Solving: Improved debugging and optimization skills.
6. Responsive Design: Gained basic knowledge of making the UI accessible and
visually appealing across devices.

10.0 Application of this Microproject

1. Document Digitization: Users can convert physical documents and images into PDF
format for easy sharing and storage. This is especially useful for businesses and
educational institutions needing to digitize records.

2. Archiving Social Media Content: Users can preserve social media posts, such as
Instagram photos or Facebook albums, by converting them into PDF format for long-
term archiving.

3. Educational Resources: Teachers and students can create study materials and project
submissions by converting various images and resources into a single PDF document,
making it easier to organize and review content.

11.0 Conclusion:
The "Image to PDF Converter" website offers a practical solution for digitizing documents,
creating e-books, and compiling visual content into cohesive PDF files. It simplifies document
management, enhances professional presentations, and supports various user needs in an
efficient and user-friendly manner, making digital organization seamless and accessible.

12.0 References
I. www.w3schools.com
II. www.geeksforgeeks.org
III. developer.mozilla.org
IV. openai.com

Department of Computer Technology Academic Year 2024-25

Client-Side Scripting Language- 22519 Image to Pdf Converter website

Department of Computer Technology Academic Year 2024-25

Client-Side Scripting Language- 22519 Image to Pdf Converter website

Department of Computer Technology Academic Year 2024-25