Source Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Generate QR Code</title>
<style>
body{
background: linear-gradient(
90deg,
#2f2d2d,
#342d2d,
#504541,
#4f3c37)
}
.container{
width: 500px;
/* border: 1px double red; */
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap:20px;
padding: 20px;
margin: auto;
background: rgba(255, 255, 255, 0.10);
}
h1{
text-align: center;
margin-bottom: 40px;
margin-top: 40px;
color: beige;
}
#text{
border: none;
width: 200px;
padding:10px 10px 10px 20px;
outline: none;
font-size: large;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
button{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 100px;
padding: 10px;
font-weight: 800;
background: rgba(255, 255, 255, 0.10);
color: beige;
}
</style>
</head>
<h1>Generate your QR Code</h1>
<body>
<div class="container">
<input id="text" type="text" placeholder="Input">
<button onclick="generateQr()">Submit</button>
<br>
<img style="font-size: 20px;" id="imgQr" src="">
</div>
<script>
const text = document.getElementById("text");
const imgQr = document.getElementById("imgQr");
function generateQr(){
if(text.value.trim()===''){
imgQr.alt= "Please Enter your Input"
}
else{
imgQr.src= ` https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${text.value} `
text.value = '';
}
}
</script>
</body>
</html>
Output:
Top comments (0)