Generation QR with HTML, CSS, JS

By -Blog For Education

June 06, 2023

HTML

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

<button class="btn btn-primary">Generate QR Code</button>

</div>

</body>

</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap');

body {

display: grid;

place-items: center;

height: 100vh;

background-color: black;

text-align: center;

}

input {

padding: 8px 14px;

border-radius: 4px;

outline: none;

border: 2px solid #E8CCFF;

display: block;

font-size: 16px;

margin: 5px;

}

.container {

text-align: center;

}

.img {

margin: 10px;

height: 150px;

}

JS

const image = document.querySelector("img"),

input = document.querySelector("input"),

button = document.querySelector("button"),

api = `https://api.qrserver.com/v1/`,

api2 = `create-qr-code/?size=150x150&data=`;

button.addEventListener("click", () => {

image.src = `${api}${api2}${input.value}`;

});

Generation QR with HTML, CSS, JS

HTML

CSS

JS

Post a Comment

Why Cybersecurity Courses Are in High Demand

Coding is the only global language, I wish more Indian kids learn it: Apple CEO Tim Cook

Python Cheat Sheet-1

Cognizant accelerating investment in generative AI: CEO Ravi Kumar

SQL Syllabus | SQL Training with 10 Modules

Made with Love by

Contact form

Generation QR with HTML, CSS, JS

HTML

CSS

JS

You may like these posts

Post a Comment

Contact form