Build a QR Code Generator Using HTML, CSS and JavaScript
This tutorial will show you how to build a simple QR code generator that can be used to create QR codes for any text or URL. You'll learn how to use HTML to create the generator's markup, CSS to style it, and JavaScript to add functionality, such as generating QR codes and displaying them on the screen. By the end of this tutorial, you'll be able to build a QR code generator that you can use to create QR codes for your website, business cards, or other materials.
To build a simple QR code generator using HTML, CSS, and JavaScript, you need to create three files: HTML, CSS & JavaScript file. Once you create these files, just paste the given codes into your file.
Full Code Example:
HTML File:
<!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>#4 - Qr Code Generator | AsmrProg</title>
</head>
<body>
<section>
<div class="row">
<input type="color" class="light" value="#ffffff">
<input type="color" class="dark">
<select class="sizes">
<option value="100">100×100</option>
<option value="200">200×200</option>
<option value="300">300×300</option>
<option selected value="400">400×400</option>
<option value="500">500×500</option>
<option value="600">600×600</option>
<option value="700">700×700</option>
<option value="800">800×800</option>
<option value="900">900×900</option>
<option value="1000">1000×1000</option>
</select>
</div>
<input type="text" class="qr-text" placeholder="Enter QR Text">
<div id="qr-code"></div>
<div class="action-container">
<a href="#" class="download btn" download="QRCode">
<span>Download</span>
<img src="download.svg" alt="">
</a>
<button class="btn share-btn">
<span>Share</span>
<img src="share.svg" alt="">
</button>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script src="index.js"></script>
</body>
</html>CSS File:
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
box-sizing: border-box;
}
body{
background: #1c1e26;
font-family: sans-serif;
max-width: 500px;
height: 100vh;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
input[type="color"]{
border: none;
width: 32.5%;
height: 40px;
border-radius: 3px;
}
input[type="color"]::-webkit-color-swatch-wrapper{
padding: 0;
}
input[type="color"]::-webkit-color-swatch{
border: none;
}
a{
text-decoration: none;
}
.qr-text{
padding: 1rem;
display: block;
background: #181b29;
border: 1px solid #414866;
border-radius: 4px;
width: 100%;
margin: 0.5rem 0 1rem 0;
color: #fff;
outline: none;
}
.qr-text::placeholder{
color: #8b92b7;
font-weight: 500;
}
#qr-code{
height: 500px;
width: 500px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #414866;
}
#qr-code img, #qr-code canvas{
max-width: 100% !important;
max-height: 100% !important;
}
.row{
display: flex;
align-items: center;
justify-content: space-between;
}
.sizes{
width: 32.5%;
height: 40px;
color: #fff;
background: #181b29;
border: 1px solid #414866;
border-radius: 4px;
outline: none;
}
.btn{
color: #fff;
max-width: 200px;
padding: 14px;
background: rgb(106, 43, 255);
border-radius: 4px;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 1.1rem;
font-weight: 500;
flex: 1;
}
.btn img{
width: 20px;
margin-left: 10px;
}
.share-btn{
margin-left: 0.7rem;
}
.action-container{
display: flex;
margin: 1rem 0;
}
@media (max-width: 512px){
body{
max-width: 100%;
padding: 10px;
}
#qr-code{
width: 95vw;
height: 95vw;
}
#qr-code img, #qr-code canvas{
max-width: 95vw !important;
max-height: 95vw !important;
}
.btn{
min-width: unset;
}
}
@media (max-width: 350px){
.action-container{
flex-direction: column;
}
.share-btn{
margin-left: 0;
margin-top: 0.7rem;
}
}JavaScript File:
const download = document.querySelector(".download");
const dark = document.querySelector(".dark");
const light = document.querySelector(".light");
const qrContainer = document.querySelector("#qr-code");
const qrText = document.querySelector(".qr-text");
const shareBtn = document.querySelector(".share-btn");
const sizes = document.querySelector(".sizes");
dark.addEventListener("input", handleDarkColor);
light.addEventListener("input", handleLightColor);
qrText.addEventListener("input", handleQRText);
sizes.addEventListener("change", handleSize);
shareBtn.addEventListener("click", handleShare);
const defaultUrl = "https://youtube.com/@AsmrProg";
let colorLight = "#fff",
colorDark = "#000",
text = defaultUrl,
size = 300;
function handleDarkColor(e) {
colorDark = e.target.value;
generateQRCode();
}
function handleLightColor(e) {
colorLight = e.target.value;
generateQRCode();
}
function handleQRText(e) {
const value = e.target.value;
text = value;
if (!value) {
text = defaultUrl;
}
generateQRCode();
}
async function generateQRCode() {
qrContainer.innerHTML = "";
new QRCode("qr-code", {
text,
height: size,
width: size,
colorLight,
colorDark,
});
download.href = await resolveDataUrl();
}
async function handleShare() {
setTimeout(async () => {
try {
const base64url = await resolveDataUrl();
const blob = await (await fetch(base64url)).blob();
const file = new File([blob], "QRCode.png", {
type: blob.type,
});
await navigator.share({
files: [file],
title: text,
});
} catch (error) {
alert("Your browser doesn't support sharing.");
}
}, 100);
}
function handleSize(e) {
size = e.target.value;
generateQRCode();
}
function resolveDataUrl() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const img = document.querySelector("#qr-code img");
if (img.currentSrc) {
resolve(img.currentSrc);
return;
}
const canvas = document.querySelector("canvas");
resolve(canvas.toDataURL());
}, 50);
});
}
generateQRCode();This tutorial provides simple steps and code to help you build a simple QR code generator using HTML, CSS, and JavaScript.
1.90 GEEK