Veuillez vous connecter à votre compte.
Les codes QR (Quick Response) sont capables de stocker de nombreuses données et les utilisateurs peuvent facilement accéder aux informations en scannant le code QR. Dans mon application QR Code Generator, les utilisateurs peuvent saisir un texte ou une URL pour générer un code QR correspondant. Il s'agit d'une application de génération de code QR, pas d'un scanner de code QR.
Code HTML-CSS-JS
Apercu du projet
Cliquer sur ce bouton pour voir le projet et de tester sa responsivité...
Si vous avez aimé ce générateur de code QR et que vous souhaitez en obtenir des codes sources ou des fichiers, vous pouvez facilement les obtenir à partir du bas de cette page.
Pour créer un générateur de code QR en JavaScript. Tout d'abord, vous devez créer trois fichiers : HTML, CSS et JavaScript. Après avoir créé ces fichiers, collez simplement les codes donnés dans votre fichier. Vous pouvez également télécharger les fichiers de code source de cette application QR Code Generator à partir du bouton de téléchargement ci-dessous.
Structures du dossier
Tout d'abord, créez un fichier HTML avec le nom index.html et collez les codes donnés dans votre fichier HTML. N'oubliez pas que vous devez créer un fichier avec l'extension .html.
Deuxièmement, créez un fichier CSS avec le nom style.css et collez les codes donnés dans votre fichier CSS. N'oubliez pas que vous devez créer un fichier avec l'extension .css.
Enfin, créez un fichier JavaScript avec le nom script.js et collez les codes donnés dans votre fichier JavaScript. N'oubliez pas que vous devez créer un fichier avec l'extension .js.
Astuces
Double tap sur le code pour copier!
Recommandée
Cliquer sur les publicités pour nous soutenir!
<!DOCTYPE html>
<!-- Coding By Coding Team-->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>QR Code Generator in JavaScript | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<header>
<h1>QR Code Generator</h1>
<p>Paste a url or enter text to create QR code</p>
</header>
<div class="form">
<input type="text" spellcheck="false" placeholder="Enter text or url">
<button>Generate QR Code</button>
</div>
<div class="qr-code">
<img src="" alt="qr-code">
</div>
</div>
<script src="script.js"></script>
</body>
</html>
/* Import Google Font - Poppins */
@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: #3498DB;
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: #3498DB;
}
.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;
}
}
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 = "";
}
});
C'est tout, vous avez maintenant créé avec succès un générateur de code QR en HTML CSS et JavaScript. Si votre code ne fonctionne pas ou si vous rencontrez des problèmes, veuillez télécharger les fichiers de code source à partir du bouton de téléchargement indiqué. C'est gratuit et un fichier .zip sera téléchargé puis vous devrez l'extraire.
Télécharger le code source
Astuces
Cliquer sur les publicités pour nous soutenir!
Qr code
Code
888KB
Coding Team
.zip
FIN DU PROJECT
Merci pour la visite. J'espère que vous avez appris aussi. Merci de partager mon contenu/cours sur les réseaux sociaux. Si vous avez des questions/suggestions sur ce sujet, veuillez soumettre un seul commentaire. Je répondrai avec votre réponse pendant un maximum de 24 heures. Bon codage!
