Rating Stars with Mithril

by ramnathv

CSS

.star{
  color: #ccc;
  cursor: pointer;
}
.star.highlight{
  color: darkgreen;
}
.star.clicked{
  color: darkgreen;
}

CoffeeScript

Stars =  
  cl: m.prop([0..9].map -> 'star')
  view: (c, props) ->
    STAR = "&#9733"
    setClass = (x) -> (e) ->
      [0..9].map (i) ->
        if i <= e.target.getAttribute("num")
          Stars.cl()[i] = "star #{x}"
        else
          Stars.cl()[i] = Stars.cl()[i]
            .replace(x, '')
        console.log Stars.cl()

    m "div.star", {
          onclick: setClass('clicked')
          onmouseover: setClass('highlight')
        },
      [0..9].map (i) -> 
          m 'span', {
              key: i, 
              num: i,
              class: Stars.cl()[i]
            }, 
            m.trust(STAR)
    
m.mount(document.body, Stars)