QR-Code-Generator/tp.html at master · shivamk01/QR-Code-Generator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<html>
<head>
<meta charset="utf-8">
<title>QR code generator</title>
<style>
  body {
  background-color:#cccccc;
  font-family: arial, sans-serif; }
  section {
    margin: 50px auto;
    max-width: 350px;
    text-align: center;
  }
  textarea {
    width: 100%;
    height: 50px;
    margin-bottom: 10px;
  }
  #size { max-width: 64px; }
</style>
</head>
<body>
<section>
  <h1>QR code generator</h1>
  <p>Enter some text / random characters !</p>
  <textarea id="textarea" autofocus></textarea>
  <label for="size">Size (px):</label>
  <input id="size" type="number" value="150" min="50" max="500" step="50"></br></br></br>
  <button style="border-radius:7px;border:2px solid black;height:35px;width:100px;cursor:pointer;color:white;background-color:black;" onclick="genQRcode()">Generate</button>
  <div id="content" style="display: none;">
    <p><img id="qrcode" src="" /></p>

  </div>
</section>
<script>
  var textarea = document.getElementById("textarea"),
    content = document.getElementById("content");
textarea.value="9427499789";
  function genQRcode() {
    var data = encodeURIComponent(textarea.value),
      size = document.getElementById("size").value,
      chart = "http://chart.googleapis.com/chart?cht=qr&chs=" + size + "x" + size + "&choe=UTF-8&chld=L|0&chl=" + data;
    if (data === "") {
      alert("Please enter a valid data!");
      textarea.focus();
      content.style.display = "none";
    } else {
      content.style.display = "";
      document.getElementById("qrcode").src = chart;
      document.getElementById("qrcode-url").value = chart;
    }
  }

  document.addEventListener("keydown", function(e) {
    if (e.ctrlKey && e.keyCode == 13) {
      genQRcode();
    }
  });
</script>
</body>
</html>