Skip to main content

Archive

Show more

How to convert text or link into QR code

how-to-convert-text-or-link-into-qr-code

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

Flow-Chart-Text-Or-Link-to-qr-code-conversion


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">&times;</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">&times;</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.

text-or-link-to-qr-code-conversion-html-structure



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.

text-or-link-to-qr-code-conversion-interface-after-applying-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.

text-or-link-to-qr-code-conversion-interface-after-applying-css-media-query


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