QR Code Generator

Posted on 28 Aug 2021

HTML & JS Template

HTML/HTML5

The HTML template of my resume for my website.

View Demo View Repo
Project Screenshot

Click on image to enlarge

Tech Stack

Frontend

HTML, CSS, JSON, jQuery, Font Awesome 5

Highlights

CSS Grid, Flex

About

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.