active-interview-question-js

by Andres Cisneros

HTML

<div id='rating'>
  <span>*</span>
  <span>*</span>
  <span>*</span>
  <span>*</span>
  <span>*</span>
</div>

CSS

#rating .active{color:red;}

#rating {color:grey;}

JavaScript

function setup() {
  // Write your code here.
  var ratingEle = document.getElementById("rating");
  var spans = ratingEle.children;

  for (let span of spans) {
    span.onclick = function () {
      var flag = false;
      for (let elem of spans) {
        if (!flag)
          elem.classList.add('active');
        else
          elem.classList.remove('active');
        if(elem == this)
          flag = true;             
      }
    }
  }
}

setup();