const d = document.body.appendChild(

  document.createElement`div`)

d.innerHTML = `

<input 

  id="input"

  type="range" 

  min="-2" max="5" 

  value="0">

`

let val = 0;

console.log('drag slider...')

const range = (input.max - input.min);

input.oninput = () => {

  val = (input.value - input.min) / range

  console.log(input.value + ' - normalized = ' + val)

}

const NUM = 9

const col = 3

const size = 30

const pad = 10

const box = (x, y) => Object.assign(

  document.body.appendChild(

    document.createElement('div')

  ).style, {

    position: 'absolute',

    width: size + 'px', 

    height: size + 'px',

    top: y + 'px', 

    left: x + 'px',

    background: 'red'

})

const off = (size + pad)

for (let i = 0; i < NUM; i++) {

  const x = (i % col) * off

  const y = parseInt(i / col, 10) * off

  box(x, y)

}

const lookupReplacements = {

  // entities (like ∑ or Θ - are safer

  // than just putting things inline like ∑ or ®

  'a': ['A', 'Ä', '∆', 'á'],

  'e': ['é', '∃'],

  't': ['⊤', 'Τ'] ,

  'b': ['β'],

  'o': ['∅', '_o_']

}

function mangle(s) {

  return s.split``.map(letter => {

    const chars = lookupReplacements[letter]

    return chars ? chars[

      Math.floor(

        chars.length * Math.random()

      )

    ] : letter

  }).join``

}

document.body.innerHTML = mangle('Been taking a break from making snippets... might start up again...<hr>')

document.body.innerHTML += mangle('Been taking a break from making snippets... might start up again...<hr>')

document.body.innerHTML += mangle('Been taking a break from making snippets... might start up again...<hr>')

function callMethods(evt) {

  const e = new evt

  e.one()

  e.two()

}

callMethods(class {

  one() {

    console.log('one')

  }

  two() {

    console.log('two')

  }

})

// Select the node that will be observed for mutations

const targetNode = document.getElementById('some-id');

// Options for the observer (which mutations to observe)

const config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed

const callback = function(mutationsList, observer) {

    // Use traditional 'for loops' for IE 11 (goodbye IE11!!!!)

    for(const mutation of mutationsList) {

        if (mutation.type === 'childList') {

            console.log('A child node has been added or removed.');

        }

        else if (mutation.type === 'attributes') {

            console.log('The ' + mutation.attributeName + ' attribute was modified.');

        }

    }

};

// Create an observer instance linked to the callback function

const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations

observer.observe(targetNode, config);

// Later, you can stop observing

observer.disconnect();