DEV Community

Harshit Khaladkar🇮🇳
Harshit Khaladkar🇮🇳

Posted on

3 1

QR Code Generator by HTML CSS and JavaScript

Hi Guys.In this post I will show you how to make QR code generator by HTML CSS and JavaScript.
Output👇

A pie chart showing 40% responded "Yes", 50% responded "No" and 10% responded "Not sure"

HTML

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

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;
  }

Enter fullscreen mode Exit fullscreen mode

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());
  };

Enter fullscreen mode Exit fullscreen mode

A pie chart showing 40% responded "Yes", 50% responded "No" and 10% responded "Not sure"<br>
For Example I used my twitter account link . It shows like this.
Output 👇

A pie chart showing 40% responded "Yes", 50% responded "No" and 10% responded "Not sure"<br>
Thanks for reading my post please like share.

Image of PulumiUP 2025

Explore What’s Next in DevOps, IaC, and Security

Join us for demos, and learn trends, best practices, and lessons learned in Platform Engineering & DevOps, Cloud and IaC, and Security.

Save Your Spot

Top comments (0)

Jetbrains image

Build Secure, Ship Fast

Discover best practices to secure CI/CD without slowing down your pipeline.

Read more