const bindInput = document.querySelector('#bind-input')
const btn = document.querySelector('button')
const dataTextEl = document.querySelector('span') 

const obj = { _data: bindInput.value }

Object.defineProperty(obj, 'data', {
  get() {
   
    return this._data
  },
  set(newValue) {
    if(!newValue) return false

    this._data = newValue
    updateViews(bindInput, dataTextEl, this._data)
    return this._data
  }
})

updateView(dataTextEl, obj.data)

function updateInputView(el, value) {
  el.value = value
}

function updateView(el, value) {
  el.innerHTML = value
}

function updateViews(input, data, value) {
  updateInputView(input, value)
  updateView(data, value)
}

btn.addEventListener('click', () => {
  obj.data = (obj.data - 0) + 1
})

bindInput.addEventListener('change', (e) => {
  obj.data = e.target.value
})