charlesl46.github.io/qrcode_generator.html at main · charlesl46/charlesl46.github.io · GitHub

47 lines (40 loc) · 1.34 KB

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

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>QR Code generator</title>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>

</head>

<body>

<div class="ui stacked segment" style="margin: 10px;">

<h1 class="ui header">QR Code generator</h1>

<div class="field">

<label>Text to encode</label>

<div class="ui fluid icon input">

<input type="text" placeholder="Your text here">

<i class="qrcode icon"></i>

</div>

</div>

<div style="margin:20px; align-items: center;" id="qrcode"></div>

</div>

<script src="js/qrcode.min.js"></script>

<style>

#qrcode {

display: flex;

justify-content: center;

align-items: center;

}

</style>

<script>

const qrcode = new QRCode(document.getElementById("qrcode"));

$("input").keyup(function () {

console.log("input");

var value = $(this).val();

qrcode.clear()

qrcode.makeCode(value);

});

</script>

</body>

</html