To-Do List Example

example

app.js

import { ManyElements } from './components/ManyElements.js'

ManyElements([0, 10, 100, 1000, 10000]).paint('#many-elements')

components/ManyElements.js

import { component, state, template } from 'paintor'

const elements = state([])

function buildData(count, array) {
  array.length = count

  for (let i = count; i > 0; i--) {
    array[count - i] = i
  }
}

const header = (elementsCounts) => template((x) => {
  x.div(
    {
      onClick: (event) => {
        if (!(event.target instanceof HTMLInputElement)) {
          return
        }

        buildData(Number(event.target.value), elements)
      }
    },

    x.h3('How many elements to draw?'),

    x.forEach(elementsCounts, (count) => {
      const idName = `elements-${count}`

      x.div(
        x.input({
          type: 'radio',
          name: 'elements',
          id: idName,
          value: count,
          checked: (count === 0)
        }),
        x.label({ for: idName }, count)
      )

    })
  )
})

const elementsContainer = template((x) => {
  x.div({ id: 'elements-container' },
    x.forEach(
      elements,
      (value) => {
        x.span({
          textContent: value,
          style: { width: '46px', height: '46px' },
        })
      },
      () => {
        x.div('No elements')
      }
    )
  )
})

const ManyElements = (elementsCounts) => component(
  header(elementsCounts),
  elementsContainer
)

export { ManyElements }

CSS

#many-elements {
  & label {
    margin-right: 0.5rem;
  }

  & input, label {
    cursor: pointer;
    user-select: none;
  }

  #elements-container {
    margin: 1.0rem;

    & span {
      margin: 0.1rem;
      padding: 0.3rem;
      border: 0.1rem solid deepskyblue;
      background: aliceblue;
      color: #444;
    }
  }
}

HTML

<div id="many-elements"></div>