Rate function in javascript

fedireads/static/format.css

@@ -321,6 +321,7 @@ button .icon {
 }
 .rate-stars .icon {
     cursor: pointer;
+    color: goldenrod;
 }
 .rate-stars form {
     display: inline;
@@ -331,7 +332,12 @@ button .icon {
     border: none;
     padding: 0;
     margin: 0;
-    color: goldenrod;
+}
+.rate-stars:hover .icon:before {
+    content: '\e9d9';
+}
+.rate-stars form:hover ~ form .icon:before{
+    content: '\e9d7';
 }
 
 .review-form .rate-stars:hover .icon:before {
@@ -340,10 +346,6 @@ button .icon {
 .review-form .rate-stars label {
     display: inline;
 }
-.review-form .rate-stars form:hover ~ form .icon:before{
-    content: '\e9d7';
-}
-
 .review-form .rate-stars input + .icon:before {
     content: '\e9d9';
 }

fedireads/static/js/shared.js

@@ -37,6 +37,17 @@ function reply(e) {
     return true;
 }
 
+function rate(e) {
+    e.preventDefault();
+    ajaxPost(e.target);
+    rating = e.target.value;
+    var stars = e.target.parentElement.getElementsByClassName('icon');
+    for (var i = 0; i < stars.length ; i++) {
+        stars[i].className = rating < i ? 'icon icon-star-full' : 'icon icon-star-empty';
+    }
+    return true;
+}
+
 function tabChange(e) {
     e.preventDefault();
     var target = e.target.parentElement;

fedireads/templates/snippets/rate_action.html

@@ -2,7 +2,7 @@
 <span class="hidden-text">Leave a rating</span>
 <div class="stars rate-stars">
     {% for i in '12345'|make_list %}
-    <form name="rate" action="/rate/" method="POST" onsubmit="interact(event)">
+    <form name="rate" action="/rate/" method="POST" onsubmit="return rate(event)">
         {% csrf_token %}
         <input type="hidden" name="book" value="{{ book.fedireads_key }}"></input>
         <input type="hidden" name="rating" value="{{ forloop.counter }}"></input>