LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
        
CSS
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before, .rating button:after {
  display: inline-block;
  font-family: "entypo";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  margin-right: 0.1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: #FFA500;
}

.rating {
  margin-top: 3.5em;
  text-align: center;
}
.rating li {
  display: inline-block;
  overflow: hidden;
  position: relative;
}
.rating button {
  background-color: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 12vw;
  height: 1.1em;
  line-height: 2.6;
  overflow: hidden;
  padding: 0;
  position: relative;
  text-align: center;
  text-decoration: none;
}
.rating button:before, .rating button:after {
  display: block;
  height: 100%;
  width: 100%;
}
.rating button:after {
  content: "\2605";
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.1s;
}
.rating button:hover, .rating button:focus {
  outline: none;
}
.rating button:hover:after, .rating button:focus:after {
  opacity: 1;
}

.rating[data-user-score="1"] li:nth-child(-n+1) button:after {
  opacity: 1;
}

.rating[data-user-score="2"] li:nth-child(-n+2) button:after {
  opacity: 1;
}

.rating[data-user-score="3"] li:nth-child(-n+3) button:after {
  opacity: 1;
}

.rating[data-user-score="4"] li:nth-child(-n+4) button:after {
  opacity: 1;
}

.rating[data-user-score="5"] li:nth-child(-n+5) button:after {
  opacity: 1;
}
JS
var el = $('body');
el.on('submit', '.rating form', submitHandler);

function submitHandler(e) {
  e.preventDefault();
    
  // In the live code this is where I made an
  // ajax request to POST to the form URL.
  // For the demo I'm going to  fake it. What happens
  // next is similar would happen after a succesful
  // rating POST request.
  
  // This type of hacking at the form value is just for the demo
  // in the live example the score is returned in the POST response
  var score = $(e.target).serialize().split('=')[1];
  setRating(score);
}

function setRating (score) {
  if (score) {
    localStorage.setItem('score', score);
  }
  else {
    score = localStorage.getItem('score');
  }
  
  $('.rating').attr('data-user-score', score);
}

//Call setRating when the page loads in case the user has given a rating
// it will be stored in localStorage
setRating();
Host Instantly Drag and Drop Website Builder

 

Description

I built a version of this for a site. Pretty sure I've made these in the past, but this version felt really resolve. Using the fonticons for the active/inactive states and the mixin for displaying the users' rating feel like a clean solution.
Term
Mon, 11/27/2017 - 21:50

Related Codes

Pen ID
Pen ID
Pen ID