added heart icon for applauding roars

README.md

@@ -28,5 +28,6 @@ Make sure when running JavaScript inside of a .html file, it gets put inside a b
 - [x] user page that shows all their roars.
 - [x] page that shows any user's roars
 - [ ] add description to a user's account
+- [x] add heart icon to applaud roars
 - [x] all your liked roars
 - [ ] password page that stores your key/value username/passcode pairs.

static/style.css

@@ -4,6 +4,11 @@ html, body {
   width: 100%
 }
 
+#applaud {
+  text-decoration: none;
+  color: rgba(255, 0, 0, 0.66);
+}
+
 .show-account-nav li {
   display: inline;
 }

templates/partials/post_list.html

@@ -15,9 +15,11 @@
         <!-- If it's not the current user, add an applaud button. -->
         {% if g.user and g.user['id'] != post['author_id'] %}
             {% if post['id'] in applauds %}
-              <span>(<a id="applaud" post_id="{{post['id']}}" class="action" href="#">UNapplaud</a>)</span>
+              <!-- UNapplaud -->
+              <span>(<a id="applaud" description="unapplaud" post_id="{{post['id']}}" class="action" href="#">♥</a>)</span>
             {% else %}
-              <span>(<a id="applaud" post_id="{{post['id']}}" class="action" href="#">applaud</a>)</span>
+              <!-- applaud -->
+              <span>(<a id="applaud" description="applaud" post_id="{{post['id']}}" class="action" href="#">♡</a>)</span>
             {% endif %}
         {% elif not g.user %}
           <span id="span-applaud">(<a id="applaud-login" href="{{ url_for('auth.login') }}">applaud</a>)</span>
@@ -34,6 +36,7 @@
   $(function() {
     $('a#applaud').bind('click', function() {
       let postID = parseInt($(this).attr('post_id')); // get post id of the clicked pos
+      let description = $(this).attr('description');
       let element = $(this);
 
       $.getJSON($SCRIPT_ROOT + `/applaud`, { // $SCRIPT_ROOT is set in the base.html file.
@@ -42,7 +45,17 @@
         if (typeof data == "string") { // this means it returned HTML for the login page.
           window.location.replace("/auth/login");
         } else {
-          element.text("dunzo");
+          let newText = ""
+
+          if (description == "applaud") {
+            newText = "♥"
+            element.attr('description', 'unapplaud')
+          } else {
+            newText = "♡"
+            element.attr('description', 'applaud')
+          }
+
+          element.text(newText);
         }
       });
       return false;

templates/roar/show_account/base.html

@@ -2,7 +2,7 @@
 
 {% block header %}
   <h1>~{{ username }}</h1>
-  <p>description</p>
+  <!-- <p>description</p> -->
   <ul class="show-account-nav">
     <li><a href="{{ url_for('roar.show_account', username=username) }}">show posts</a></li>
     <li><a href="{{ url_for('roar.show_account_applauds', username=username)}}">applauds given</a></li>