DEV Community

Harshit Khaladkar🇮🇳
Harshit Khaladkar🇮🇳

Posted on

QR Code Generator by HTML CSS and JavaScript

#javascript #html #css #beginners

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.

Top comments (0)