JSFiddle - React, Tailwind, and code Playground

by lagendre

HTML

<div>
    <img src="https://chart.googleapis.com/chart?cht=qr&amp;chl=budget-programmer.blogspot.tw&amp;chs=160x160&amp;chld=L|0" 
 id="qr-code" />
  </div>

 <input type="text" id="contentorurl" placeholder="Enter content" />   
<button type="button" id="generate">Generate</button>

CSS

#qr-code {
   display: block;
    margin: 0 auto;
}
#contentorurl{
     width:98%;
}
#generate{
margin-top:5px;
float: right;
}

JavaScript

$("#generate").click(function() {
    $("#qr-code").attr("src", "https://chart.googleapis.com/chart?cht=qr&chl=" + encodeURIComponent($("#contentorurl").val()) + "&chs=160x160&chld=L|0");
  });