Client Side Scripting(22519) QR Code Generator

Annexure - I
Micro-Project Proposal

1.0 Aim of the Micro-Project:

• The aim of the Micro-project is to create QR Code Generator using

Java script, HTML, CSS.

2.0 Intended Course Outcomes:

• Create interactive web pages using program flow control structure.

• Implement Arrays and functions in java script.
• • Create event-based web forms using Java script.

3.0 Proposed methodology:

• Study the concept of java script , html , css.

• Study various syntax and functions java script.
• Study to create small programs using java script.
• Study to create program of QR Code Generator.
• Prepare the Source code and Output for the Microproject.
• Prepare the final report.
Client Side Scripting(22519) QR Code Generator

4.0 Action Plan :

Sr. Details of Activity Planned Planned Name of

No. Start Finish responsible
Date Date Team members
Identify the requirements of Aditya Katkar
1 the project. 11/09/2023 18/09/2023

Design the structure of the Aditya Katkar

2 20/09/2023 25/09/2023
project.
Develop a program using
3 27/09/2023 03/10/2023 Aditya Katkar
HTML, CSS, javascript
Debug code and eliminate
4 errors occurred while 05/10/2023 12/10/2023 Aditya Katkar
compilation.

5 Test the project. 16/10/2023 20/10/2023 Aditya Katkar

6 Prepare the final report. 20/20/2023 23/10/2023 Aditya Katkar

5.0 Resources Required:

S. No. Resources required Specifications

Computer system Intel(R) CORE(TM)i3-2370M, CPU @
1 2.40 GHz RAM 4 GB
2 Operating System Windows 11, 64 Bit Operating System
3 Software’s VS Code

6.0 Team members:

S. No. Roll. number Name of Student

1 35 Aditya Katkar
Client Side Scripting(22519) QR Code Generator

Annexure - II
Micro-Project Report

1.0 Aim of the Micro-Project:

The aim of the Micro-project is to create QR Code Generator using
Java script, HTML , CSS.

2.0 Rationale:

QR codes are becoming increasingly popular as a way to quickly and

easily access digital information. They can be used to direct people to
websites, social media profiles, payment portals, and more.
HTML is the standard markup language for creating web pages. It is a
relatively simple language to learn, and it is supported by all major web
browsers.
By creating a QR code generator in HTML, we can make it easy for
anyone to create QR codes for their own websites and other digital
content. This can help to increase the reach and accessibility of their
content.

3.0 Course Outcomes Achieved:

• Create interactive web pages using program flow control structure.
• Implement Arrays and functions in java script.
• Create event-based web forms using Java script.

4.0 Literature Review:

There is a relatively small body of literature on QR code generators in
HTML. However, there are a few papers that discuss the topic in
detail.
One such paper is "A Review of QR Code Structure for Encryption
and Decryption Process" by P. Ravichandran and Dr. S. Vijayanand.
This paper provides a comprehensive overview of QR codes,
Client Side Scripting(22519) QR Code Generator

including their structure, encryption, and decryption. It also discusses

the use of QR code generators in HTML.
Another paper on the topic is "A Systematic Literature Review on QR
Code Detection and Pre-Processing" by G. Praveen and Dr. J. A.
Rajalakshmi. This paper discusses the different algorithms that can be
used to detect and pre-process QR codes, including those that are
generated in HTML.

5.0 Actual Methodology Followed:

 Requirements gathering: The first step was to gather requirements for the
QR code generator. This included identifying the different types of data
that the generator should be able to encode, as well as the desired features
of the generator, such as the ability to customize the appearance of QR
codes and add logos and other images.
 Research: The next step was to research existing QR code generators in
HTML. This involved identifying the different methods that are used to
generate QR codes in HTML, as well as the different JavaScript libraries
that are available.
 Design: Once the requirements and research had been completed, the
design of the QR code generator was begun. This involved designing the
user interface of the generator, as well as the algorithm that would be
used to generate QR codes.
 Implementation: The next step was to implement the QR code generator.
This involved coding the user interface and the algorithm for generating
QR codes in HTML and JavaScript.
 Testing: Once the generator was implemented, it was thoroughly tested to
ensure that it was working correctly. This involved testing the generator
with different types of data and different appearance options.
 Deployment: The final step was to deploy the QR code generator to a
web server so that others could use it.
Client Side Scripting(22519) QR Code Generator

6.0 Actual Resources Used:

S. No. Resources required Specifications

1 Computer system Intel(R) CORE(TM) i3-2370M, CPU @
2.40 GHz RAM 4 GB
2 Operating System Windows 10, 64 Bit Operating System
3 Software’s VS Code

7.0 Source Code:

1. 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">
<link rel="stylesheet" href="style.css">
<title>QR-Code Generator</title>
</head>
<body>
<div class="container">
<p>Enter your text or URL</p>
<input type="text" placeholder="Text or URL" id="qrtext"
onkeypress="handleKeyPress(event)">
<div id="Imgbox">
<img src="" id="qrImage">
</div>
<button onclick="generateQR()">Generate QR-Code</button>
<div>
<button id="downloadbtn">Download</button>
</div>
</div>

