INTRODUCTION

The “QR Code Generator” project in JavaScript is a practical and engaging

application that allows users to generate QR codes quickly and efficiently. By
using JavaScript’s capabilities, the project converts user input—whether it’s a
URL, plain text, contact details, or any other data—into a scannable QR code. This
makes it highly versatile for various real-world applications, such as sharing
website links, contact information, Wi-Fi credentials, or product details. The
project offers a simple, user-friendly interface where users can easily input their
data, and with just a click, a unique QR code is generated, ready to be scanned or
shared.

This project serves as an excellent example of how JavaScript can be used to

create interactive and functional applications, providing a hands-on experience in
understanding how data encoding and QR code generation work. By implementing
this project, developers not only enhance their JavaScript skills but also gain
insights into the integration of libraries, data handling, and user interface design,
making it a valuable learning experience for both beginners and advanced
programmers.

Page | 1
DKTE’S YASHWANTRAO CHAVAN POLYTECHNIC , ICH
 SYSTEM REQUIREMENT

Minimum Hardware and Software Requirements to run application and to perform

testing on application

Hardware Requirement –
Resources Specifications
Computer (i3-i5 preferable), RAM minimum 2GB
Computer System
and onwards

Operating System Requirement –

Resources Specifications
Windows 7 or later Version/LINUX Version 5.0 or
Operating System
Later Version

Software Requirement –
Resources Specifications
Google Chrome – Chrome 1 or Above
OR
Mozilla Firefox – Firefox 1.0 or Above
OR
Browser Microsoft Edge – Internet Explorer 6 (for older versions),
Edge 12
OR
Apple Safari – Safari 1.0 or Above
OR
Any other Browser that can run JavaScript

Page | 2
DKTE’S YASHWANTRAO CHAVAN POLYTECHNIC , ICH
 RESOURCES USED

Computer Specification Used to Develop this Application –

Sr. No Component Specification
1. Operating System Windows 11 Home x64
2. RAM 8 GB DDR4
3. Hard disk 1TB HDD
Intel(R) Core(TM) i5-8250U CPU
4. Processor
1.80 GHz

Tools and Dependencies used for development –

Sr. No Component Specification

1. Visual Studio Code Version 1.89
2. Google Chrome Version 117.0.5938.92

Page | 3
DKTE’S YASHWANTRAO CHAVAN POLYTECHNIC , ICH
 CONCEPT

A QR code generator is a tool or software that creates QR (Quick Response)

codes, which are two-dimensional barcodes capable of storing various types of
data. These codes can be scanned using smartphones or QR code readers and can
contain information such as URLs, contact details, text, Wi-Fi credentials, and
more. The process involves the user providing the data they wish to encode, which
is then converted into a pattern of black squares and white spaces arranged on a
square grid through an encoding algorithm. QR codes also have error correction
capabilities, allowing them to be read accurately even if partially damaged. Once
generated, the QR code can be downloaded or shared in formats like PNG, SVG, or
PDF. Common uses of QR code generators include directing users to websites,
sharing contact information on business cards, promoting events, providing product
details, and enabling quick Wi-Fi access.

Page | 4
DKTE’S YASHWANTRAO CHAVAN POLYTECHNIC , ICH
 PURPOSE

The QR Code Generator is developed with the goal of providing an easy-to-

use and efficient platform for generating QR codes using client-side
scripting. The specific purposes of this project include:

1. Simplified Data Sharing : By allowing users to input various types of

data (such as URLs, text, or contact information), the system instantly
converts the data into a QR code, simplifying the process of sharing and
accessing information.

2. Real-Time QR Code Generation : The system enables users to generate

QR codes in real time, providing an immediate and responsive solution
for various personal, business, and promotional needs.

3. Enhanced Information Accessibility : By using QR codes, the project

improves the accessibility of information across digital platforms, making
it easy for users to quickly retrieve and share important data through
scanning.

4. Efficient and Secure Data Handling : The client-side scripting ensures

that data input and processing occur locally on the user’s device,
reducing security risks and eliminating the need for server-based data
storage or transmission.

5. User-Friendly Experience : The project provides an intuitive and

