INDUSTRY INTERNSHIP REPORT
Study on
“QR CODE GENERATOR using Html,Css,JS”
(LearnWik Solutions)
Submitted by
MADAMANCHI YASWANTH
Registration No:
2021BCSE07AED281
Under the Guidance of
Dr. JUDESON ANTONY KOVILPILLAI J
In partial fulfillment of the Course- Industry Internship Programme(IIP)-CSI 700
in Semester VII of the Bachelor of Technology
(2021-25)
ALLIANCE UNIVERSITY, BENGALURU
NOVEMBER – 2024
Bachelor of Technology
Industry Internship Programme (IIP)
Declaration
This is to declare that the Report titled “Qr code generator using html,css,java script” has been made for the
partial fulfilment of the Course: Industry Internship Programme (IIP)-CSI 700 in Semester VII by
Madamanchi Yaswanth at LEARNWIK SOLUTIONS under the guidance of Dr. Judeson Antony
Kovilpillai J
I confirm that this Report truly represents my work undertaken as a part of my Industry Internship
Programme (IIP). This work is not a replication of work done previously by any other person. I also confirm
that the contents of the report and the views contained therein have been discussed and deliberated with the
faculty guide.
Signature of the Student :
Name of the Student (in Capital Letters) : MADAMANCHI YASWANTH
Registration No : 2021BCSE07AED281
i
Bachelor of Technology
Certificate
This is to certify that Mr. MADAMANCHI YASWANTH (2021BCSE07AED281) has completed the report
titled “Qr code genera tor using html, css, java script ” under my guidance for the partial fulfilment of the
Course: Industry Internship Programme (IIP)-CSI 700 in Semester VII of the Bachelor of Technology in
Computer Science and Engineering.
Signature of Faculty Guide:
Name of the Faculty Guide: Dr. Judeson Antony Kovilpillai J
ii
TABLE OF CONTENTS
[Link] CONTENT PAGE NO
1 Abstract iv
2 Introduction 1-12
3 Project Profile 13-20
4 Observations and Analysis 21-23
5 Results 24-25
6 Recommendations/Future Directions 26-27
7 Conclusion 28
8 Learning Outcome 29
9 References 30
ABSTRACT
A lightweight, responsive web application called the QR Code Generator was made to generate QR
codes on the fly in response to user input. To generate QR codes in real time, this project combines the
fundamental web technologies of HTML for structure, CSS for styling, and JavaScript for interactivity. These
technologies are then combined with the external QR Server API. A useful tool for rapid data encoding and
sharing, users can enter plain text or URLs, which are instantaneously transformed into scannable QR codes.
With a clear structure, flexible modifications for different devices, and visible feedback during the QR code
generating process, the interface was created with simplicity and usability in mind. While the CSS
implementation adds a polished touch with a unified colour scheme and animation effects for a dynamic user
experience, the application's logic guarantees optimal speed by verifying user input and avoiding needless API
requests.
iii
In addition to being a useful tool for creating QR codes, this project showcases key ideas in contemporary web
development, such as responsive design, event-driven programming, and API integration. Its modular design
allows for future improvements including download choices, modification of QR codes, and encoding of
sophisticated data kinds like contact details or Wi-Fi credentials. The QR Code Generator is a flexible tool that
combines creativity and practicality, providing benefits in both personal and business settings.
iv
Chapter 1 INTRODUCTION
QR codes have emerged as a crucial tool for rapidly and effectively encoding and distributing information in
the current digital world. QR codes work as a link between digital and real locations, improving accessibility
and engagement in everything from digital payments and marketing campaigns to Wi-Fi login credentials and
event tickets. This project presents a QR Code Generator, a small, web-based application made to efficiently
and dynamically produce QR codes in response to the increasing need for tools that do so without any
problems.
In order to generate QR codes in real time, the QR Code Generator application is coupled with the QR Server
API and is constructed using HTML, CSS, and JavaScript. Users with different levels of technical expertise
can utilize it because of its user-friendly design and functionality. The program meets the demand for a
dependable and easily accessible solution by instantaneously converting user-inputted text or URLs into
scannable QR codes.
With a clear, responsive interface that works on a variety of devices, the project prioritizes usability and
simplicity. Additionally, it illustrates key ideas in web development, such as responsive design, real-time
input validation, and client-server communication using APIs.
More than just a useful tool, the QR Code Generator project serves as an example of important web
development ideas including event-driven programming, client-server communication, API integration, and
responsive design. Beyond its present features, the project is made to be scalable, allowing for future
improvements like customizable QR codes, support for sophisticated data types (such contact information
or Wi-Fi credentials), and download choices.
This study examines the creation and operation of the QR Code Generator, going over its elements,
technology, and design tenets. It also talks about possible improvements, which makes this project a solid
starting point for more complex applications. Delivering a useful application that satisfies common needs
for QR code production while demonstrating contemporary web development techniques is the aim.
5
Industry Overview
Global Scenario:
Rapid and effective information encoding and sharing is essential in the digital age. Quick Response Codes,
or QR codes, have become a common data-sharing standard that is used in many different sectors and regions.
They remove the need for manual data entry by enabling effortless access to information with a single scan.
Their adoption has been further encouraged by the widespread use of smartphones that can scan QR codes.
Due to their widespread use in cashless transactions in Asia and their incorporation into advertising campaigns
in Western countries, QR codes have become an essential component of daily life. They are employed in the
following industries:
Retail and E-commerce: Inventory control, in-store promotions, and product tracking are made possible
with QR codes.
Healthcare: They offer easy access to health information, immunization records, and patient records.
Education: Students can access resources, assignments, and more materials by scanning QR codes. Marketing
and Advertising: To increase website traffic and consumer engagement, marketers use QR codes in print and
digital media.
Event Management: QR codes are frequently used to manage registrations, check-ins, and tickets. Travel and
Tourism: Contactless check-ins, interactive guides, and streamlined boarding procedures are all made possible
by QR codes.
Government and Public Services: They are employed in document verification, e-governance services, and the
distribution of public information.
As contactless solutions became essential during the COVID-19 outbreak, QR codes became increasingly
popular worldwide. Governments used QR codes for health certificates and contact tracing, restaurants used
them for digital menus, and healthcare facilities used them for immunization records.
The need for trustworthy and user-friendly QR code production solutions is high due to its adaptability and
simplicity of usage. This worldwide trend is supported by the QR Code Generator project, which offers both
individuals and businesses a simple and convenient option. It is a useful tool in this globally interconnected
digital ecosystem because of its simplicity and capacity to dynamically produce QR codes for text or URLs.
6
This project demonstrates how important QR codes are for connecting digital and physical encounters and
meeting the increasing demand for rapid, frictionless, and effective data-sharing solutions globally. This project
demonstrates creativity and relevance in a fast-changing digital ecosystem by developing a platform that
combines fundamental web technologies with API services, thereby contributing to the global demand for
accessible QR code creation tools.
Indian Scenario:
QR codes have emerged as a game-changing technology in India, increasing accessibility and promoting digital
adoption in several industries. With a rapidly expanding digital ecosystem and one of the fastest-growing
economies, India has adopted QR codes as a key component for deploying creative solutions in both urban and
rural locations.
Government programs like Digital India and the expansion of cashless payment methods are primarily
responsible for the broad use of QR codes in India. As the economy moves toward being less reliant on
currency, QR codes have become a straightforward and affordable way to close technological divides .
Important Domains:
Digital Payments Adoption:
Transactions in India have been completely transformed with the introduction of UPI (Unified Payments
Interface), and QR codes are essential to this system.
Small companies, street sellers, and even consumers can utilize QR codes to make instantaneous, cashless
payments thanks to payment networks like Paytm, PhonePe, Google Pay, and BharatPe.
Bharat QR is one initiative that promotes uniformity and ease of use by offering an interoperable standard.
Public services and e-government:
Government documents such as Aadhaar cards, ration cards, and vaccination certificates can be accessed via
QR codes. To facilitate contactless boarding and verification, Indian Railways incorporates QR codes onto
tickets.
7
Health care:
Vaccination records and health certificates are managed by QR codes, particularly during COVID-19. They are
used by diagnostic centers and hospitals to share information about appointments, prescriptions, and reports.
Education:
QR codes are used by educational institutions to connect students to resources such as assignments, digital
classrooms, and textbooks (such as NCERT textbooks that are QR-linked).
QR codes make it easier to access e-learning materials and streamline attendance tracking.
E-commerce and retail:
Small and medium-sized businesses (SMEs) use QR codes to manage inventories, show product specifications,
and provide sales or discounts. In order to validate orders and facilitate safe payments, contactless delivery
firms have embraced QR codes.
Tourism and Travel:
Booking tickets, boarding cards, and interactive tours at historical landmarks like the Taj Mahal or Qutub Minar
are all made possible using QR codes. Hotels and airports now frequently accept contactless check-ins, which
enhances both customer experience and security.
Prospects in India
There are countless uses for QR codes as India moves closer to being a digital-first economy. QR codes can be
incorporated into emerging technologies like blockchain and IoT to improve functionality and security. This
expanding need is met by the QR Code Generator initiative, which offers a straightforward yet effective
solution to people, companies, and organizations all throughout the country.
This study demonstrates how QR codes have revolutionized India's digital environment and establishes itself
as a significant player in the nation's continuous digital development.
8
Players in the Industry Along with Market Shares:
Due to the increasing use of smartphones and the demand for contactless solutions, the QR code generator
market has grown significantly. Numerous industries, including marketing, retail, healthcare, and hospitality,
employ QR codes to make information and services easily accessible. As companies looked for safer ways to
engage, the COVID-19 pandemic further sped up their acceptance.
An HTML file provides structure, a JavaScript file adds functionality, and a CSS file adds style to the present
QR Code Generator project. It is appropriate for straightforward applications because it provides a simple
interface for creating QR codes using an external API. It does not, however, have the sophisticated
functionality present in solutions provided by top industry participants.
A leading provider of complete solutions with both static and dynamic QR codes, r (QR Code Generator) is
valued for its customizable features and easy-to-use tools. Another strong supplier is Beaconstac, which is
wellliked for marketing and customer insights due to its sophisticated tracking and analytics features. Scanova
specializes in branded QR codes with analytics, offering eye-catching designs that complement corporate
identities. For both individual and business customers, QR Tiger provides an extensive toolkit that includes
customization and thorough scan tracking. Finally, Unitag specializes in creating QR codes with tools that are
easy to use and design-focused.
Key companies in the fiercely competitive QR code generator market provide cutting-edge features to meet
the demands of businesses. Although the current project offers a straightforward and useful tool, its market
position and total value will be improved by including capabilities like analytics, customization, and dynamic
QR code support.
9
1.1Company review
LearnWik Solutions Private Limited is an e-learning platform based in Bengaluru, Karnataka, India. The
company's primary goal is to help professionals and students grow in their professions by offering certification
programs and internships in a variety of fields.
Providing offers:
Learn Wik provides internships and certified programs in a variety of developing fields with the goal of
enhancing participants' knowledge through practical experience and worthwhile certificates.
Courses: Computer Science and Engineering (CSE), Information Technology (IT), Electronics and
Communication Engineering (ECE), Electrical and Electronics Engineering (EEE), Mechanical and Civil
Engineering, Management, and Biochemical Engineering are just a few of the fields in which the platform
offers courses.
Skilled Mentors with Real-World Experience: LearnWik creates a top-notch learning environment by fusing
top-notch mentoring, relevant information, and cutting-edge technology. Under the direction of seasoned
industry mentors, participants work on real-time projects to obtain real-world experience.
Employee reviews show that LearnWik has a positive corporate culture. Job security, pay and perks, worklife
balance, skill development, promotions, and general job satisfaction are all rated highly.
10
Chapter 2 PROJECT PROFILE
2.1Objectives of the Study
To comprehend the essential features provided by leading solutions, market shares, and important
players in the QR code generator industry as it stands today.
To evaluate the project's current functioning and structure to pinpoint its advantages and
disadvantages.
To offer information on industry adoption in a range of industries, including marketing, retail,
hospitality, and healthcare.
To suggest strategic improvements that could be made to the present project to make it more
competitive and align it with industry-leading solutions.
To list possible avenues for expansion through the incorporation of cutting-edge technologies like
analytics, personalization, and dynamic QR code functionality.
2
2.2Methodology
1. Preparation and Needs Examination
Designing a responsive web application that creates QR codes in response to user input is the goal.
Technologies and Tools Employed:
HTML: To give the page structure.
CSS: For responsive design as well as styling and layout.
JavaScript: To manage user input and create QR codes in real time.
To generate QR codes, use the QR Code API: [Link]
2. Design of User Interfaces
HTML Structure:
The following essential elements make up the HTML document's structure:
A wrapper that houses the input form, header, and area for displaying QR codes.
A button to create QR codes and an input form for user data. a
portion that shows the image of the QR code.
CSS Design:
For a sleek, contemporary appearance, the Poppins typeface was imported using the Google Fonts API.
Flexbox was used to design a responsive interface that was aligned and centered.
To improve the layout for devices with a width of less than 430 pixels, media queries were
implemented.
3. Functionality and Implementation:
Input Handling:
The JavaScript code collects the input value by listening for click events on the "Generate QR Code"
button. To make sure the input is neither redundant or empty, it is validated.
Generating QR Codes:
created a QR code dynamically using the QR Code API in response to user input.
The produced QR code URL is added to the image tag's src attribute.
Update the Dynamic User Interface:
2
To show the QR code when it loads, an event listener was added.
improved the user experience by displaying the message "Generating QR Code..." while the code is
being generated.
Reset Capabilities:
Make modifications to the input area to clear the produced QR code and restart the screen.
4. Debugging and Testing
To guarantee responsiveness and functionality, the application was tested across a range of screens and
devices. Enables the creation of QR codes using a variety of input formats, such as text, URLs, and
special characters. To guarantee seamless functioning, layout and API integration problems were
debugged.
5. Implementation
With CSS and JavaScript integrated, the finished program was released as a stand-alone HTML file
that could be seen in any contemporary web browser.
6. Future Improvements
Customization Options: Let users select the QR code's colour and size.
Download Feature: Allow the generated QR code to be downloaded as an image file.
Handle errors by giving feedback when an input is incorrect, or an API error occurs.
To provide a functional and user-friendly application, this methodology describes the methodical
approach to designing, implementing, and testing the QR Code Generator.
2
Chapter 3 OBSERVATIONS & ANALYSIS
Responsive Design:
The user interface fluidly adjusts to various screen sizes thanks to responsive design. The layout adapts to
smaller screens (such as those found on mobile devices) without sacrificing usability or style.
Validation of Input:
By effectively validating user input, the application makes sure that only unique and non-empty values
result in the generation of QR codes. If the same input is entered more than once, it should not result in the
creation of an unnecessary QR code.
Dynamic Generation of QR Codes:
Clicking the "Generate QR Code" button nearly instantly creates the QR code.
To generate functioning QR codes that precisely encode user-provided data, the program appropriately makes
use of the QR Code API.
Current Information:
The displayed QR code is automatically hidden when the input area is cleared, maintaining a clear and
userfriendly interface. During processing, the button name dynamically changes to "Generating QR Code..."
to improve user experience by giving immediate feedback.
Performance:
The application renders the QR code image with minimal latency. Performance does not significantly
deteriorate even after several input submissions.
Visual Input:
A seamless and eye-catching experience is offered by the incorporation of delicate animations and transitions,
such as variations in button states and the opacity of the QR code container.
2
Analysis:
How well the QR Code API works:
Reliability and effectiveness were demonstrated by the integration with [Link]
qrcode/. The API exhibits adaptability in use cases by supporting a variety of input types, such as text and
URLs.
Experience of the User (UX):
The program places a high value on usability and simplicity. With little effort, users may rapidly make a QR
code. User happiness and involvement are enhanced via feedback systems such as transitions and status
messages.
Code Effectiveness:
For event handling and DOM manipulation, the system makes use of succinct and effective JavaScript.
While offering a responsive design, CSS media queries guarantee that the program stays lightweight.
Maintainability and Scalability:
Scalability is encouraged by the project structure (separate CSS and JavaScript files). Future improvements,
like more functionality or personalization choices, are simple to incorporate.
Possible Enhancements:
Features for Customization: Let users add logos or change the colors and sizes of QR codes. Offline
Functionality: To get rid of API reliance, use a local library for creating QR codes. Give consumers the option
to download the created QR code as an SVG or PNG file.
To sum up, the QR Code Generator successfully accomplishes its goal of creating QR codes based on user
input. It is appropriate for a variety of applications due to its responsive, user-friendly interface and real-time
feedback. However, its usability and dependability could be greatly expanded with more improvements.
2
Chapter 4
RESULTS
Usability:
The program creates QR codes for a variety of input formats, such as URLs, plain text, and special characters,
with success. The generated QR codes work and may be reliably scanned with mobile devices or QR code
readers.
Metrics of Performance:
Response Time: After selecting the "Generate QR Code" option, a QR code is created in less than a second.
Accuracy: The input data is accurately and error-free represented by QR codes.
User Input: The dynamic interface improves the user experience overall by offering seamless transitions.
Browser compatibility across platforms:
Across widely used browsers including Chrome, Firefox, and Edge, the program operates reliably.
It continues to work flawlessly in desktop and mobile browsers.
2
Chapter 5
Recommendations/Future Directions
QR Codes that can be downloaded:
Include a feature that allows users to download the created QR codes as PNG or JPEG image files.
By making it simple for consumers to save and share their QR codes, this will enhance usefulness .
Personalization Choice:
Give consumers the option to alter the colours, add logos, and change the size of their QR codes.
This would increase the app's attractiveness, particularly for companies that desire branded QR codes.
Functionality Offline:
To generate QR codes without using an external API, use a JavaScript library such as [Link].
This would improve dependability and enable the program to run without an internet connection.
Assistance with Complex Data Types:
Extend the program to create QR codes for calendar events, contact details (vCards), and Wi-Fi credentials.
The tool's use cases would expand as a result.
Deployment That Is Friendly to Mobile:
2
Use React Native or Flutter to create a mobile application version that lets users create QR codes while they're
on the go. For a wider audience, this would improve accessibility and convenience.
Public Access Web Hosting:
To make the project publicly available, deploy it to sites like Vercel, Netlify, or GitHub Pages.
In addition to showcasing your effort, this stage would enable the application to help others.
2
Chapter 6
CONCLUSION
The QR Code Generator project serves as an example of how web technologies may be used effectively to
create a useful and responsive utility. The application provides a user-friendly interface for rapidly and
precisely creating QR codes by utilizing HTML, CSS, and JavaScript. The main goals are met by its present
implementation, which includes responsive design and real-time QR code production.
The project may be improved, though. Its usefulness and user engagement will be increased by adding offline
capabilities, customisation tools, and extra features like download and sharing options. These improvements
could make the QR Code Generator a complete solution for corporate, professional, and personal use cases .
2
LEARNING OUTCOME
Comprehending Frontend Development:
obtained practical experience utilizing HTML, CSS, and JavaScript to create a web-based application. learned
how to properly organize web pages and design them for both usability and aesthetic appeal.
Integration and Use of APIs:
gained a thorough understanding of how to retrieve and display dynamic data by interacting with third-party
APIs, particularly the QR Server API. learned how to utilize JavaScript to handle asynchronous operations and
build URL queries for seamless user experiences.
Programming Skills in JavaScript:
enhanced knowledge of JavaScript, including state management, event handling, and DOM manipulation.
learned how to tune the logic for effective performance and apply form validation.
Solving Issues and Debugging:
improved problem-solving abilities by tackling issues with responsive design, browser compatibility, and API
requests. discovered how to efficiently debug code by testing on several platforms and spotting problems in
real time.
Research and Cooperation Skills:
investigated and made use of internet resources to comprehend ideas and resolve problems. learned how to
efficiently modify already-existing technologies (such as the QR Server API) to satisfy certain project
requirements.
30
REFERENCES
[1] Yue Liu, Ju Yang, Mingjun Liu, “Recognition of QR Code with mobile phones,” Control and Decision
Conference, CCDC 2008. Chinese, pp. 203 - 206, 2-4 July 2008.
[2] Yu-Hsuan Chang, Chung-Hua Chu and Ming-Syan Chen, “A General Scheme for Extracting QR Code
from a Non-uniform Background in Camera Phones and Applications,” Ninth IEEE International
Symposium on Multimedia, ISM 2007. pp. 123-130, 10-12 Dec. 2007
[3] Aidong Sun, Yan Sun and Caixing Liu, “The QR-code reorganization in illegible snapshots taken by
mobile phones,” International Conference on Computational Science and its Applications, 2007. ICCSA
2007, pp. 532-538, 26-29 Aug. 2007.
[4] Yuan-Cheng Lai, Frannie Han, Yi-Hsuan Yeh, Ching-Neng Lai and Yu-Chin Szu, “A GPS navigation
system with QR code decoding and friend positioning in smart phones,” 2nd International Conference on
Education Technology and Computer (ICETC), pp.V5-66-V5-70, 22-24 June 2010
[5] [online] [Link]
[6] [online] [Link]
[7] ISO/IEC 18004:2000. Information technology-Automatic identification and data capture techniques-Bar
code Symbology-QR Code, 2000.
[8] QR Code standard, GB/T 18284-2000, National standard of the People’s Republic of China: Quick
Response Code (in Chinese), Issued by China State Bureau of Quality and Technical Supervision, 2000.
[9] [online] QR [Link], [Link]
[10] [online] Drupal, [Link]
[11] John K. Vandyk, Pro Drupal Development Second Edition.
[12] [online] Kentaro Fukuchi, "libqrencode," [Link]
[13] [online] Ubuntu, [Link] 2010 Eighth International Conference on ICT and Knowledge
Engineering978-1-4244-9875-8/10/$26.00 ©2010 IEEE92
30