A

PROJECT REPORT ON

QR CODE GENERATOR
In Partial fulfillment of Diploma in Computer Engineering

In the subject of :
Client-Side Scripting

Submitted By
Rakesh Raut
Vinit Sahare
Sakshi A. Dongare
Asawari K. Hinglaspure
Submitted To

Maharashtra State Board of Technical Education, Mumbai

(M.S.)
Under the guidance
of Mr.M.R.Torney

(Lecturer in Computer Engineering)

Department of Computer
Engineering

GOVERNMENT POLYTECHNIC ARVI

Dist –Wardha
(2024-2025)
1
 Government Polytechnic, Arvi
Department of Computer Engineering

Certificate

This is to certify that the student mentioned below, who is in the Fifth
Semester of Diploma in Computer Engineering, has satisfactorily
completed the Micro-project entitled "QR Code Generator" in Client-Side
Scripting (22519) during the academic year 2024-25 as prescribed in the
MSBTE curriculum.

Roll Name of Student Enrollment No.

No.
02 Rakesh Sudhakar Raut 2201320080
03 Vinit Dattaji Sahare 2201320081
13 Sakshi Arvind Dongare 2201320218

25 Asawari Kishor Hinglaspure 2201320253

Subject Teacher Head of the Department Principal

Mr. M.R.Torney Dr. M. A. Ali Dr. M. A. Ali

Place: Arvi
Date:

2
 DECLARATION

We undersigned hereby declare that the micro project report entitled “QR
Code Generator” Contents is the outcome of our own literature survey.
We further declare that contents of this report are properly cited and well
acknowledged. This present report is not submitted to any other
examination of this or any other institute for the award of any diploma.

(Signature)

Place: Arvi

Date:

3
 PART A-PROJECT PROPOSAL

“QR CODE GENERATOR”

1. Brief Introduction :
The provided code is a basic web application that generates QR codes from user input.
It uses HTML for structure, featuring a text input field where users can type the
content they wish to convert into a QR code. A button labeled "Generate QR" triggers
the QR code creation process when clicked. The QR codes are generated using the
QRCodeJS library, which is loaded via a CDN. The JavaScript function generateQR
retrieves the text input, clears any existing QR code from the page, and creates a new
one inside a designated container (<div>). If no text is entered, an alert prompts the
user to provide input. This simple interface allows users to dynamically generate and
view QR codes based on their input.

2. Aim Of The Micro-Project:

• QR Code Generator using CSS.
• The microproject focuses on simplicity, user interaction, and real-time QR code generation.
• To get the information about functions use in JavaScript.

3. Intended Course Outcomes :

• Create interactive web pages using program flow control structure.
• Create event-based web forms using Javascript.
• Create interactive web page using regular expressions for validations.
• Create Menus and Navigations in web pages.
• Implement Arrays and functions in JavaScript.

4. Literature Review :
The provided QR code generator is a web-based application leveraging the QRCodeJS library
to dynamically create QR codes from user input. QR codes, first developed by Denso Wave,
have become a crucial tool in modern digital interactions due to their fast readability and
ability to store various forms of data, such as text, URLs, and contact information. This code
aligns with broader trends in web development where lightweight JavaScript libraries are used
to add interactive features, enhancing user experience without requiring heavy server-side
processing. Existing literature on QR code applications emphasizes their utility across
industries like marketing, education, and logistics, where they simplify data access and
sharing. The QRCodeJS library, in particular, simplifies the integration of QR code
generation into web applications by enabling developers to generate codes based on user input
in real-time. Studies on the usage of QR codes in web-based systems, such as those by Zhang
et al., indicate that user interaction with QR codes is highly effective for tasks such as quick
information retrieval and mobile-friendly content sharing. The provided code is a practical
example of how such technology can be implemented efficiently using minimal resources,
offering users an intuitive, on-the-fly QR code creation experience.

4
 5. Proposed Methodology:
 Understand the topic selected by all group members.
 Discuss about the topic with group members.
 Divide the topics thoroughly to each member of group.
 Collected information from members and verify from our mentor.

6. Resources Required:

S.No. Name of Resources/material Specifications Qty Remarks

1 Computer/laptop Core i5 -3750 3.20 1 ----

