WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Générateur de code QR en JavaScript
1601
Andev.web
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
21 June 2024
Bouton d'autodestruction
17 June 2025
Un code de PNL
30 May 2025
Formulaire d'inscription / de connexion
HTML
Copy
Andev Web
QR Code Generator
Paste a url or enter text to create QR code
Generate QR Code
CSS
Copy
@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{ display: flex; padding: 0 10px; min-height: 100vh; align-items: center; background: #26C6DA; justify-content: center; } .wrapper{ height: 265px; 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: 55px; 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: #26C6DA; } .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: 255px; padding: 16px 20px; } .wrapper.active{ height: 510px; } header p{ color: #696969; } .form :where(input, button){ height: 52px; } .qr-code img{ width: 160px; } }
JS
Copy
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 = ""; } });