HTML & JS
<!DOCTYPE html>
<html>
<head>
<title>QR Code Generateor</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<p>Enter Your Text or URL</p>
<input type="text" name="" placeholder="Text or URL" id="qrtxt">
<div id="img">
<img src="" id="qrimg">
</div>
<button onclick="gq()">Generate QR Code</button>
</div>
<script type="text/javascript">
let qrimg= document.getElementById("qrimg");
let qrtxt= document.getElementById("qrtxt");
function gq()
{
if(qrtxt.value.length > 0){
qrimg.src=" https://api.qrserver.com/v1/create-qr-code/?size=150x150&data="+qrtxt.value;
}
else
{
alert("plese enter text or url");
}
}
</script>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
body
{
background-color: #262a2f;
}
.container
{
width: 400px;
padding: 25px 35px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: #fff;
border-radius: 10px;
}
.container p{
font-weight: 600;
font-size: 15px;
margin-bottom: 8px;
}
.container input{
width: 100%;
height: 50px;
border: 1px solid #49eea;
outline: 0;
padding: 10px;
margin: 10px 0 20px;
border-radius: 5px;
}
.container button
{
width: 100%;
height: 50px;
background: green;
color: white;
border:0;
outline: 0;
border-radius: 5px;
box-shadow: 0 10px 10px rgba(0,0,0,0.1);
cursor: pointer;
margin: 20px 0;
font-weight: 500; }
No comments:
Post a Comment