GHz 8 GB Ram 64-
bit operating system

2 Software Microsoft word --- ----

7. Action Plan:

S. Details of activity Planned Planned Name of

No. Start date Finish date Responsible
Team
Members
1 To discuss and getting the topic of All
Micro project

2 To start planning on our Topic of All

Micro project.

3 To collect Information about our Topic. All

4 To start with gathering information about All

online laptop shopping.

5 To discuss about the online laptop All

shopping website.

6 To start with creating the main copy All

of our Micro project.

7 To present soft copy of our Micro All

project. to the guide Via G-Mail.

8 To show the hard copy of our All

Micro project to our guide.

5
 8. Name of Responsible Team Members:

Student Name Enrollment Number Signature

Rakesh Sudhakar Raut 2101320080

Vinit Dattaji Sahare 2101320081

Sakshi Arvind Dongare 2101320218

Asawari Kishor Hinglaspure 2101320253

**************

6
 PART B – MICRO-PROJECT REPORT

“FLASH CARD APPLICATION USING CSS”

1. Rationale:
The provided code is a basic web application that generates QR codes from user input.
It uses HTML for structure, featuring a text input field where users can type the
content they wish to convert into a QR code. A button labeled "Generate QR" triggers
the QR code creation process when clicked. The QR codes are generated using the
QRCodeJS library, which is loaded via a CDN. The JavaScript function generateQR
retrieves the text input, clears any existing QR code from the page, and creates a new
one inside a designated container (<div>). If no text is entered, an alert prompts the
user to provide input. This simple interface allows users to dynamically generate and
view QR codes based on their input.

2. Course Outcomes Addressed:

• Create interactive web pages using program flow control structure.
• Create event based web forms using Javascript.
• Create interactive web page using regular expressions for validations.
• Create Menus and Navigations in web pages.
• Implement Arrays and functions in JavaScript.

3. Literature Review:
The provided QR code generator is a web-based application leveraging the
QRCodeJS library to dynamically create QR codes from user input. QR codes, first
developed by Denso Wave, have become a crucial tool in modern digital interactions
due to their fast readability and ability to store various forms of data, such as text,
URLs, and contact information. This code aligns with broader trends in web
development where lightweight JavaScript libraries are used to add interactive
features, enhancing user experience without requiring heavy server-side processing.
Existing literature on QR code applications emphasizes their utility across industries
like marketing, education, and logistics, where they simplify data access and sharing.
The QRCodeJS library, in particular, simplifies the integration of QR code generation
into web applications by enabling developers to generate codes based on user input in
real-time. Studies on the usage of QR codes in web-based systems, such as those by
Zhang et al., indicate that user interaction with QR codes is highly effective for tasks
such as quick information retrieval and mobile-friendly content sharing. The provided
code is a practical example of how such technology can be implemented efficiently
using minimal resources, offering users an intuitive, on-the-fly QR code
creation experience

7
4. Product Selection:
The QR code generator project offers a foundation for enhancing its functionality and
user experience through strategic product selection. Key improvements could include
a visually appealing user interface with responsive design elements and CSS styling to
enhance usability across devices. Customization options would allow users to select
the size and color of their QR codes, adding a personal touch to the generated codes.
Implementing download functionality would enable users to save their QR codes as
image files or print them directly, catering to various use cases. Additionally,
expanding the types of data that can be encoded, such as URLs, contact information,
or Wi-Fi credentials, would broaden the application’s utility. Incorporating basic
analytics to track scans of generated QR codes, if linked to URLs, would provide
users with valuable insights. To ensure accessibility, the application should be
compatible with screen readers and include instructional documentation. Lastly,
thorough testing for cross-browser compatibility is essential to guarantee a seamless
experience for all users. By integrating these features, the QR code generator can
evolve into a versatile, user-friendly tool that appeals to a broader audience.

