Create a gist now

Instantly share code, notes, and snippets.

@lsauer /stars.html
Last active Jul 8, 2017

What would you like to do?
Fast JavaScript 0-5 Stars Ratings HTML Generator
<style>
.stars-sup {
font-size: 75%;
position: relative;
top: -6px;
left: 6px;
}
</style>
<ul class="used-technologies">
<li>Design UX<span class="stars-sup" data-stars="4"></span></li>
<li>Design Software<span class="stars-sup" data-stars="3"></span></li>
<li> Database Architecture<span class="stars-sup" data-stars="4"></span></li>
<li> .NET<span class="stars-sup" data-stars="4"></span></li>
<li> C# latest<span class="stars-sup" data-stars="4"></span></li>
<li> ASP.NET<span class="stars-sup" data-stars="3"></span></li>
<li> PHP<span class="stars-sup" data-stars="3"></span></li>
<li> Python<span class="stars-sup" data-stars="3"></span></li>
<li> Django<span class="stars-sup" data-stars="3"></span></li>
<li> JavaScript<span class="stars-sup" data-stars="4"></span></li>
<li> jQuery<span class="stars-sup" data-stars="5"></span></li>
<li> jQuery UI<span class="stars-sup" data-stars="3"></span></li>
<li> Dojo<span class="stars-sup" data-stars="2"></span></li>
<li> HTML5 Canvas<span class="stars-sup" data-stars="2"></span></li>
</ul>
$(document).ready(function () {
//fast and simple stars ratings creation function
var stars = [
'&#9734&#9734&#9734&#9734&#9734', //0
'&#9733&#9734&#9734&#9734&#9734', //1
'&#9733&#9733&#9734&#9734&#9734', //2
'&#9733&#9733&#9733&#9734&#9734', //3
'&#9733&#9733&#9733&#9733&#9734', //4
'&#9733&#9733&#9733&#9733&#9733' //5
];
$('[data-stars]').each(function (i, el) {
var numStars = $(el).data('stars');
$(el).html('(' + stars[numStars] + ')');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment