Search this site
Embedded Files
Skip to main content
Skip to navigation
Front End Web
Home
Glassmorphism UI
Minimal Form Design
Card Hover Effect
Covid App
Barcode Generator
PC Landing Page
QR Code
Swiper JS
Color Palette Generator
Gradient Generator
Horizontal Scroll Menu Bar
Tabs
Dynamic Page
Image Slideshow
Modal Box
Login Form
Side Navbar
Fullscreen Video Background
Accordion Menu
Dropdown Menu
Animated Sticky Navbar
Animated Navbar
Button Hover Effect
Custom Scrollbar
Animation On Scroll
Front End Web
Home
Glassmorphism UI
Minimal Form Design
Card Hover Effect
Covid App
Barcode Generator
PC Landing Page
QR Code
Swiper JS
Color Palette Generator
Gradient Generator
Horizontal Scroll Menu Bar
Tabs
Dynamic Page
Image Slideshow
Modal Box
Login Form
Side Navbar
Fullscreen Video Background
Accordion Menu
Dropdown Menu
Animated Sticky Navbar
Animated Navbar
Button Hover Effect
Custom Scrollbar
Animation On Scroll
More
Home
Glassmorphism UI
Minimal Form Design
Card Hover Effect
Covid App
Barcode Generator
PC Landing Page
QR Code
Swiper JS
Color Palette Generator
Gradient Generator
Horizontal Scroll Menu Bar
Tabs
Dynamic Page
Image Slideshow
Modal Box
Login Form
Side Navbar
Fullscreen Video Background
Accordion Menu
Dropdown Menu
Animated Sticky Navbar
Animated Navbar
Button Hover Effect
Custom Scrollbar
Animation On Scroll
QR Code
TITLE : QR Code Generator | API
HTML :
<!
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
>
<
link
rel
=
"shoertcut icon"
href
=
"Images/favicon.png"
>
<
link
rel
=
"stylesheet"
href
=
"main.css"
>
</
head
>
<
body
>
<
div
class
=
"main"
>
<
p
>QR Code</
p
>
<
input
type
=
"text"
class
=
"input"
>
<
button
class
=
"btn"
>Generate</
button
>
<
img
src
=
"Images/default.png"
alt
=
"Your QR code will show here"
class
=
"code"
>
<
p
id
=
"note"
>Made with ♥ by FEW</
p
>
</
div
>
<
div
id
=
"toast"
>Successfully Generated</
div
>
<
script
src
=
"main.js"
></
script
>
</
body
>
</
html
>
CSS :
*
{
margin:
0
;
padding:
0
;
box-sizing:
border-box
;
font-family: Quicksand;
}
body
{
width:
100
%
;
height:
100
vh
;
background:
linear-gradient
(to
right
top
,
#b597f6
,
#439cfb
);
display:
flex
;
justify-content:
center
;
align-items:
center
;
}
.main
{
width:
25
%
;
height:
70
%
;
padding:
50
px
15
px
;
display:
flex
;
justify-content:
center
;
align-items:
center
;
flex-direction:
column
;
background:
#fff
;
box-shadow:
0
10
px
25
px
-10
px
rgba
(
0
,
0
,
0
,
0.5
);
border-radius:
5
px
;
}
.main
p
{
font-size:
3
rem
}
.main
.input
{
width:
90
%
;
padding:
10
px
25
px
;
border:
3
px
solid
#9e9e9e
;
outline:
none
;
margin:
15
px
0
;
}
.main
.input
:focus
{
border:
3
px
solid
#439cfb
;
}
.btn
,
.input
{
font-size:
1.1
rem
;
border-radius:
5
px
;
}
.main
.btn
{
width:
90
%
;
padding:
12
px
0
;
outline:
none
;
border:
none
;
border-radius:
5
px
;
background:
#439cfb
;
color:
#fff
;
transition:
0.3
s
;
margin:
0
0
25
px
0
;
}
.main
.code
{
margin:
25
px
0
;
}
.main
.btn
:hover
{
box-shadow:
0
10
px
25
px
-10
px
#439cfb
;
}
.main
#note
{
font-size:
1.2
rem
;
font-family:
'Courier New'
,
Courier
,
monospace
;
}
#toast
{
position:
absolute
;
bottom:
0
;
border-radius:
5
px
;
padding:
15
px
50
px
;
background:
#07f49e
;
opacity:
0
;
visibility:
hidden
;
box-shadow:
0
10
px
25
px
-10
px
#07f49e
;
transition:
0.3
s
;
}
#toast
.show
{
visibility:
visible
;
opacity:
1
;
bottom:
50
px
;
}
JavaScript :
var
btn
=
document
.
querySelector
(
'.btn'
);
var
code
=
document
.
querySelector
(
'.code'
);
var
input
=
document
.
querySelector
(
'.input'
);
var
toast
=
document
.
querySelector
(
'#toast'
);
btn
.
addEventListener
(
"click"
,
generate
);
function
generate
() {
var
data
=
input
.
nodeValue
;
var
url
=
`https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=
${
data
}
`
;
code
.
src
=
url
;
toastDiv
();
}
function
toastDiv
() {
toast
.
className
=
"show"
;
setTimeout
(
function
() {
toast
.
className
=
toast
.
className
.
replace
(
"show"
,
""
);
},
2000
);
}
Google Sites
Report abuse
Page details
Page updated
Google Sites
Report abuse