Star Rating - Template

#TheDOMChallenge

by suhyunified

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div id="star"></div>
<div id="display-star"></div>

<!-- Do not add extra HTML -->


<!-- 
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
 -->

CSS

.fa-star-o:before {
    content: "\f006";
    color: #5f6368;
}

.fa-star:before {
    content: "\f005";
    color: #d56e0c;
}

/* Do not add extra CSS */

JavaScript

function Star(el, count, callback) {
  // Write a logic to create star rating problem
  let container
  let _rate = 0

  const init = () => {
    container = document.querySelector(el)
    container.addEventListener('mouseout', ()=>{
      render(_rate)
    })

    render(0)
  }

  const createStarIcon = (value, filled) => {
    const icon = document.createElement('i') 
    icon.className = `fa ${filled ? 'fa-star':'fa-star-o'}`

    icon.addEventListener('mouseup', () => {
      _rate = value
      getStar(_rate)
      render(_rate)
    })

    icon.addEventListener('mouseenter', ()=> {
      render(value)
    })

    return icon
  }

  const render = (value) => {
    const fragment = document.createDocumentFragment()

    for (let i = 1 ; i <= count ; i ++) {
      fragment.appendChild(createStarIcon(i, i <= value))
    }

    container.innerHTML = ''
    container.appendChild(fragment)
  }

  init()
}

function getStar(value){
  document.getElementById("display-star").innerHTML = value;
}

new Star("#star", 5, getStar);