QR Code Generator using JavaScript

index.html

<h1>QR Code Generator</h1>
<input type="text" spellcheck="false" id="text" value="https://google.com" />
<div id="qrcode"></div>

qr-code-generator-using-javascript.markdown

QR Code Generator using JavaScript

A Pen by Max Programming on CodePen.

License.

script.js

const qrcode = document.getElementById("qrcode");
const textInput = document.getElementById("text");

const qr = new QRCode(qrcode);

textInput.oninput = (e) => {
	qr.makeCode(e.target.value.trim());
};

qr.makeCode(textInput.value.trim());

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

style.css

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	width: 80%;
	height: 100vh;
	margin: auto;
	display: grid;
	place-items: center;
}

h1 {
	font-family: sans-serif;
}

input {
	padding: 10px;
	border-radius: 20px;
	border: 2px solid steelblue;
	font-size: 1.5rem;
	letter-spacing: 2px;
	outline: none;
}