<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.form{
padding: 15px;
border-radius: 10px;
width: 300px;
border: 1px solid #ccc;
}
.form-control{
margin-bottom: 15px;
}
.form-control input{
padding: 10px;
border-radius: 15px;
width: 100%;
border: 1px solid #ccc;
}
.form-control input:focus{
outline: none !important;
border: 1px solid #ccc;
}
.form-control button{
display: block;
cursor: pointer;
padding: 10px 5px;
width: 100%;
background-color: #444;
color: #ffff;
border: 0;
border-radius: 15px;
}
#img{
width: 100%;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="form">
<div class="form-control">
<label>Enter data to generate a code</label>
</div>
<div class="form-control">
<input type="text" id="data">
</div>
<div class="form-control">
<button id="btn">Generate QR Code</button>
</div>
</div>
<img src="" id="img">
</div>
<script type="text/javascript">
const input=document.getElementById('data');
const button=document.getElementById("btn");
const qrImg=document.getElementById("img");
button.addEventListener("click",()=>{
let data=input.value;
if(data.length>0){
let qrsource="https://api.qrserver.com/v1/create-qr-code/?size=100x100&data="+data;
qrImg.src=qrsource;
}
})
</script>
</body>
</html>
Comments
Post a Comment