http://tech.colla.me/show/a_todo_app_premitive_implementation

sunderls · Nov 12, 2016 · b8347df · b8347df
1 parent 62a8f16
commit b8347df
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 0 deletions.
diff --git a/app.html b/app.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title></title>
+</head>
+<body>
+<div>
+    <h1>ToDO: <span class="jsCount">0</span></h1>
+    <ul class="jsList">
+        <li class="jsListEmpty">no item</li>
+        <script type="js/tmpl" id="js-tmpl-item">
+            <li>{this}<button class="jsDelete">x</button></li>
+        </script>
+    </ul>
+    <p><input type="text" class="jsInput"><button class="jsAdd">add</button></p>
+</div>
+<script src="./plain_2.js"></script>
+</body>
+</html>
diff --git a/app.js b/app.js
@@ -0,0 +1,57 @@
+(function(){
+    // rendering engine
+    var Render = function(selector, data){
+        var tmpl =  document.querySelector(selector).innerHTML.trim();
+        var matches = tmpl.match(/<(\w+)>(.*)<\/(\w+)>/);
+        var newItem = document.createElement(matches[1]);
+        newItem.innerHTML = matches[2].replace('{this}', data);
+        return newItem;
+    };
+
+
+    // app
+    var $count = document.querySelector('.jsCount');
+    var $list = document.querySelector('.jsList');
+    var $listEmpty = document.querySelector('.jsListEmpty');
+    var $input = document.querySelector('.jsInput');
+    var $add = document.querySelector('.jsAdd');
+
+    var data = [];
+
+    var addItem = function(item){
+        data.push(item);
+        var newItem = Render('#js-tmpl-item', item);
+        newItem.querySelector('.jsDelete').addEventListener('click', function(){
+            removeItem(item);
+            $list.removeChild(newItem);
+        }, false);
+        $list.appendChild(newItem);
+    };
+
+    var removeItem = function(item){
+        data.splice(data.indexOf(item), 1);
+        updateCount();
+    };
+
+    var updateCount = function(){
+        $count.innerHTML = data.length;
+
+        if (data.length > 0){
+            $listEmpty.style.display = 'none';
+        } else {
+            $listEmpty.style.display = 'block';
+        }
+    };
+
+    var addHandler = function(){
+        var input = $input.value.trim();
+        if (input.length === 0){
+            return;
+        }
+        addItem(input);
+        $input.value = '';
+        updateCount();
+    };
+
+    $add.addEventListener('click', addHandler, false);
+})();