إنشاء QR Code Generator بإستعمال HTML و CSS و Javascript

فهاد المقال غانتعرفو على طريقة إنشاء Qrcode generator بإستعمال css و javascript و html. النتيجة غاتكون عبارة عن تطبيق كايحول أي نص text إلى qrcode.

ل qrcode عندو عدة إستعمالات لأنه كايسهل مشاركة المعلومة .

النتيجة النهائية غاتكون على هاد الشكل 👇 :

ألان غانشوفو ل code المستعمل:

HTML

ل html بسيط , عندنا فقط 4 عناصر:

div : غاتكون هي ل container .
input : اللي غانكتبو فيها النص اللي بغينا نحولوه.
div : اللي غاتحمل ل qrcode.
script : اللي كاتحمل link الخاص ب library اللي غاتساعدنا باش نحولو النص إلى qrcode. درتها داخل ل head tag .

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <title>QR code generator</title>
  </head>
  <body>
    <div class="container">
        <input type="text" placeholder="..."></input>
        <div id="qrcode"></div>
    </div>

  </body>
</html>

CSS

بالنسبة ل css. غانجعلو ل input و div ديال ل qrcode وسط الصفحة, و غانعطيو لل input مظهر واضح.

.container{
  display:grid;
  grid-gap:2rem;
  justify-content:center;
  padding: 3rem;
}


input{
  width:100%;
  padding: 1rem;
  font-size:20px;
  font-weight:bold;
  border: 2px solid gray;
  outline: none;
}

#qrcode > *{
  width: 110%;
}

Javascript

في javascript غانراقبو التغير ديال ل value الخاصة بال input, و فكل مرة كاتغير غانستعملو trim اللي غاتحيد الفراغ white space من الجناب بجوج ديال string , و غانعطيوها ل library باش تحولها ل qrcode.

const qrcode = document.getElementById("qrcode");
const textInput = document.querySelector("input");

const qr = new QRCode(qrcode);
qr.makeCode(textInput.value.trim());

textInput.oninput = (e) => {
    qr.makeCode(e.target.value.trim());
};

بإمكانكم تحطو ل code كامل اللي كتبنا في ملف html بدون إنشاء ملفات لكل من css و javascript. على هاد الشكل:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <title>QR code generator</title>
    
    <style>
        .container{
            display:grid;
            grid-gap:2rem;
            justify-content:center;
            padding: 3rem;
        }

        input{
            width:100%;
            padding: 1rem;
            font-size:20px;
            font-weight:bold;
            border: 2px solid gray;
            outline: none;
        }

        #qrcode > *{
            width: 110%;
        }
    </style>
  </head>
  <body>
    <div class="container">
        <input type="text" placeholder="..."></input>
        <div id="qrcode"></div>
    </div>
  
    <script>
        const qrcode = document.getElementById("qrcode");
        const textInput = document.querySelector("input");

        const qr = new QRCode(qrcode);
        qr.makeCode(textInput.value.trim());

        textInput.oninput = (e) => {
            qr.makeCode(e.target.value.trim());
        };
    </script>
  
  </body>
</html>

النهاية

حاول تكتب ل code بيدك و تجرب أشياء جديدة, حيت هادي هي الطريقة باش غاتعلم و ترسخ المعلومة و إلى عندك شي تساؤل كتبو في صفحة إتصل بنا أو فالصفحة ديال الفيسبوك. وصلنا لنهاية المقال, كانتمنا تكونو ستافدتو شي حاجة جديدة و إلى اللقاء في مقال أخر.