Create QR Code

create-qr-code.markdown

Create QR Code

Create QR Code

A Pen by Simon Breiter on CodePen.

License.

index.pug

div
  h1 Create QR Code
  input(type="text" placeholder="Type something")
  canvas#qr

script.babel

const input = document.querySelector("input")
const canvas = document.getElementById("qr")

const createQR = (v) => {
  // https://github.com/neocotic/qrious
  return new QRious({
    element: canvas,
    value: v,
    size: 400,
    backgroundAlpha: 0,
    foreground: "white",
  })
}

const qr = createQR(input.value)

input.addEventListener("input", () => {
  const qr = createQR(input.value)
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>

style.stylus

html,
body
  height 100%
  
body
  display flex
  align-items center
  justify-content center
  font-family "Open Sans", sans-serif
  background-color black 
  color white

div
  display flex
  flex-direction column
  align-items center
  
input
  font-size 1rem
  font-family "Open Sans", sans-serif
  text-align center
  margin-bottom 4rem
  border none
  border-bottom 2px solid white
  padding .5rem
  background-color transparent
  color white
  outline none
  
input::placeholder 
  color white
  
// Retina Resolution  
canvas
  width 200px
  height 200px