5. Design:
The design of the QR code generator application is centered around simplicity and
user-friendliness, providing an intuitive interface that encourages user engagement.
The layout includes a clear heading, "QR Code Generator," which immediately
informs users of the tool's purpose. Below the heading, an input field is prominently
placed, inviting users to enter the text they wish to encode into a QR code. The
placeholder text guides users with a brief instruction, enhancing usability. A large,
clearly labeled button, "Generate QR," is positioned directly beneath the input field,
ensuring that users can easily initiate the QR code generation process.The output area,
designated by the div with the ID "qrcode," is designed to dynamically display the
generated QR code, with the previous code being cleared upon each new generation.
This design choice maintains a clean interface, preventing clutter and confusion.
Additionally, the use of JavaScript for real-time functionality means that users receive
immediate feedback if they attempt to generate a QR code without inputting any text,
as an alert prompts them to enter valid data. Overall, the design prioritizes ease of use
and accessibility, making it suitable for a wide range of users, from those unfamiliar
with QR codes to more experienced individuals seeking a quick and effective tool for
generating QR codes.

8
6. Advantages:

Simplicity: The code is straightforward and easy to understand, making it accessible for
beginners who are learning HTML and JavaScript.

Real-Time Functionality: Users can generate QR codes instantly based on their input,
providing a seamless experience without the need for page refreshes.

Dynamic Content Generation: The use of the QRCodeJS library allows for quick and
efficient QR code generation, enabling users to encode various types of text or links.

Minimal Setup: The project requires minimal setup, relying only on a single JavaScript
library (QRCodeJS) from a CDN, making it easy to integrate and deploy.

User Feedback: The alert system prompts users to enter text if they try to generate a QR code
without input, improving user experience and preventing errors.

7. Disadvantages:

Limited Features: The project lacks advanced functionalities, such as customization options
for QR code size, colors, or data types (e.g., URLs, contact info).

No Download Option: Users cannot download the generated QR code as an image, limiting
its practicality for offline use or printing.

Input Validation: The input validation is minimal; it only checks for empty input, and there
are no checks for invalid characters or formats, which could lead to confusion.

Lack of Styling: The design is very basic, and without CSS, the user interface may not be
visually appealing or responsive, potentially deterring users.

Accessibility Concerns: There is no consideration for users with disabilities, such as screen
reader compatibility or keyboard navigation, which could limit usability for some users.

9
8. CODING:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code Generator</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
</head>
<body>
<div>
<h2>QR Code Generator</h2>
<input type="text" id="text" placeholder="Enter text to generate QR" />
<button onclick="generateQR()">Generate QR</button>
<div id="qrcode"></div>
</div>

<script>
function generateQR() {
const qrContainer = document.getElementById("qrcode");
qrContainer.innerHTML = ""; // Clear previous QR code if any
const text = document.getElementById("text").value;
if (text) {
new QRCode(qrContainer, text);
} else {
alert("Please enter some text!");
}
}
</script>
</body>
</html>

9. Actual Methodology Followed

• Understand the topic selected by all group members.

• Discuss about the topic with group members.

• Divide the topics thoroughly to each member of group.

 Collected information from members and verify from our mentor.

10
 10. Actual Resources Used

S.No. Name of Resources/material Specifications Qty Remarks

1 Computer/laptop Core i5 -3750 3.20 GHz 1 ----

8 GB Ram 64-bit
operating system
2 Software Microsoft --- ----
word,Notepad++,chrome

11. Applications of this Micro-Project

• For saving time, money and efforts.
• Availability of Flashcard for easy exam preparations.
• No network consumption.

12. Skill Developed/ Learning outcome of this Micro-Project

• Dynamic Content Management
• Communication skill
• Planning skill
• Time Management
• Risk Management
• Negotiation skill
• Gain more knowledge about Microprocessor
• Team in work

11
13. Outputs of the Micro-Project:

12
13
12. Conclusion
In conclusion, The QR code generator microproject successfully demonstrates how to
implement a simple yet functional web application using HTML, JavaScript, and the
QRCodeJS library. It provides an intuitive interface for users to generate QR codes
dynamically based on their input, making it a useful tool for various real-world
applications such as sharing links, encoding information, or enhancing digital
interactions. By utilizing minimal code and resources, this project showcases the
power of integrating JavaScript libraries into web pages for interactive and practical
functionality, offering a straightforward solution for creating QR codes on demand.

13. Reference
 https://www.researchgate.net/publication/
 https://me-qr.com/page/instructions/qr-code-for-multilink
 https://www.studocu.com/in/document/trinity-institute-of-professional-studies/
 https://www.w3schools.com/

**************

14