Dav/Devs Footer Logo Dav/Devs

QR Code Generator

JS Web App



HTML, CSS, JavaScript, CSS Grid, Flexbox, QRCode.js


GitHub Pages


QR Code library, Form Validation, Vanilla JavaScript


This video by Traversy Media on creating a QR Code Generator inspired me to create my own version. Note: I did not follow the tutorial.

QR Codes are useful for mobile phone users to access links simply and quickly.

How to use:

  1. Fill up the URL field with the link to your website.
  2. (Optional) Select the size of the QR Code you want. Measurement is in pixels.
  3. (Optional) Select the colours you want for the QR Code. Foreground Color is the color of the code and Background Color is the color surrounding the QR Code.
  4. Click on submit and wait for your QR Code to generate.
  5. (Laptop/Desktop) Right click on the QR code and click on Save as image…
  6. (Android/iOS) Follow your platform’s specific instructions on how to download images from a website.

This project is build in HTML, CSS and plain JavaScript. I used CSS Grid to for the body and form layout and Flexbox for the header. The QRCode.js library is used to render the QR Code.