Currently, I am in the process of developing a rating system. The system involves three hearts that change color when clicked, in an incremental manner (for example, if the second heart is clicked, both the first and second hearts will be colored; if the third heart is clicked, all three hearts will be colored). To view a visual representation of my code, please visit this link.
This is what I have implemented so far :
HTML
<section id="like" class="rating">
<!-- THIRD HEART -->
<input type="radio" id="heart_3" name="like" value="3" />
<label for="heart_3" class="heart-slider">♥</label>
<!-- SECOND HEART -->
<input type="radio" id="heart_2" name="like" value="2" />
<label for="heart_2" class="heart-slider">♥</label>
<!-- FIRST HEART -->
<input type="radio" id="heart_1" name="like" value="1" />
<label for="heart_1" class="heart-slider">♥</label>
</section>
CSS
.rating {
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 140px;
height: 50px;
padding: 5px 10px;
margin: auto;
border-radius: 30px;
background: #FFF;
display: block;
overflow: hidden;
unicode-bidi: bidi-override;
direction: rtl;
}
.rating:not(:checked) > input {
display: none;
}
/* - - - - - LIKE */
#like {
bottom: -65px;
}
#like:not(:checked) > label {
cursor:pointer;
float: right;
width: 30px;
height: 30px;
display: block;
margin-right: 7.5px;
color: rgba(233, 54, 40, .4);
line-height: 42px;
text-align: center;
transition: color 0.2s;
}
#like:not(:checked) > label:hover,
#like:not(:checked) > label:hover ~ label {
color: rgba(233, 54, 40, .6);
}
#like > input:checked + label:hover,
#like > input:checked + label:hover ~ label,
#like > input:checked ~ label:hover,
#like > input:checked ~ label:hover ~ label,
#like > label:hover ~ input:checked ~ label {
color: rgb(233, 54, 40);
}
#like > input:checked ~ label {
color: rgb(233, 54, 40);
}
JS
document.onkeydown = function (e) {
if(e.keyCode == 38) {
heart_1.click();
}
};
The next goals are:
1) to ensure the first heart is already colored upon page load
2) implement keyboard controls using UP and DOWN arrows :
- first UP arrow should color the first and second hearts
- second UP arrow should color all three hearts
then,
- first DOWN arrow should uncolor the third heart
- second DOWN arrow should uncolor the third and second hearts
I am seeking assistance with implementing this functionality as I'm not very proficient in Javascript.
Thank you!