Rating

by Bouteille Dimitri

HTML

<div class="align">
  <div class="align-bis">
      <div class="rating">
        <span class="rating-icon"></span>
        <span class="rating-icon"></span>
        <span class="rating-icon"></span>
        <span class="rating-icon"></span>
        <span class="rating-icon"></span>
      </div>
  </div>
  <div class="align-bis">
      <div class="rating heart">
        <span class="rating-icon"></span>
        <span class="rating-icon"></span>
        <span class="rating-icon"></span>
        <span class="rating-icon"></span>
        <span class="rating-icon"></span>
      </div>
  </div>
</div>
<div class="align grey">
  <div class="align-bis">
      <div class="rating light">
        <span class="rating-icon"></span>
        <span class="rating-icon"></span>
        <span class="rating-icon"></span>
        <span class="rating-icon"></span>
        <span class="rating-icon"></span>
      </div>
  </div>
  <div class="align-bis">
      <div class="rating heart light">
        <span class="rating-icon"></span>
        <span class="rating-icon"></span>
        <span class="rating-icon"></span>
        <span class="rating-icon"></span>
        <span class="rating-icon"></span>
      </div>
  </div>
 </div>
<div class="align"> 
  <div class="align-bis">
    <div class="rating">
      <span class="rating-icon active"></span>
      <span class="rating-icon active"></span>
      <span class="rating-icon active"></span>
      <span class="rating-icon"></span>
      <span class="rating-icon"></span>
    </div>
  </div>
  <div class="align-bis">
    <div class="rating heart light">
      <span class="rating-icon active"></span>
      <span class="rating-icon active"></span>
      <span class="rating-icon active"></span>
      <span class="rating-icon"></span>
      <span class="rating-icon"></span>
    </div>
  </div>
</div>
<div class="align grey"> 
  <div class="align-bis">
    <div class="rating to-light">
      <span class="rating-icon active"></span>
      <span...

SCSS

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

$primary : #03A9F4;
$grey : rgb(242,242,242);
$white : #fff;
$black: #333;

$borderColor : $black;
$borderWidth : 1px;
$borderTransition : 0.25s;
$borderBtnHeight: 42px;

//
// Default style
* {
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: $black;
  font-size: 15px;
}

.align{
  display: flex;
  background-color: rgb(250,250,250);
  &-bis{
    flex: 1;
    display:flex;
    justify-content: center;
    padding: 40px 0;
  }
  &.grey{
    background-color: rgb(245,245,245);
  }
}


$this : '.rating';

#{$this} {

  display:flex;
  &-icon{
    display: inline-block;
    margin-left: 6px;
    font-size: 16px;
    color: rgb(150,150,150);
    transition: all 0.1s ease-out;
    &:after{
      font-family: 'Material Icons';
      content: "\E838";
    }
    &:hover{
      cursor: pointer;
    }
    &.active, &.selected{
      color: $primary;
    }
  }
  &.to-light{
    #{$this}-icon{
      
    &.active, &.selected{
      &:after{
        content: "\E83A";
      }
      }
    }
  }
  &.to-scale{
    #{$this}-icon:hover{
      transform: scale(1.3);
    }
  }
  &.light{
    #{$this}-icon{
      &:after{
        content: "\E83A";
      }
    }
    &.to-dark{
        #{$this}-icon{
          
        &.active, &.selected{
         &:after{
           content: "\E87D"
         }   
         }
      
      }
    }
  }
  &.heart{
    #{$this}-icon{
      &:after{
        content: "\E87D"
      }   
    }  
    &.light{
      #{$this}-icon{
        &:after{
          content: "\E87E"
        }
      }
    }
  }
}

JavaScript

calcNote = function(elHover){
		    
    var $parent = $(elHover).closest('.rating'),
    		allChild = $parent.find('.rating-icon'),
        allNote = {};
       	allChild.each(function(key) {                    
          if(($(this)[0].offsetLeft <= $(elHover)[0].offsetLeft)){
             Array.prototype.push.call(allNote,$(this));
             $(this).addClass('active');
          } else {
          	$(this).removeClass('active');
          }
        });
        
        
        //elHover.addClass('active');
}


$('.rating .rating-icon').on({
	click: function() {
  	var $this = $(this),
    		$parent = $this.closest('.rating'),
        allChild = $parent.find('.rating-icon'),
        allNote = {};
                
        allChild.each(function(key) {                    
          if($(this)[0].offsetLeft <= $this[0].offsetLeft){
             Array.prototype.push.call(allNote,$(this));
             $(this).addClass('selected');
          } else {
          	$(this).removeClass('selected');
          }
        });
  },
  mouseenter: function() {calcNote(this); },
  mouseleave: function() {
    var $parent = $(this).closest('.rating'),
        allChild = $parent.find('.rating-icon').removeClass('active');   
  }
});