QR Code Generator Using Html,CSS, and JavaScript
Hello Coder! In this article, we create a QR Code Generator Using HTML, CSS, and JavaScript With Source Code. we have an input field where 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 created using JavaScript with HTML and CSS codes.
QR code, 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.
50+ HTML, CSS & JavaScript Projects With Source Code
QR is an acronym for Quick Response it helps very fast while user scans 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 a fraudulent transaction so BE careful while you a using it.
What is a QR code Generator?
A QR Code Generator is a web application that is used to make QR codes for any media file, such as images or text. YouTube videos, pdf files, and URLs A QR code generator, depending on the type of file, creates different types of QR codes. All the QR codes that are created are unique and completely different from each other to avoid duplication.
| Code by | Shantanu Jana |
| Project Download | Link Available Below |
| Language used | HTML, CSS and JavaScript |
| External link / Dependencies | Yes |
| Responsive | Yes |
In that case, our project today is going to be on the QR code of any website. Let’s get started.
Warning: As I mentioned in the title, it creates the QR of any website, so please take this as an educational purpose. If anything serious happens, Codewithrandom does not take 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 an attribute, created a textbox to input the URL, and then created a button, which will be an important part of this project and will help to create the QR code.
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
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 and alignment. Also, for a cool look, we have some colors by using the HEX code and setting the length of how much space the QR code will occupy after being generated.
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
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 a function. After that, we have included the website and QR code in the document. getElementById so that it will be easy to call, and in the end, we have set an if-else statement in which if the condition is satisfied, it will generate the QR code, and if it fails, it will throw an alert message.
That’s it. Let’s see the final output.
Final Output of QR Code Generator
ADVERTISEMENT
We have successfully created our QR Code Generator for any site using HTML5, CSS3, and JS (source code). You can use this project for your personal needs, and the respective lines of code are given with the code pen link mentioned below.
ADVERTISEMENT
ADVERTISEMENT
5+ HTML CSS project With Source Code
ADVERTISEMENT
ADVERTISEMENT
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
Which code editor do you use for this QR Code Generator coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
is this project responsive or not?
YES! This is a responsive project
Do you use any external links to create this project?
Yes!
What is a QR code Generator?
A QR Code Generator is a web application that is used to make QR codes for any media file, such as images or text. YouTube videos, pdf files, and URLs A QR code generator, depending on the type of file, creates different types of QR codes. All the QR codes that are created are unique and completely different from each other to avoid duplication.
