feat: list item count (#169)

hoodiehq · Feb 19, 2018 · 5552562 · 5552562
1 parent ea81c2c
commit 5552562
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 0 deletions.
diff --git a/public/assets/app.css b/public/assets/app.css
@@ -149,6 +149,9 @@ form.add-item label {
 form.add-item button {
   width: 100%;
 }
+.hide-item-count {
+  display: none;
+}
 
 @media (min-width: 768px) {
   form.add-item {

diff --git a/public/assets/js/index.js b/public/assets/js/index.js
@@ -1,6 +1,7 @@
 var $addItemForm = document.querySelector('form.add-item')
 var $itemsList = document.querySelector('.items .list')
 var $clearButton = document.querySelector('[data-action="clear"]')
+var $itemCount = document.querySelector('.item-count')
 
 /**
  * With hoodie we're storing our data locally and it will stick around next time you reload.
@@ -94,6 +95,7 @@ $itemsList.addEventListener('click', function (event) {
 })
 
 function render (items) {
+    $itemCount.classList.toggle('hide-item-count', items.length === 0);
   if (items.length === 0) {
     document.body.setAttribute('data-store-state', 'empty')
     return
@@ -110,6 +112,7 @@ function render (items) {
              '<td><a href="#" data-action="remove">Delete</a></td>' +
              '</tr>'
     }).join('')
+    $itemCount.innerHTML = "List Count: " + items.length;
 }
 
 function orderByCreatedAt (item1, item2) {

diff --git a/public/index.html b/public/index.html
@@ -51,6 +51,7 @@ <h1><a href="/">Tracker</a></h1>
         <button class="primary" data-action="clear" data-hide-if="store-empty">
           Clear tracked items
         </button>
+         <p class="item-count"></p>
       </div>
     </main>