<h1>Percentage based star rating</h1>
<p>With Font Awesome</p>
<div class="star-rating" title="70%">
    <div class="back-stars">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        
        <div class="front-stars" style="width: 70%">
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
        </div>
    </div>
</div>    

<input type="number" value="70" max="100" min="0"><span class="percent">%</span>

/*---------- general ----------*/
body {
    background: #ff7070;
    color: #F3FCF0;
    font-family: sans-serif;
    text-align: center;
}
h1 {
    font-family: 'Raleway', sans-serif;
    text-shadow: 2px 2px 0 #843a3a;
    text-transform: uppercase;
    
}
p {
    font-size: 1.3em;
}

/*---------- star rating ----------*/
%flex-display {
    display: flex;
}
.star-rating {
    @extend %flex-display;
    align-items: center;
    font-size: 3em;
    justify-content: center;
    margin-top: 50px;
}
.back-stars {
    @extend %flex-display;
    color: #bb5252;
    position: relative;
    text-shadow: 4px 4px 10px #843a3a;
}
.front-stars {
    @extend %flex-display;
    color: #FFBC0B;
    overflow: hidden;
    position: absolute;
    text-shadow: 2px 2px 5px #d29b09;
    top: 0;
    transition: all .5s
}

input {
    background: transparent;
    border: solid 2px #bb5252;
    color: #fff;
    font-size: 1.5em;
    height: 50px;
    width: 60px;
    text-align: center;
    margin-top: 50px;
    margin-right: 10px;
    
    &:focus {
        outline: none;
    }    
}

.percent {
    color: #bb5252;
    font-size: 1.5em;
}

// I was working on a personal recipes website and wanted to add a simple percentage based star rating using Font Awesome icons. It needed to work in a way that I could add the rating percentage for each recipe to the html and make it reflect in the stars. 

// I searched the web and could only find star ratings that the user would be clicking in the stars to give their own rating, or the rating didn't use font awesome.

const numberInput = document.querySelector('input');
const starRatingWrapper = document.querySelector('.star-rating');
const frontStars =  document.querySelector('.front-stars');

const rate = e => {
    const percentage = e.target.value + '%';
    
    starRatingWrapper.title = percentage;
    frontStars.style.width = percentage;
};

numberInput.addEventListener('click', rate);
numberInput.addEventListener('keyup', rate);