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/
Last active
December 21, 2023 10:29
-
-
Save Arkaneel/2b88567b2ceef352fa8248e270462aab to your computer and use it in GitHub Desktop.
QR Code Generator By Arkaneel
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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 file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 = ""; | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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; | |
| } | |
| } |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uses QR Server Api