In the freebies section, we have one free service that converts your text or link into a QR code. That sounds interesting, so we will discuss how you can develop your own system like this.
Let's take a brief idea about it. You have one input box where you will put text or links according to your need. Then you will click on generate(that basically submits the form), then we request to google API that converts your link or text into QR code and sends us a response in terms of QR code image.
Now let's see the code, how we apply this animation to our website as a free service. We use HTML, css, and jQuery to create this whole system. You can visit our article on login (simple login system design using PHP and MySQL).
Flow Chart
We will discuss everything about this code converter in detail but before that, we will see its flow chart.
First, we will give text and link in input then submit the form after that google server will process this request and in return will give us an image of QR code. So its flow chart works like this, you can understand it closely in the image
01. index.html
First, we will prepare the index page on which the user will interact. This page will be very simple which will have one input and submit button. There will be more elements besides these two elements, but they will all be shown as needed. We will look at all those elements in detail later in this article.
html
<div id="qr-container"> // QR Code html container <div id="qr-form-container"> <input type="text" class="form-control" id="qr-input-content" placeholder="Enter text/link" required/> <button type="button" id="qr-call-btn">Generate</button> </div> <div id="qr-error-msg-container" style="margin: auto;"> // Error Message Container <p><br/></p> <div style="border-radius: 0%; font-family: poppins, sans-serif;margin: auto; " id="qr-error-msg"> <strong>Warning! Please Enter Something...</strong> <button style=" background-color: transparent; border: none;font-weight: bold;font-size: 16px;" type="button" id="close-qr-error">×</button> </div> </div> <div class="text-center" id="qr-download-section"></div> // QR Code Image Container <p><br></p> </div>
JQuery: visit JQuery official website for detailed documentation.
<script src="https://code.jquery.com/jquery-3.5.1.js"></script> // Jquery CDN Link
Final: "index.html"
<!DOCTYPE html> <html> <head> <title>QR Code Generator | Rustcode</title> </head> <body> <div id="qr-container"> <div id="qr-form-container"> <input type="text" class="form-control" id="qr-input-content" placeholder="Enter text/link" required/> <button type="button" id="qr-call-btn">Generate</button> </div> <div id="qr-error-msg-container" style="margin: auto;"> // Error Message Container <p><br/></p> <div style="border-radius: 0%; font-family: poppins, sans-serif;margin: auto; " id="qr-error-msg"> <strong>Warning! Please Enter Something...</strong> <button style=" background-color: transparent; border: none;font-weight: bold;font-size: 16px;" type="button" id="close-qr-error">×</button> </div> </div> <div class="text-center" id="qr-download-section"></div> // QR Code Image Container <p><br></p> </div> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> // Jquery CDN Link </body> </html>
As you can see we have written separate HTML code to contain "Error Message" and "QR Image". These two containers will not always be visible on the user interface because these two containers will be visible to the user according to interaction.
At starting, both these containers will be hidden, if the user tries to generate a QR code without giving any input to the form, then an error message will appear. If the user will generate "QR Code" by typing link/text in the input box then "QR CODE Container" will appear. it means after the form submit either an error message will appear or QR code container will appear. We will complete this conditional visibility with the help of Jquery, which we will discuss further.
output: The output of this html looks like this image.
02. style.css
We have also included "font-Family" whose link you will find below. We do not suggest that "font-family" should be included in the css file, for better page loading, you should upload the "font-family" in the html file itself.
font-family
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700');
css
#qr-container { width: 100%; margin-top: 50px; } #qr-error-msg-container { width: 80%; } #qr-form-container { width: 80%; margin: auto; display: flex; flex-direction: row; justify-content: space-between; } #qr-download-btn { background-color: transparent; font-weight: bold; font-size: 30px; } #qr-error-msg { width: auto; background-color: bisque; padding: 15px; margin: auto; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } #qr-call-btn, #qr-download-btn { width: 20%; border-radius: 0px; background-color: #FF6666; color: white; border: 2px solid #FF6666; padding: 15px; font-family: poppins, sans-serif; outline: none; } #qr-input-content { width: 80%; border-radius: 0px; color: #FF6666; background-color: white; border: 2px solid #FF6666; padding: 15px; font-family: poppins, sans-serif; outline: none; } #qr-download-section { text-align: center; }
output: The output of the user interface after applying simple css.
media query: We have written this to make the interface responsive, you can change it according to your wish.
@media screen and (max-width:800px) { #qr-form-container { width: 100%; text-align: center; flex-direction: column; } #qr-error-msg-container { width: auto; } #qr-input-content { width: auto; float: none; } #qr-call-btn, #qr-download-btn, #qr-error-msg { width: auto; margin-top: 10px; } #qr-download-btn { width: 100%; } }
output: The output of the user interface after applying css media query code.
03. script.js
Now let's talk about the important part of our project which is the Jquery script because with the help of this we will call Google's "Chart API" and show the response on the user interface. You'll find "Google APIs" and "Required Codes" later in this article.
Through this query, "error message" and "image of qr code" will be shown on the user's screen as we told you at the beginning of this article.
google chart api
https://chart.googleapis.com/chart?
You can read the documentation in detail from google chart's official website.
jquery script
function chartCall(value) { return $('<div/>').text(value).html(); } $('#close-qr-error').on("click", function () { $('#qr-error-msg').hide(); }); $(function () { $('#qr-error-msg').hide(); $('#qr-call-btn').click(function () { if ($('#qr-input-content').val() != 0) { $('#qr-error-msg').hide(); $("#qr-download-section").empty(); let finalURL = 'https://chart.googleapis.com/chart?cht=qr&chl=' + chartCall($('#qr-input-content').val()) + '&chs=200x200&chld=L|0'; var qrImg = "<img src='' class='qr-code' />"; $("#qr-download-section").append(qrImg); $('.qr-code').attr('src', finalURL); var qrSpace = "<p><br></p>"; var qrDwnldBtn = "<a href=" + finalURL + "> <button id='qr-download-btn' type='button' style='font-size: 12px;'>Download</button> </a> "; $("#qr-download-section").append(qrSpace, qrDwnldBtn); } else { $("#qr-download-section").empty(); $('#qr-error-msg').show(); } }); });
04. Souce Code
We will give you a self-practice suggestions but if you want to download the source code then you can click on the given link.
We try to provide you the best content, if there is any mistake in this article, then let us know.
Comments
Post a Comment