accessible interface that allows users to generate QR codes without the
need for technical expertise, enhancing user engagement and making it
accessible to a wide audience.Resources Used

Page | 5
DKTE’S YASHWANTRAO CHAVAN POLYTECHNIC , ICH
 ADVANTAGES AND LIMITATIONS

ADVANTAGES –
1. No Server Dependency : The QR code generation happens entirely on the client side,
meaning no need for server requests or backend resources. This reduces latency and server load
2. Real-Time Processing : The user can instantly generate a QR code without page reloads or
waiting for server responses. All processing occurs immediately in the browser
3. Customization Options : Users can adjust the size, foreground color, and background color
of the QR code, providing flexibility to match their specific design needs.
4. Enhanced Privacy : Since the text and settings are processed locally in the browser, no data is
sent to any server, ensuring user privacy and security.
5. Lightweight and Fast : With minimal external dependencies (only the `qrious` library), the
solution is lightweight and performs efficiently without affecting page load times.
6. Offline Usage : Once the webpage is loaded, the QR code generator can work without an
internet connection, allowing users to continue generating QR codes offline.
7. Cross-Platform Compatibility : Built using HTML, CSS, and JavaScript, this solution works
across all modern browsers and platforms (desktop and mobile), ensuring broad accessibility.
8. Downloadable QR Code : Users can easily download the generated QR codes as PNG
images, making it convenient for use in documents, print materials, or other applications.

LIMITATIONS –

Page | 6
DKTE’S YASHWANTRAO CHAVAN POLYTECHNIC , ICH
1.Limited by Browser Restrictions : Certain features, like saving files or accessing local
storage, can be limited by browser security policies. For example, not all browsers allow
automatic file downloads without user interaction.

2.No Server-Side Data Storage : Since everything happens on the client side, there’s no built-in
capability for data persistence or storing generated QR codes in a central database. Users must
manually save the codes.

PROGRAM CODE
HTML CODE -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Whether Forecasting App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<div class="search">
<input type="text" placeholder="Enter the City Name" spellcheck="false">
<button><img src="C:\Users\ATHARV\Desktop\Whether
app\images/search.png"></button>
</div>
<div class="error">
<p>Invalid City Name </p>
</div>
<div class="weather">

Page | 7
DKTE’S YASHWANTRAO CHAVAN POLYTECHNIC , ICH
 <img src="C:\Users\ATHARV\Desktop\Whether app\images/rain.png"
class="weathericon">
<h1 class="temp">22°c</h1>
<h2 class="city">New York</h2>
<div class="details">
<div class="col">
<img src="C:\Users\ATHARV\Desktop\Whether app\images/humidity.png">
<div>
<p class="humidity">50%</p>
<p>Humidity</p>
</div>
</div>
<div class="col">
<img src="C:\Users\ATHARV\Desktop\Whether app\images/wind.png">
<div>
<p class="wind">15 km/h</p>
<p>Wind Speed</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

