qr-code-generator

QR Code Generator

Solution | Challenge

Deploy status

Overview

This challenge provides an excellent opportunity to practice your JavaScript skills by creating a simple QR code generator application that requires the use of an external library.

User Stories

• Create a QR code generator app that matches the given design.
• Use HTML to create the basic structure.
• Add inputs, buttons,.. according to the design.
• Use vanilla JavaScript to add interactivity.
• Users can enter a URL.
• User can see a QR quote after selecting the QR code button.
• User can download QR quote image by selecting download button.
• User can copy Quote to the clipboard by selecting Share button.
• The page should be responsive on different screen sizes.
• Deploy the solution and submit Repository URL and Demo URL.

Built With

• Vite
• vite-plugin-html
• BEM
• html2canvas
• qrcodejs
• fontsource fonts:
  • Outfit
• tabler icons
  • qrcode
• Boxy SVG to create Share and Download icons before using them from QR code generator repo
• svgomg for optimization of svg assets and inline svg

Extra Features

• Redirect to home page if url is not provided
• Error handling for Clipboard API
• Alert when QR quote copied to clipboard

What I learned

• Create a QR code generator app with HTML, CSS, and JavaScript.
• Download an image from canvas

How To Use

To clone and run this application, you'll need Git, Node.js and pnpm installed on your computer. From your command line:

# Clone this repository
git clone https://github.com/Hdoc1509/dev-challenges

# install all required dependencies
cd dev-challenges
pnpm install --filter "@hdoc/dev-challenges" --filter qr-code-generator...

# Run qr-code-generator in dev-mode
cd vanilla/qr-code-generator/
pnpm run dev --open