-
Notifications
You must be signed in to change notification settings - Fork 0
/
qr.html
83 lines (77 loc) · 2.7 KB
/
qr.html
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<html>
<head>
<title>Q's QR Code Generator</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script>
/*Example of an output
<img src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&size=100x100" alt="" title="" />
*/
function urlBreakDown()
{
var firstInput = document.getElementById('input1').value;
if (firstInput.length == 0)
{
alert="Please insert a value to generate a QR Code";
}
var resultQR = "https://api.qrserver.com/v1/create-qr-code/";
var userInput = "?data=" + firstInput;
var heightAndWidth = document.getElementById('hw').value;
var qrSize = "&size=" + heightAndWidth + "x" + heightAndWidth;
resultQR += userInput + qrSize;
return document.getElementById('output').innerHTML = "<img src='" + resultQR + "' alt='QR Code Generated by Qoyyuum' title='' />";
}
function qrgen()
{
urlBreakDown();
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>QR Code Generator by Qoyyuum</h1>
<p>This QR Code Generator leverages on using the <a href="http://goqr.me/api/doc/create-qr-code/">QR Code API</a></p>
<p>This is a test</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form method="" action="" class="form-horizontal">
<div class="form-group">
<label for="input1">Book Stuff:</label>
<textarea type="text" class="form-control" name="input1" id="input1" rows="5" cols="50" placeholder="Enter some book title here"></textarea>
</div>
<div class="form-group">
<label for="hw">Height & Width</label>
<input class="form-control" type="text" name="hw" id="hw" value="200" readonly />
<br />
<div id="height-width-controller"></div>
</div>
<button onClick="qrgen()" type="button" class="btn btn-lg btn-success">Submit</button>
</form>
<p>This is where the QR Code image will be.</p>
<div id="output"></div>
</div>
</div>
</div>
<script>
$(function() {
$("#height-width-controller").slider({
range: "min",
value: 200,
min: 100,
max: 1000,
step: 100,
slide: function( event, ui ) {
$("#hw").val(ui.value);
}
});
$("#hw").val($("#height-width-controller").slider("value"));
});
</script>
</body>
</html>