Alex Somma's QR Code Maker

alex-somma-s-qr-code-maker.markdown

Alex Somma's QR Code Maker

A Pen by OpenCo on CodePen.

License.

index.html

<details>
  <summary>

    Hey there! Have you seen those square patterns with black and white blocks? Those are QR codes, short for 'quick-response codes'. 🤓 Invented in 1994 in Japan, they were first used to track car parts. 🚗
  </summary>

  <p>
    Unlike regular barcodes, QR codes have a unique look with black squares on a white background. They are super cool because you can use your smartphone's camera 📱 to read them. When you scan a QR code, it reveals hidden information—kind of like magic! ✨
  </p>
</details>

<p>
  👉 Try and generate a QR code. It can contain any link or text!
</p>
<input id="text" type="text" value="QR Text" style="
         --w:60%;
         --minw: 256px;
         --m: auto;" /><br />
<div id="qrcode" style="
    --m: auto;
    --w: 256px;
        "></div>


<details style="--mt:1em">
  <summary>
    Ready for more? QR codes are not just for show; they're really smart! They can keep their information safe, so even if they're a bit damaged, your phone can still understand them. 🧐
  </summary>
  <p>

    These codes are versatile. They can store different types of information: numbers, letters, or even links to websites. They're more powerful than ordinary barcodes because they can hold so much more info. 📈
  </p>
  <p>
    So, next time you come across a QR code, try scanning it with your phone. You might discover something really interesting or find a cool new website! 🌐
  </p>
</details>

script.js

// Initialize the QR code
var qrcode = new QRCode("qrcode");
var debounceTimer;

// Function to generate QR code based on input value
function makeCode() {
  var elText = document.getElementById("text");
  if (!elText.value) {
    elText.focus();
    return;
  }
  qrcode.makeCode(elText.value);
}

// Debounce function
function debounce(func, delay) {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(func, delay);
}

// Event listener for 'blur' event on the text element
document.getElementById("text").addEventListener("blur", makeCode);

// Modified event listener for 'keydown' event with debounce
document.getElementById("text").addEventListener("keydown", function () {
  debounce(makeCode, 200); // 200 milliseconds delay
});

//// Set the value of the text element to the current URL on page load
// Set the value to https://ffpf.org/donate
window.addEventListener("load", function() {
  document.getElementById("text").value = 'https://ffpf.org/donate';
  makeCode(); // Generate QR code immediately after setting the value
});

scripts

<script src="//cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>

style.less

body {
  color: hsl(0, 0%, 20%);
  padding: 2rem;
  max-width: 60rem;
  margin: auto;
  font-size: 1.4rem;
  display:flex;
  flex-direction:column;
}

summary{
  max-height: 10ch;
}

styles

<link href="https://startr.style/style.css" rel="stylesheet" />
<link href="https://raw.githack.com/opencoca/system7.css/main/style.css" rel="stylesheet" />