QR Code Generator Using HTML, CSS And JAVASCRIPT (Source Code)

QR Code Generator Using HTML, CSS And JAVASCRIPT (Source Code)

QR code, nowadays as the technology is growing this feature has made it easy for each human to understand and make it as part of their lives. Earlier there us to be cash payment in heavy transaction now the scenario is complete difference you can make a payment from your home across the globe to anyone.

QR is acronym Quick Response it helps very fast while user scan it with their respective mobile phone and redirects them to their location. But, we all know that “where there is a pro, there is a con” the user can easily get scammed or he may become a part of fraud transaction so BE careful while you a using.

In that case our todays project is going to be on QR Code of any website. Lets get started.

WARNING: As I mentioned in the title it creates QR of any website so please take this as a education purpose if anything serious is happened Codewithrandom does not take the responsibility.

HTML Code For QR Generator

<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">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>

<div class="form">
  <h1>QR Code Generator</h1>
  <form>
    <input type="url" id="website" name="website" placeholder="https://webisora.com" required />

    <div id="qrcode-container">
        <div id="qrcode" class="qrcode"></div>
    </div>

    <button type="button" onclick="generateQRCode()">Generate QR Code</button>
    
</form>
</div>
</body>
</html>

In this code we have formed the structure in that we have created a title and given h1 as a attribute and create a textbox to input the URL then we have created a button which will be the important part of this project which will help to create the QR Code.

100+ Front-end Projects for Web developers (Source Code)

So the structure is ready now let us code and style the structure.

CSS Code FOR QR Generator

body{
    background: rgb(200, 220, 224);
}
        .form {
  font-family: Helvetica, sans-serif;
  max-width: 400px;
  margin: 100px auto;
  text-align: center;
  padding: 16px;
  background: #ffffff;
}
.form h1 {
  background: #03773f;
  padding: 20px 0;
  font-weight: 300;
  text-align: center;
  color: #fff;
  margin: -16px -16px 16px -16px;
  font-size:  25px;
}
.form input[type="text"],
.form input[type="url"] {
  box-sizing: border-box;
  width: 100%;
  background: #fff;
  margin-bottom: 4%;
  border: 1px solid #ccc;
  padding: 4%;
  font-size: 17px;
  color: rgb(9, 61, 125);
}
.form input[type="text"]:focus,
.form input[type="url"]:focus {
  box-shadow: 0 0 5px #5868bf;
  padding: 4%;
  border: 1px solid #5868bf;
}

.form button {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 180px;
  margin: 0 auto;
  padding: 3%;
  background: #0853b6;
  border: none;  
  border-radius: 3px;
  font-size: 17px;
  border-top-style: none;
  border-right-style: none;
  border-left-style: none;
  color: #fff;
  cursor: pointer;
}
.form button:hover {
  background: rgba(88,104,191, 0.5);
}
#qrcode-container{
    display:none;
}

.qrcode{
  padding: 16px;
  margin-bottom: 30px;
}
.qrcode img{
  margin: 0 auto;
  box-shadow: 0 0 10px rgba(67, 67, 68, 0.25);
  padding: 4px;
}

In the styling part we have aligned all the attributes of the structure and provided the appropriate padding & alignment. Also for the cool look we have some colors by using HEX code and set the length that how much space of the window can the QR code will occupy after being generated.

Now to make it responsive we have to create a script in the language of Java.

JavaScript Code FOR QR Generator

function generateQRCode() {
  let website = document.getElementById("website").value;
  if (website) {
    let qrcodeContainer = document.getElementById("qrcode");
    qrcodeContainer.innerHTML = "";
    new QRCode(qrcodeContainer, website);
 
    document.getElementById("qrcode-container").style.display = "block";
  } else {
    alert("Please enter a valid URL");
  }
}

In this script we have taken the generateQRCode onclick event from the HTML Code and called it as function after that we have included website & qrcode in the document.getElementById so that it will be easy to call and in the last we have set an if-else statement in which if the condition satisfices it will generate the QR Code and if it fails it will throw an alert message.

That’s it lets see the Final Output.

Final Output of QR Code Generator

We have Successfully created our QR Code Generator of any site using HTML5, CSS3 & JS (Source Code)| JavaScript QR Code Generator You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned below.

5+ HTML CSS project With Source Code

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By – Harsh Sawant

Code By – Shantanu Jana

Share on:

Leave a Comment