cssJs.jade

extends base

block vars
  - var title = 'CSS Variables and JS'

block styles
  link(rel="stylesheet" type="text/css" href="styles/cssJS.css")

  //- CSS Variables
  style.
    :root {
      --base: #FFC600;
      --spacing: 10px;
      --blur: 10px;
    }

    img {
      padding: var(--spacing);
      background: var(--base);
      filter: blur(var(--blur));
    }

    .hl { color: var(--base); }

    a {
      color: var(--base);
      text-decoration: none;
    }

    input { width: 100px; }

block body
  h2 Update stuffs
    span.hl ¯\_(ツ)_/¯

  .controls
    label(for="spacing") Spacing:
    input(type="range" name="spacing" min="10" max="200" value="10", data-sizing="px")

    label(for="blur") Blur:
    input(type="range" name="blur" min="0" max="25" value="10", data-sizing="px")

    label(for="base") Base Color:
    input(type="color" name="base" value="#FFC600")

  img(src="images/35e28e9ffc2424f8b93954c964dbc23b.jpg")


  script(type="text/javascript").
    const $inputs = document.querySelectorAll('.controls input')

    function updateHandler() {
      const suffix = this.dataset.sizing || ''
      document.documentElement.style.setProperty(`--${this.name}`, `${this.value + suffix}`)
    }

    function addMultipleListeners(elem, e, handler) {
      if (!(e instanceof Array))
        throw 'addMultipleListeners: please supply an array of eventstrings (like ["click","mouseover"])'

      for (let i = 0; i < e.length; i++)
        elem.addEventListener(e[i], handler)
    }

    $inputs.forEach(input => addMultipleListeners(input, ['change', 'mousemove'], updateHandler))