Activate Article Hart Btn

Thabet-Do · Apr 16, 2019 · 3794a8b · 3794a8b
1 parent 8373cfb
commit 3794a8b
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 67 deletions.
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/public/js/article_show.js b/public/js/article_show.js
@@ -0,0 +1,9 @@
+$(document).ready(function () {
+    $('.js-like-article').click(function (e) {
+        e.preventDefault();
+        var $link = $(e.currentTarget);
+        var $count = $('.js-like-counter').text();
+        $link.toggleClass('fa-heart-o').toggleClass('fa-heart');
+        $('.js-like-counter').html(parseInt($count) + 1);
+    })
+});
diff --git a/templates/article/show.html.twig b/templates/article/show.html.twig
@@ -3,7 +3,6 @@
 {% block title %}Read {{ title }} {% endblock title %}
 
 {% block body %}
-
     <div class="container">
         <div class="row">
             <div class="col-sm-12">
@@ -16,7 +15,10 @@
                                 <br>
                                 <span class="align-left article-details"><img class="article-author-img rounded-circle" src="{{ asset('images/alien-profile.png') }}"> Mike Ferengi </span>
                                 <span class="pl-2 article-details"> 3 hours ago</span>
-                                <span class="pl-2 article-details"> 5 <a href="#" class="fa fa-heart-o like-article"></a> </span>
+                                <span class="pl-2 article-details">
+                                <span class="js-like-counter">5</span>
+                                    <a href="#" class="fa fa-heart-o like-article js-like-article"></a>
+                                </span>
                             </div>
                         </div>
                     </div>
@@ -96,7 +98,10 @@
             </div>
         </div>
     </div>
-
-
     {#{{ dump() }}#}
 {% endblock body %}
+
+{% block javascripts %}
+    {{ parent() }}
+    <script src="{{ asset('js/article_show.js') }}"></script>
+{% endblock %}
diff --git a/tutorial/templates/article.html.twig b/tutorial/templates/article.html.twig
@@ -10,7 +10,10 @@
                             <br>
                             <span class="align-left article-details"><img class="article-author-img rounded-circle" src="{{ asset('images/alien-profile.png') }}"> Mike Ferengi </span>
                             <span class="pl-2 article-details"> 3 hours ago</span>
-                            <span class="pl-2 article-details"> 5 <a href="#" class="fa fa-heart-o like-article"></a> </span>
+                            <span class="pl-2 article-details">
+                                <span class="js-like-counter">5</span>
+                                <a href="#" class="fa fa-heart-o like-article js-like-article"></a>
+                            </span>
                         </div>
                     </div>
                 </div>