This Qr Generator Can Generate QR Code From Texts
You can Copy The Code For The GitHub Fork
[Check Out The Sample Website Here] https://arkaneelsampleprojecthub.on.drv.tw/arkaneel.generator.io/
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> | |
<link rel="stylesheet" href="main.arko.css"> | |
</link> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<meta charset="UTF-8"> | |
<title> Arkaneel's Qr Code Generator</title> | |
</head> | |
<body> | |
<div class="wrapper"> | |
<header> | |
<h1>Qr Code Generator</h1> | |
<p>paste an url or enter text to create Qr Code</p> | |
</header> | |
<div class="form"> <input type="text" placeholder="Enter Text or Url"> <button>Generate Qr Code</button> </div> | |
<div class="qr-code"> <img src="qrcode.png" alt="Qr-Code"> </div> | |
</div> | |
<script src="main.sass.js"></script> | |
</body> | |
</html> |
This Qr Generator Can Generate QR Code From Texts
You can Copy The Code For The GitHub Fork
[Check Out The Sample Website Here] https://arkaneelsampleprojecthub.on.drv.tw/arkaneel.generator.io/
const wrapper = document.querySelector(".wrapper"), | |
qrInput = wrapper.querySelector(".form input"), | |
generateBtn = wrapper.querySelector(".form button"), | |
qrImg = wrapper.querySelector(".qr-code img"); | |
let preValue; | |
generateBtn.addEventListener("click", () => { | |
let qrValue = qrInput.value.trim(); | |
if(!qrValue || preValue === qrValue) return; | |
preValue = qrValue; | |
generateBtn.innerText = "Generating QR Code..."; | |
qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrValue}`; | |
qrImg.addEventListener("load", () => { | |
wrapper.classList.add("active"); | |
generateBtn.innerText = "Generate QR Code"; | |
}); | |
}); | |
qrInput.addEventListener("keyup", () => { | |
if(!qrInput.value.trim()) { | |
wrapper.classList.remove("active"); | |
preValue = ""; | |
} | |
}); |
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); | |
*{ | |
margin: 0; | |
padding: 0; | |
box-sizing: border-box; | |
font-family: 'Poppins', sans-serif; | |
} | |
body{ | |
height: 100vh; | |
display: flex; | |
padding: 0 10px; | |
min-height: 100vh; | |
align-items: center; | |
background: #8083ff; | |
justify-content: center; | |
} | |
::selection{ | |
color: #fff; | |
background: #3498DB; | |
} | |
.wrapper{ | |
height: 280px; | |
max-width: 410px; | |
background: #fff; | |
border-radius: 7px; | |
padding: 20px 25px 0; | |
transition: height 0.2s ease; | |
box-shadow: 0 10px 30px rgba(0,0,0,0.1); | |
} | |
.wrapper.active{ | |
height: 530px; | |
} | |
header h1{ | |
font-size: 21px; | |
font-weight: 500; | |
} | |
header p{ | |
margin-top: 5px; | |
color: #575757; | |
font-size: 16px; | |
} | |
.wrapper .form{ | |
margin: 20px 0 25px; | |
} | |
.form :where(input, button){ | |
width: 100%; | |
height: 50px; | |
border: none; | |
outline: none; | |
border-radius: 5px; | |
transition: 0.1s ease; | |
} | |
.form input{ | |
font-size: 18px; | |
padding: 0 17px; | |
border: 1px solid #999; | |
} | |
.form input:focus{ | |
box-shadow: 0 3px 6px rgba(0,0,0,0.13); | |
} | |
.form input::placeholder{ | |
color: #999; | |
} | |
.form button{ | |
color: #fff; | |
cursor: pointer; | |
margin-top: 20px; | |
font-size: 17px; | |
background:linear-gradient(#6a78ff,#aab5ff); | |
} | |
.qr-code{ | |
opacity: 0; | |
display: flex; | |
padding: 33px 0; | |
border-radius: 5px; | |
align-items: center; | |
pointer-events: none; | |
justify-content: center; | |
border: 1px solid #ccc; | |
} | |
.wrapper.active .qr-code{ | |
opacity: 1; | |
pointer-events: auto; | |
transition: opacity 0.5s 0.05s ease; | |
} | |
.qr-code img{ | |
width: 170px; | |
} | |
@media (max-width: 430px){ | |
.wrapper{ | |
height: 270px; | |
padding: 16px 20px; | |
} | |
.wrapper.active{ | |
height: 510px; | |
} | |
header p{ | |
color: #696969; | |
} | |
.form :where(input, button){ | |
height: 50px; | |
} | |
.qr-code img{ | |
width: 160px; | |
} | |
} |
Uses QR Server Api