In this tutorial, you will be going through the steps of creating a QR Code generator web-application with the help of HTML, CSS and JavaScript. This is a very simple guide which anyone can understand and create a QR Code generator their own. Let’s dive into the contents:
Setting up of the HTML page
At first, create a file named index.html as index is the default landing page of a website and the extension will be .html. The page is designed with input fields where you can enter the information. A button is included to generate the QR Code and a container is provided to display the generated QR Code. In this Html page, we will be inserting the JavaScript within the script tag only to minimize the number of pages.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR-Generator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h3>QR Code Generator</h3>
<input type="text" id="qrtxt" placeholder="Enter text...">
<div id="img">
<img src="" id="qrimg">
</div>
<button onclick="generateQR()">Generate QR Code</button>
</div>
<script>
let qrimg = document.getElementById("qrimg");
let qrtxt = document.getElementById("qrtxt");
function generateQR(){
qrimg.src = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" + qrtxt.value;
img.classList.add("showqr");
}
</script>
</body>
</html>
Explanation:
<!DOCTYPE html>: Defines the document type and html version.
<html lang=”en”>: Specifies language of document as english.
<head>: Contains meta-information about the HTML document.
<meta charset=”UTF-8″>: Specifies the character encoding to UTF-8.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>: Ensures the webpage is properly scaled and responsive.
<title>QR-Generator</title>: Sets the title of the web page as “QR-Generator”.
<link rel=”stylesheet” href=”style.css”>: Links an external CSS file (style.css) for styling purpose.
<body>: Contains the content that will be displayed on the web page.
<div class=”container”>: A ‘div’ tag for creating a division with a class ‘container’.
<h3>QR Code Generator</h3>: A heading that displays the text ‘QR Code Generator’.
<input type=”text” id=”qrtxt” placeholder=”Enter text…”>: A input text field where you can enter the text to convert it into a QR Code.
<div id=”img”>: A ‘div’ tag for containing the QR Code image.
<img src=”” id=”qrimg”>: An ‘img’ element where the generated QR Code will be displayed. JavaScript will dynamically set the ‘src’.
<button onclick=”generateQR()”>Generate QR Code</button>: A button that, when clicked, triggers the ‘generateQR()’ function.
<script>: Starts a block of Javascript code.
let qrimg = document.getElementById(“qrimg”);: Declares a variable ‘qrimg’ and assigns it the ‘img’ element with the ‘id’ of ‘qrimg’.
let qrtxt = document.getElementById(“qrtxt”);: Declares a variable ‘qrtxt’ and assigns it the input element with the ‘id’ of ‘qrtxt’.
function generateQR(){..}: Defines a function named ‘generateQR’ that runs when called.
qrimg.src = “https://api.qrserver.com/v1/create-qr-code/?size=150×150&data=” + qrtxt.value;: Sets the ‘src’ attribute of the ‘qrimg’ element to a URL that generates a QR Code. The ‘data’ parametre in the URL is set to the value entered in the text input (qrtxt.value), so the QR Code will represent the text.
img.classList.add(“showqr”);: This line adds the class ‘showqr’ to the ‘img’ element.
Output:
Adding CSS Styles
To make our QR Code visually attractive and user-friendly, we’ll add some css styles. Create a file named style.css and add the following styles:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: aqua;
}
.container{
width: 400px;
position: absolute;
padding: 25px 35px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border-color: black;
border-radius: 20px;
background: #fff;
}
.container h3{
font-weight: 200;
font-family: cursive;
margin-bottom: 8px;
text-shadow: 2px 1px 5px #000;
}
.container input{
width: 100%;
height: 50px;
padding: 5px;
border: 1px solid #000;
margin: 10px 0 20px;
border-radius: 10px;
}
.container button{
width: 100%;
height: 50px;
border-radius: 10px;
border: 0;
outline: 0;
background: rgb(41, 226, 239);
box-shadow: 0 12px 10px rgba(0,0,0,0.5);
}
.container button:hover{
cursor: pointer;
background-color:deepskyblue;
}
#img{
width: 200px;
border-radius: 5px;
transition: max-height 1s;
}
#img img{
width: 100%;
padding: 10px;
}
#img.showqr{
max-height: 300px;
margin: 10px auto;
border: 1px solid #000;
}
Explanation:
- ‘*’ Selector:
- Resets margin and padding for all elements.
- Ensure consistent box sizing.
- ‘body’:
- Sets the background color to aqua.
- ‘.container’:
- Wheat is 400px and centred using absolute positioning and transform.
- Uses padding for space inside.
- Rounds corner with a border radius.
- Background is white.
- ‘.container h3’:
- Light font wight with a cursive style.
- Adds a text shadow for a 3D effect.
- Margins separate it from other elements.
- ‘.container input’:
- Full width, 50px height.
- Includes padding and a solid border.
- Rounds corner with a border radius.
- Margin provides spacing
- ‘.container button’:
- Full width, 50px height.
- Rounds corner with no border.
- Background color is bright blue.
- Box shadow for depth.
- ‘.container button:hover’:
- Changes the background on hover to deep-sky-blue.
- Changes the cursor to pointer on hover.
- ‘#img’:
- Fixed width with rounded corners.
- Smooth transition for height changes.
- ‘.#img img’:
- Fills the container width with padding.
- ‘#img.showqr’:
- Controls maximum height and centers the image with a border.
Output:
Testing the code:
- Save the files in same directory to run it properly.
- Open the .html file in a web browser or live server.
- Enter text on the input field. Then click on “Generate QR Code” button to generate the QR Code.
- The QR Code will be displayed according to the text or link entered.
Final output:
Enter the text and click on Generate QR Code button.
Here’s the QR Code that is generated after clicking the Generate QR Code button. Now you can simply scan the QR Code to verify whether it’s displaying accurate QR Code or not.
Conclusion:
This code integrates HTML, CSS and JavaScript to create user friendly QR Code generator. The HTML structures the interface, the CSS ensures a clean modern design and the JavaScript dynamically generates the QR Code based on user input. Together they provide a seamless and visually appealing experience for generating QR Codes.
You can customise the styles according to your own choice to make!
Have a Happy and a Great Coding!