html-css-js-projects/qrcode.html at main · Faizan2228/html-css-js-projects · 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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    *{
        padding: 0;
        margin: 0;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        box-sizing: border-box;
    }
    body{
        background: rgb(43, 38, 38);
    }
    .container{
        color: rgb(10, 85, 110);
        background-color: #fff;
        width: 400px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
        padding: 20px;
    }
    .container h3{
        margin: 6px;
        font-weight: 600px;
    }
    .container input{
        width: 100%;
        margin: 5px;
        padding: 7px;
        font-size: 17px;
        border: 1px black solid;
        border-radius: 5px;
    }
    .container button{
        border: none;
        outline: none;
        padding: 14px 17px;
        background-color: rgb(43, 38, 38);
        color: #fff;
        font-size: 14px;
        margin: 5px;
        border-radius: 5px;
        cursor: pointer;
    }
    .error{
        animation: shake 0.1s linear 10;
    }
    @keyframes shake{
        0%{
            transform: translate(0);
        }
        25%{
            transform: translate(-2px);
        }
        50%{
            transform: translate(0);
        }
        75%{
            transform: translate(2px);
        }
        100%{
            transform: translate(0);
        }
    }
</style>
</head>
<body>
<div class="container">
    <h3>Enter your text or URL</h3>
    <input type="text" id="input" placeholder="Text or URL">
    <div id="qrcode"><img src="" id="qrimage"></div>
    <button class="generate" onclick="qrCodeGenerator()">Generate QR Code</button>
</div>
<script>
    const inp = document.getElementById("input");
    const qrimg = document.getElementById("qrimage");
    function qrCodeGenerator(){
        if(inp.value.length > 0){
        qrimg.src = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data="+ inp.value;
        }else{
            inp.classList.add("error");
            setTimeout(() => {
                inp.classList.remove("error");
            },1000)
        }
        inp.value = "";
    }
</script>
</body>
</html>