A Color Chooser in 64 lines of JS with MVU
Tags: newbie, mvu, html
Published: 2023-05-07 15:12:39

Choose your favorite library and challenge this one :-)

This is an upgraded version of [MVU](https://www.jsdelivr.com/package/gh/artydev/mvu?tab=files) (v2.0.3)

See how easy it is to handle SVG elements...thanks to [htl](https://observablehq.com/@observablehq/htl)

You can test it here [ColorChooser](https://flems.io/#0=N4IgtglgJlA2CmIBcBWA7AOgMwBYA0IAzvAgMYAu8UyIGAFuWLCAQGYQKHIDaoAdgEMwiJLQZMWIUgHs+lOTQA8hUgCcIAB3IACQqtIBeADogG5DYSQB6K6Sh8MAK0JQSEAG6qMfeOSsBzOisBVXIAT1d3KzB3AFcAAQAmDAAGbCsoCEI-GNiMWLAoDEgHZxMAPkUrFXUtcqM+BsVM921oYxABDQ0Khu1tJoyPcsliMnIIWS5RRKQARhwQAF88fiERWmdJGTl4BVEd7O1gbXFYPG0oaTAL2Kub7VU911ULwnd-bSXtA21cjAAsgA1ACqAG4GocdOQQv5fD9LtJSAU9uQMHDyABRBDCOQAITCAEkoAAKExdHogACUDQQOmyAkoCOAfX6bT4EHISG05FUsXgeFZ-SeUG5iRQKEFfDZ2n8Tz23LmiQAHFKZQAjWD8xXihpLBqsWJ8CiTaUAYQg+gQJIZlCpxyF2ihul5Mlg0lUCJtMLtP3K2gABqp-OqSQASYC2+AYEUrCNR9HyvhxyM+6Oa-lLKkBiHStl07R8aSuL2OmXvfwB5QfbQAd2g5DoHTmKRSGgAHiZTvAIIFyM3Wx2u+xYLADPHXdJ3apvYz4FSlvU8zKZfGPlXSJbSAgne2DCgUk6wvvD6oT5VbFuEOUA-rl2yqhWb46afenuRYqppUXXHqDUaTVkbQAGVYGgeAZzdD03jTe0WXvAtCDAl4EXuEkqVzGUCwgPgNFiHRfjOAMy20ZphgGe8V1IloXTCBAOkyQgNFgAQwiQVgEHbMEBDA-w+AAWk5eAwEsUhUQg3pKKoh8aNo+iTHrKBG1QNsuModtyH4njez4JB1D7MEwFhHD+P0hh5lUiEQCXaTbLZCMoK8Ug6BCABBcgSRSKkMHIaQQW6CCzQEYh0LvOyVyqFobPCmThhImLSJwvDoTCDR4A6VQBD4OEuxKDoUlygQ9xMcUUC7dweP5cdUznbhHIAXUXeLpMiuKpLsidaoasK7Na9xoplPrn3vO5rnQzC2SS-CMFkKaCO0Q1jQmICSXnB12u0AsKq1eAEWjGFg18DBtv5ZqozqqcPXqhETvgCaqNiDQoDnWc7UdHrhV8T9pSQ8DVD-PhFsA6UABVOR3dD1v6AsJnIHdCMYWAqzoOZylckCIDAZjdrNS7VEIbQzToaRpGIVQqhR4bPo-L8eXB+AAaB5bpVc7pXrW+CsPhClULGjDHSIkiIzBuH4FCkiyNabdgsIAwAHJHP45ySbJuWBoiqKIwtK0xajBchua-pJadFjCFlkxFd+l5JISyX1fCu2I1Av6yRAEUTBgud9aGfrDY14YneQiDXbleA9g9l0vaWA2Nqox3gGdl5XYzBmWEju1o59+2Wqzv2Y7jrOAwomVRrAcbHXfb7tApRmAOZ7RHueyh2bgivnmDg6MQuVmNBb1870bl69fulcGjHvhRhIeBgemEAUiQFJ+IANjQBfllWEBBGEGgMFIM3tlkeRyBodVizCKHtHVARSAAazlaQjSgbRuU1a+b4mjQBBgHD-AXiajODDhP+rJHJIFrHQISuZvjjwAMQ805pcLIzFWLsU4hNRwsRsgQFYGEJWh9UTciYtfeAWlVAPz4FAMEFE7wNF3njJWxNSYQQvupTS2k+JIDErsT0H8v6ZGyoqFAHYJqn1UC8RUHZdBTmgHWCBlAoHjzodOfiVtmEIMYsgtiHF4BcVZAA-wQDDwCHwtIXh38BHaDmEI3ReYMFYJwXg3YchCGfzEqQ8hlDx79E-uY-wplezmQPEOZMk9ximlnlYpAiQl7LEakAA)

```js
const { html, dom, udom, render, svg } = mvu.MVU;
const target = document.getElementById("app")
let state = {
    init: true,
    red: 255,
    green: 128,
    blue: 125
}
function Circle(state) {
    const strcolor = (state) => `rgb(${state.red},${state.green},${state.blue})`;
    let node = (
        svg`<svg width="100px" height="100px" fill=${strcolor(state)}>
          ${svg`<circle cx=50 cy=50 r=50></circle>`}
      </svg>`
    )
    return node
}
function Slider(color, state) {
    let slider = dom();
    let input = html`
      <div> 
          <div style="display:flex;align-items:center">
              <div  style="width:50px;text-align:right;margin-right:10px;">
                  ${color.charAt(0).toUpperCase()}
              </div>
              <div>
                  <input type="range" min="0" max="255" value=${state[color]}>
              </div>
               ${state[color]}
          </div>
      </div>`
    udom();
    input.oninput = function (e) {
        let value = e.target.value
        state[color] = value;
        update(state)
    }
    return slider
}
function Title () {
  let title = html`<h1>A Simple Colors Chooser</h1>`
  return title
}
function App(state) {
    let app = dom();
    html`
      ${Title()}
      <div class='color-chooser'>
        <div>${Circle(state)}</div>
          <div class="color-slider">
            <div>
              <div>${Slider("red", state)}</div>
              <div>${Slider("green", state)}</div>
              <div>${Slider("blue", state)}</div>
            </div>
          </div>
      </div>` 
    udom();
    return app
}
function update(state) {
    render(target, App(state))
}
update(state);
```