Web components + superfine

currency-converter.html

<title>Currency Coverter</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module">

import { h, patch } from 'https://unpkg.com/superfine?module'

const Numberbox = self => ({
  type: 'number',
  value: self.dataCount,
  oninput: e => self.dataCount = e.target.value
})

const Increment = self => ({
  onclick: e => self.dataCount += 1
})

const Decrement = self => ({
  onclick: e => self.dataCount -= 1
})

const Template = self => h('div', {},
  h('style', {}, `
    input, button {
      font-size: 2rem;
      touch-action: manipulation;
    }
  `),
  h('input' , Numberbox(self)),
  h('button', Decrement(self), '-'),
  h('button', Increment(self), '+'),
)

export class CustomElement extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({mode:'open'})
    this.render = (node => () => {
      node = patch(node, Template(this), this.shadowRoot)
    })()
    this.render()
  }
  
  get dataCount() {
    return Number(this.dataset.count) || 0
  }
  
  set dataCount(newVal) {
    this.dataset.count = Number(newVal)
  }
  
  attributeChangedCallback(attrName, oldVal, newVal) {
    this.render()
  }
  
  static get observedAttributes() {
    return ['data-count']
  }
}

//==========================================================

customElements.define('x-counter', CustomElement)

const view = count => h('x-counter', {id:'rate','data-count':count})

const createRender = (view, container, node) => state => {
  node = patch(node, view(state), container)
}

const render = createRender(view, document.body)

render(109)

//==========================================================

const rate = document.getElementById('rate')

const dollars = document.createElement('x-counter')
document.body.append(dollars)

const yen = document.createElement('h1')
document.body.append(yen)

const observer = new MutationObserver(() => 
  yen.textContent = '¥ ' + (rate.dataCount * dollars.dataCount)
)

const config = {
  attributes: true,
  attributeFilter: ['data-count']
}

observer.observe(rate, config)
observer.observe(dollars, config)

dollars.dataCount = 1

</script>