Besoins d'un site web sur mesure pour votre entreprise

Contactez-moi
Javascript

Créateur de QRcode

Par Malik • 04 July 2024

Image du lecteur de musique

Dans cet article, nous allons créer un générateur de code QR en utilisant HTML, CSS et JavaScript. Ce générateur vous permettra de créer des codes QR pour différents types de données telles que des URL, des numéros WhatsApp, des noms d'utilisateur Facebook ou Instagram. Suivez les étapes ci-dessous pour comprendre comment ce projet est réalisé.

Le code HTML fournit la structure de base pour notre générateur. Il comprend un champ de texte pour entrer les données, un menu déroulant pour sélectionner le type de lien et un bouton pour générer le code QR. Le code CSS ajoute du style pour rendre notre générateur visuellement attrayant, tandis que le code JavaScript gère la logique de génération du code QR en fonction du type de données entré.

Structure HTML

Le code HTML suivant crée la structure de notre générateur de code QR. Il comprend :

  • Un champ de texte pour que l'utilisateur entre l'URL ou autre information.
  • Un menu déroulant pour sélectionner le type de lien que vous souhaitez encoder en QR code.
  • Un bouton pour déclencher la génération du code QR.
  • Une image où le code QR généré sera affiché.

Code HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Générateur de code QR</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="wrapper">
      <div class="container">
        <h1>Générateur code QR</h1>
        <img src="" id="qr-code-img" />
        <input
          class="input"
          type="text"
          placeholder="Entrer URL pour générer le code QR"
        />
        <select id="link-type" onchange="changeInputMode()">
          <option value="url">URL</option>
          <option value="whatsapp">WhatsApp</option>
          <option value="facebook">Facebook</option>
          <option value="instagram">Instagram</option>
        </select>
        <button class="generate-btn">Générer le code QR</button>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Mise en forme avec CSS

Le code CSS ci-dessous est utilisé pour styliser le générateur de code QR. Il définit :

  • Les polices et les styles globaux pour l'ensemble de la page.
  • Le design des différents éléments tels que les boutons, le champ de texte, et la liste déroulante.
  • La mise en page pour centrer le contenu et créer un effet visuel agréable.

Code CSS


@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(to right, #4facfe 0%, #00fed4 100%);
}

.wrapper {
  display: flex;
  width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  row-gap: 20px;
  width: 550px;
  padding: 30px 40px;
  border-radius: 10px;
  background-color: #fff;
}

.container h1 {
  font-size: 40px;
  margin-bottom: 30px;
}

.container input {
  width: 100%;
  outline: none;
  height: 50px;
  border: solid 1px #ccc;
  font-size: 20px;
  padding: 10px;
  margin: 10px 0 20px;
  border-radius: 5px;
}

.container button {
  width: 100%;
  height: 50px;
  border: none;
  background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.3s all ease;
}

.container button:hover {
  transform: scale(1.02);
}

/* Style de la liste déroulante */
#link-type {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  cursor: pointer;
}

#link-type:focus {
  outline: none;
}

#link-type option {
  padding: 10px;
}

#link-type option:hover {
  background-color: #f0f0f0;
}

Logique de génération du QR Code

Le code JavaScript suivant gère la logique pour générer le code QR. Il fait ce qui suit :

  • Modifie le mode d'entrée en fonction du type de lien sélectionné dans le menu déroulant.
  • Valide les entrées en fonction du type de lien et prépare le lien approprié pour la génération du QR code.
  • Affiche le code QR en mettant à jour l'image avec l'URL du code QR généré.

Code JavaScript


function changeInputMode() {
  const linkTypeSelect = document.getElementById("link-type");
  const input = document.querySelector(".input");

  if (linkTypeSelect.value === "whatsapp") {
    input.setAttribute("type", "tel");
    input.setAttribute("placeholder", "Entrer votre numéro WhatsApp...");
    input.removeAttribute("pattern"); // Supprime le pattern pour permettre uniquement des chiffres
  } else if (linkTypeSelect.value === "instagram") {
    input.setAttribute("type", "text");
    input.setAttribute(
      "placeholder",
      "Entrer votre nom d'utilisateur Instagram..."
    );
    input.setAttribute("pattern", "[A-Za-z0-9_]+"); // Permet uniquement des lettres, chiffres et underscores
  } else if (linkTypeSelect.value === "facebook") {
    input.setAttribute("type", "text");
    input.setAttribute(
      "placeholder",
      "Entrer votre nom d'utilisateur Facebook..."
    );
    input.setAttribute("pattern", "[A-Za-z0-9]+"); // Permet uniquement des lettres et chiffres
  } else {
    input.setAttribute("type", "text");
    input.setAttribute(
      "placeholder",
      "Entrer votre texte ou URL pour générer le code QR..."
    );
    input.removeAttribute("pattern"); // Supprime le pattern pour permettre tout type de texte
  }
}

const generateBtn = document.querySelector(".generate-btn");

generateBtn.addEventListener("click", function () {
  const linkTypeSelect = document.getElementById("link-type");
  const input = document.querySelector(".input");
  const qrCodeImg = document.getElementById("qr-code-img");

  let inputValue = input.value.trim(); // Trim pour enlever les espaces en début et fin de texte
  if (inputValue === "") {
    alert("Veuillez entrer votre texte ou URL !");
    qrCodeImg.style.marginBottom = "0";
    return;
  }

  let linkPrefix = "";
  switch (linkTypeSelect.value) {
    case "url":
      linkPrefix = "";
      break;
    case "whatsapp":
      // Vérifie que l'entrée ne contient que des chiffres
      if (!/^\d+$/.test(inputValue)) {
        alert(
          "Pour WhatsApp, veuillez entrer uniquement des chiffres pour le numéro !"
        );
        qrCodeImg.style.marginBottom = "0";
        return;
      }
      linkPrefix = "https://wa.me/?text=";
      break;
    case "facebook":
      // Pour Facebook, assurez-vous que l'URL est correctement encodée
      inputValue = encodeURIComponent(inputValue);
      linkPrefix = "https://www.facebook.com/sharer/sharer.php?u=";
      break;
    case "instagram":
      // Pour Instagram, l'entrée doit être le nom d'utilisateur
      // Exemple de vérification simple : ne contient pas d'espaces
      if (inputValue.includes(" ")) {
        alert(
          "Pour Instagram, veuillez entrer uniquement le nom d'utilisateur sans espaces !"
        );
        qrCodeImg.style.marginBottom = "0";
        return;
      }
      break;
    default:
      break;
  }

  qrCodeImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${linkPrefix}${inputValue}`;
  qrCodeImg.style.marginBottom = "40px";
});

Avec ce générateur de code QR, vous pouvez facilement créer des codes QR pour divers types de données. Le code JavaScript s'assure que l'entrée de l'utilisateur est correctement validée et formatée avant de générer le code QR. Ce projet est un excellent exemple de l'intégration des langages web pour créer des outils interactifs et utiles.

Demo Télécharger le fichier source
Suivez-moi
Description de votre image
Conception de site vitrine personnalisé

Concevez un site web moderne qui attire et engage vos visiteurs dès la première vue.

Obtenez votre devis personnalisé
Articles récemment lus

Coding is easy