ricardobeat · March 17, 2025 16:35
diff --git a/calc.html b/calc.html
 <!doctype html>
 <body>
  <input :bind="interval" />
  <input :bind="users" />
  <p><span :text="interval"></span>s</p>
  <p><span :text="((1/interval) * 60 * 60 * 24 * 30 * users / 1_000_000)|0"></span>M requests / month</p>
  <script>
    const $ = (s) => document.querySelector(s)
    const $$ = (s) => Array.prototype.slice.call(document.querySelectorAll(s), 0)

    let store = {}

    const subs = []
    const update = (v) => subs.forEach(f => f(store = { ...store, ...v }))
    const subscribe = (fn) => subs.push(fn)
    
    $$('[\\:text]').forEach(el => {
      subscribe((s) => {
        const k = el.getAttribute(':text')
        el.innerText = new Function("with (store) { return " + k + "}")()
      })
    })

    $$('[\\:bind]').forEach(el => {
      const k = el.getAttribute(':bind')
      el.addEventListener('input', e => update({ [k]: e.currentTarget.value }))
    })
  </script>
 </body>
	<!doctype html>
	<body>
	<input :bind="interval" />
	<input :bind="users" />
	<p><span :text="interval"></span>s</p>
	<p><span :text="((1/interval) * 60 * 60 * 24 * 30 * users / 1_000_000)\|0"></span>M requests / month</p>
	<script>
	const $ = (s) => document.querySelector(s)
	const $$ = (s) => Array.prototype.slice.call(document.querySelectorAll(s), 0)

	let store = {}

	const subs = []
	const update = (v) => subs.forEach(f => f(store = { ...store, ...v }))
	const subscribe = (fn) => subs.push(fn)

	$$('[\\:text]').forEach(el => {
	subscribe((s) => {
	const k = el.getAttribute(':text')
	el.innerText = new Function("with (store) { return " + k + "}")()
	})
	})

	$$('[\\:bind]').forEach(el => {
	const k = el.getAttribute(':bind')
	el.addEventListener('input', e => update({ [k]: e.currentTarget.value }))
	})
	</script>
	</body>