WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Générateur de QRCode
4124
pufffissal
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
15 May 2025
Générateur de mot de passe
30 August 2024
Diaporama de parallaxe
30 March 2025
Un code par ytr3d3
HTML
Copy
QR Code Generator | Code Traversal
Generate QR Code
Select Size:
100x100
200x200
300x300
400x400
500x500
600x600
700x700
800x800
900x900
1000x1000
CSS
Copy
:root{ --bcg-color: #1a1a1a; --primary-color: #00b894; --border-radius: 12px; --secondary-color: #ffffff; --border-color: #2ecc71; --animation-duration: 0.5s; } *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body{ width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: var(--bcg-color); } .box{ background-color: var(--primary-color); padding: 30px; width: 400px; border-radius: var(--border-radius); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3); animation: fadeIn 1s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .qr-header h1{ font-size: 26px; text-align: center; color: var(--secondary-color); margin-bottom: 24px; text-transform: uppercase; } .qr-header input, select{ width: 100%; padding: 12px; margin-bottom: 12px; border-radius: var(--border-radius); font-size: 18px; outline: none; border: 2px solid var(--border-color); transition: border-color 0.3s ease; } .qr-header input:focus, select:focus{ border-color: var(--primary-color); } .qr-header label{ color: var(--secondary-color); font-size: 20px; } .qr-header div{ display: flex; justify-content: space-between; } .qr-footer{ display: flex; justify-content: center; margin-top: 24px; } .qr-footer a{ background-color: var(--secondary-color); text-decoration: none; font-size: 20px; padding: 14px 36px; margin-inline: 2px; color: var(--primary-color); font-weight: 600; border-radius: var(--border-radius); transition: background-color 0.3s ease, color 0.3s ease; } .qr-footer a:hover{ background-color: var(--primary-color); color: var(--secondary-color); } .qr-body{ display: grid; place-items: center; padding:20px; } .qr-body img{ max-width: 100%; max-height: 100%; margin-block: 10px; padding: 20px; border: 1px solid var(--border-color); border-radius: var(--border-radius); transition: border-color 0.3s ease; } .qr-body img:hover{ border-color: var(--primary-color); } @media screen and (max-width:520px){ .box{ width: 80%; } .qr-footer a{ padding: 12px; font-size: 16px; } }
JS
Copy
const qrText = document.getElementById('qr-text'); const sizes = document.getElementById('sizes'); const generateBtn = document.getElementById('generateBtn'); const downloadBtn = document.getElementById('downloadBtn'); const qrContainer = document.querySelector('.qr-body'); let size = sizes.value; generateBtn.addEventListener('click',(e)=>{ e.preventDefault(); isEmptyInput(); }); sizes.addEventListener('change',(e)=>{ size = e.target.value; isEmptyInput(); }); downloadBtn.addEventListener('click', ()=>{ let img = document.querySelector('.qr-body img'); if(img !== null){ let imgAtrr = img.getAttribute('src'); downloadBtn.setAttribute("href", imgAtrr); } else{ downloadBtn.setAttribute("href", `${document.querySelector('canvas').toDataURL()}`); } }); function isEmptyInput(){ // if(qrText.value.length > 0){ // generateQRCode(); // } // else{ // alert("Enter the text or URL to generate your QR code"); // } qrText.value.length > 0 ? generateQRCode() : alert("Enter the text or URL to generate your QR code");; } function generateQRCode(){ qrContainer.innerHTML = ""; new QRCode(qrContainer, { text:qrText.value, height:size, width:size, colorLight:"#fff", colorDark:"#000", }); }