// We can change many properties of a single
// DOM element withing an update cycle.
//
// It is basically endless the amount of
// cool effects that we can create with just
// a few pieces of HTML / CSS / Javascript.
//
// Have fun and experiment!
const onChange = evt => {
  const p1 = document.getElementById('p1')
  const curr = evt.target.value
  
  p1.innerHTML = curr
  p1.style.width = `${curr}px`
  p1.style.height = `${curr}px`
}

// Try different input events:
// - input
// - change
//
// How does the behavior differ?
document
  .getElementById('inp1')
  .addEventListener('input', onChange)