Hi Guys.In this post I will show you how to make QR code generator by HTML CSS and JavaScript.
Output👇
HTML
<body>
<h1>QR Code Generator</h1>
<input
type="text"
spellcheck="false"
id="text"
value="https://google.com"
/>
<div id="qrcode"></div>
</body>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 80%;
height: 30vh;
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;
}
JavaScript
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script type="text/javascript">
const qrcode = document.getElementById("qrcode");
const textInput = document.getElementById("text");
const qr = new QRCode(qrcode);
qr.makeCode(textInput.value.trim());
textInput.oninput = (e) => {
qr.makeCode(e.target.value.trim());
};
For Example I used my twitter account link . It shows like this.
Output 👇
Thanks for reading my post please like share.
Top comments (0)