Hello Coder! In this article we create a QR Code Generator Using Html, Css, and JavaScript With Source Code. we have an input field we can enter any word or website and just click on generate and it generates a QR Code of the given input this project we create using JavaScript with html and css codes.
QR code, nowadays as technology is growing this feature has made it easy for each human to understand and make it a part of their lives. Earlier there us to be cash payments in heavy transactions now the scenario is the 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.
Simple Portfolio Website Using Html And Css With Source Code
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.
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 Javascript.
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.
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.
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
Top comments (0)