CSS CODE –
*{ margin:
0; padding:
0;
font-family: 'Poppins',sans-serif; box-
sizing: border-box;

Page | 8
DKTE’S YASHWANTRAO CHAVAN POLYTECHNIC , ICH
} body{
background:#222
} .card{ width:
90%; max-width:
470px;
background: linear-gradient(135deg,#00feba,#5b548a);
color: #fff; margin: 100px auto 0; border-radius:
20px; padding: 40px 35px;
text-align: center; } .search{
width: 100%; display: flex;
align-items: center; justify-
content: space-between;
} .search
input{ border: 0;
outline: 0;
background: #ebfffc;
color: #555;
padding: 10px 25px;
height: 60px;
border-radius: 30px;
flex:1; margin-
right: 16px; font-
size: 18px; } .search
button{ border: 0;
outline: 0;
background: #ebfffc;
border-radius: 50%;
width: 60px;
height:60px; cursor:
pointer; } .search
button img{ width:
16px; } .weather-icon{
width: 170px;
margin-top: 30px; }
.weather h1{ font-
size: 80px; font-
weight: 500; }
.weather h2{ font-
size: 45px; font-
weight: 400;

Page | 9
DKTE’S YASHWANTRAO CHAVAN POLYTECHNIC , ICH
 margin-top: -10px;
} .details{ display: flex;
align-items: center; justify-
content: space-between;
padding: 0 20px; margin-top:
50px;
} .col{ display:
flex; align-items:
center; text-align:
left; } .col
img{ width: 40px;
margin-right: 10px; }
.humidity, .wind{ f
ont-size: 28px;
margin-top: -6px; }
.weather{ display:
none; } .error{ te
xt-align: left;
margin-left: 10px;
font-size: 14px;
margin-top: 10px;
display: none;
}

JAVASCRIPT CODE –
<script>
const apikey ="11075778f852fbbf0fd7f20f5d71a1f3";
const apiurl ="https://api.openweathermap.org/data/2.5/weather?units=metric&q=";
const searchbox=document.querySelector(".search input"); const
searchbtn=document.querySelector(".search button"); const weathericon =
document.querySelector(".weather-icon");

async function checkweather(city){

const response = await fetch(apiurl + city + `&appid=${apikey}`);

Page | 10
DKTE’S YASHWANTRAO CHAVAN POLYTECHNIC , ICH
 if(response.status == 404)
{ document.querySelector(".error").style.display = "block";
document.querySelector(".weather").style.display = "none";

}else{
var data=await response.json();
document.querySelector(".city").innerHTML = data.name;
document.querySelector(".temp").innerHTML = Math.round(data.main.temp) + "°c";
document.querySelector(".humidity").innerHTML = data.main.humidity + "%";
document.querySelector(".wind").innerHTML = data.wind.speed + " km/h";

if(data.weather[0].main == "Clouds")
{ weathericon.src ="images/cloud.png";
}else if(data.weather[0].main == "Clear"){
weathericon.src ="images/clear.png"; }else
if(data.weather[0].main == "Rain")
{ weathericon.src
="images/rain.png"; }else
if(data.weather[0].main == "Drizzle")
{ weathericon.src ="images/drizzle.png";
}else if(data.weather[0].main == "Mist"){
weathericon.src ="images/mist.png";
}
document.querySelector(".weather").style.display = "block";
document.querySelector(".error").style.display = "none";
}
}

searchbtn.addEventListener("click",
()=>{ checkweather(searchbox.value);
})
</script>

Page | 11
DKTE’S YASHWANTRAO CHAVAN POLYTECHNIC , ICH
 PROGRAM OUTPUT Structure And
Design –

Entering a City Name –

Page | 12
DKTE’S YASHWANTRAO CHAVAN POLYTECHNIC , ICH
 Entering a Wrong City Name –

Page | 13
DKTE’S YASHWANTRAO CHAVAN POLYTECHNIC , ICH
 FUTURE SCOPE

In the future, the weather forecasting app could integrate advanced AI

algorithms to provide hyper-localized forecasts and personalized weather insights.
Expanding its functionality to include features like augmented reality for weather
visualization and integration with smart home systems could enhance user
experience. Additionally, incorporating crowd-sourced data for real-time weather
updates and expanding to support global weather data could broaden its
applicability and accuracy.

Page | 14
DKTE’S YASHWANTRAO CHAVAN POLYTECHNIC , ICH
 CONCLUSION
Our JavaScript-based weather forecasting app offers real-time, accurate
weather information with a user-friendly interface and customizable features.
While it benefits from dynamic visuals and location-specific data, its reliance on
external APIs and need for an internet connection are notable limitations.

Page | 15
DKTE’S YASHWANTRAO CHAVAN POLYTECHNIC , ICH
 REFERENCE
Web links –

Sr.
Title Link
No.
1. w3schools https://www.w3schools.com/js/
2. https://www.geeksforgeeks.org/javascript/
Geeksforgeeks
3. https://www.javatpoint.com/javascript-tutorial
JavaPoint
4. StackOverFlow https://stackoverflow.com/questions/26965331/javascript-prank-
joke

Page | 16
DKTE’S YASHWANTRAO CHAVAN POLYTECHNIC , ICH