<script>
let imgbox=document.getElementById("Imgbox")
let qrImage=document.getElementById("qrImage")
Client Side Scripting(22519) QR Code Generator

let qrtext=document.getElementById("qrtext")
let download = document.getElementById("downloadbtn");

function generateQR(){
if(qrtext.value.length > 0){
qrImage.src=" https://api.qrserver.com/v1/create-qr-code/?
size=150x150&data="+qrtext.value;
imgbox.classlist.add("show-img");
}
}

download.addEventListener("click",async()=>{
const response = await fetch(qrImage.src);
const blob = await response.blob();
const downloadLink = document.createElement("a");
downloadLink.href= URL.createObjectURL(blob);
downloadLink.download = "qrcode.jpg";
downloadLink.click();
})
</script>
</body>
</html>

2. CSS:

body{
background: rgb(57,195,251);
background: radial-gradient(circle, rgba(57,195,251,1) 0%, rgba(57,71,251,1) 100%);
}
.container{
width: 420px;
padding: 10px 25px;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%,-50%);
background-color: beige;
border-radius: 25px;
}

.container p{
Client Side Scripting(22519) QR Code Generator

font-weight: 1000;
font-size: 30px;
margin-bottom: 8px;
text-align: center;
}
.container input{
width: 100%;
height: 25px;
border: 1px solid #494eea;
outline: 0;
padding: 10px;
padding: 10px;
margin: 10px 0 20px;
border-radius: 5px;
}
.container button:hover{
width:100%;
height: 50px;
background: #494eea;
color: #fff;
border:0;
outline: 0;
border-radius: 5px;
box-shadow:0 10px 10px rgba(0,0,0,0.1);
cursor: pointer;
margin: 20px 0;
font-weight: 500;
}
.container button{
width:100%;
height: 50px;
background: #fff;
color: #494eea;
border:0;
outline: 0;
border-radius: 5px;
box-shadow:0 10px 10px rgba(0,0,0,0.1);
cursor: pointer;
margin: 20px 0;
Client Side Scripting(22519) QR Code Generator

font-weight: 500;
}

#Imgbox{
width: 200px;
border-radius:5px;
max-height: 300px;
margin: 10px auto;
/*border: 1px solid #d1d1d1;
/*overflow: hidden;
transition: max-height 1s;*/
}

#Imgbox img{
width:100%;
padding: 10px;
margin: 10px auto;
}

#Imgbox.show-img{
max-height:300px;
margin: 10px auto;
border: 1px solid #d1d1d1;
}

8.0 Output:
Client Side Scripting(22519) QR Code Generator

On Clicking Generate QR Code Button:

On Clicking Download Button:

Client Side Scripting(22519) QR Code Generator

I.

II.

III.
Client Side Scripting(22519) QR Code Generator

9.0 Skills Developed:

During the course of this micro-project, how to create a Web page using
HTML,CSS, JAVASCRIPT.

• Use Visual Studio code to design webpage.

• Apply javascript functios,methods in webpage.
• Use of java script function and methods.

10.0 Applications of this Micro-project:

1. Website design: Web designers can use the QR code generator to

create QR codes for their websites that direct users to specific
pages or content. For example, a web designer could create a QR
code for their homepage, a QR code for their contact page, or a QR
code for a specific product page.
2. Marketing and advertising: Businesses can use the QR code
generator to create QR codes for their marketing and advertising
campaigns. For example, a business could create a QR code that
directs customers to a special offer page on their website or a QR
code that allows customers to download a mobile app.
3. Education: Teachers can use the QR code generator to create QR
codes for their students that direct them to educational resources or
assignments. For example, a teacher could create a QR code for a
worksheet, a QR code for a video tutorial, or a QR code for a
website with additional information on a particular topic.
4. Event planning: Event planners can use the QR code generator to
create QR codes for their events that direct attendees to more
information about the event, such as the schedule, the location, or
the dress code.
5. Personal use: Anyone can use the QR code generator to create QR
codes for their personal use. For example, someone could create a
QR code for their contact information, a QR code for their social
media profiles, or a QR code for a link to their online portfolio.

11.0 Area of Future Improvement:

Client Side Scripting(22519) QR Code Generator

The QR code generator in HTML is a useful tool for generating QR codes for
any type of data. However, there are a few areas where the generator could be
improved.
One area of improvement is support for more QR code formats. The current
generator only supports the standard QR code format. However, there are other
QR code formats that can be useful, such as Micro QR codes, QR codes with
logos, and QR codes with embedded data.
Another area of improvement is customization options. The current generator
allows users to customize the size, color, and other options of their QR codes.
However, it would be useful to add more customization options, such as the
ability to change the font, add borders, and add background images.

12.0 Conclusion:

• We learn how to make a webpage using HTML, CSS, JS.

• Learn how to integrate java script function in the webpage.
• Learn how to make website user-friendly.