{"id":974,"date":"2017-05-16T13:54:55","date_gmt":"2017-05-16T21:54:55","guid":{"rendered":"http:\/\/www.tech.dimprash.com\/?p=974"},"modified":"2017-05-16T13:57:08","modified_gmt":"2017-05-16T21:57:08","slug":"a-simple-todo-app-in-javascript","status":"publish","type":"post","link":"http:\/\/www.tech.dimprash.com\/?p=974","title":{"rendered":"A simple todo app in javascript"},"content":{"rendered":"<p>Asked in Box onsite interview.  With a node.js server on backend. <\/p>\n<pre>\r\n$().ready(function() {\r\n   $('#add').on('click', addTask);\r\n   $('#tasks').on('click', markComplete);\r\n   \/\/ Alternative way\r\n   \/\/ var tasksElement = document.getElementById('tasks');\r\n   \/\/ tasksElement.addEventListener('click', markComplete);\r\n   \/\/document.getElementById('task-input').onkeydown = function(e){\r\n   $('#task-input').on('keydown', function(e) {\r\n       if(e && e.keyCode == 13){\r\n            addTask();\r\n       }\r\n   });\r\n\r\n   function renderTask(result) {\r\n        var checkboxContainerId = 'check' + result.id;\r\n        var taskTextId = 'tasktext-' + result.id;\r\n        if (result.done == '1') {\r\n            checkedState = ' checked ';\r\n        } else {\r\n            checkedState = '';\r\n        }\r\n        taskHtml = '<li class=task ' + ' task-id=' + result.id + '>';\r\n        taskHtml += '<input class=task-checkbox type=checkbox task-id='  + result.id + checkedState + '  >';\r\n        taskHtml += '<span class=task-label id= ' + taskTextId + '>' + result.data + '<\/li>';\r\n        $('#tasks').append(taskHtml);\r\n   }\r\n\r\n   function taskAdded(result) {\r\n        renderTask(result);\r\n        $('#task-input').val('');\r\n   }\r\n\r\n   function renderResults(results) {\r\n        results.forEach(renderTask);\r\n   }\r\n\r\n   function addTask(e) {\r\n       url = 'http:\/\/localhost:9898\/todo\/tasks\/create';\r\n       inputData = $('#task-input').val();\r\n\r\n       if (!inputData) {\r\n           return;\r\n       }\r\n       $.ajax({\r\n           url: url,\r\n           type: \"POST\",\r\n           data: {data: inputData} ,\r\n           success: taskAdded,\r\n       });\r\n    }\r\n\r\n    function markComplete(e) {\r\n        var done;\r\n        if (e.target && e.target.matches(\"input.task-checkbox\")) {\r\n            var taskId = $(e.target).attr('task-id');\r\n            if ($(e.target).is(\":checked\")) {\r\n                done = \"1\";\r\n            } else {\r\n                done = \"-1\";\r\n            }\r\n            var editUrl = 'http:\/\/localhost:9898\/todo\/tasks\/' + taskId + '\/edit';\r\n            $.ajax({\r\n               url: editUrl,\r\n               type: \"POST\",\r\n               data: {done: done},\r\n               success: function(result) {\r\n               }\r\n            });\r\n        }\r\n    }\r\n\r\n    var getTasksUrl = 'http:\/\/localhost:9898\/todo\/tasks';\r\n    $.ajax({\r\n       url: getTasksUrl,\r\n       type: \"GET\",\r\n       success: renderResults,\r\n    });\r\n}\r\n);\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Asked in Box onsite interview. With a node.js server on backend. $().ready(function() { $(&#8216;#add&#8217;).on(&#8216;click&#8217;, addTask); $(&#8216;#tasks&#8217;).on(&#8216;click&#8217;, markComplete); \/\/ Alternative way \/\/ var tasksElement = document.getElementById(&#8216;tasks&#8217;); \/\/ tasksElement.addEventListener(&#8216;click&#8217;, markComplete); \/\/document.getElementById(&#8216;task-input&#8217;).onkeydown = function(e){ $(&#8216;#task-input&#8217;).on(&#8216;keydown&#8217;, function(e) { if(e &#038;&#038; e.keyCode == 13){ addTask(); } }); function renderTask(result) { var checkboxContainerId = &#8216;check&#8217; + result.id; var taskTextId = &#8216;tasktext-&#8216; &hellip; <a href=\"http:\/\/www.tech.dimprash.com\/?p=974\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">A simple todo app in javascript<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-974","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"http:\/\/www.tech.dimprash.com\/index.php?rest_route=\/wp\/v2\/posts\/974","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.tech.dimprash.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.tech.dimprash.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.tech.dimprash.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.tech.dimprash.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=974"}],"version-history":[{"count":3,"href":"http:\/\/www.tech.dimprash.com\/index.php?rest_route=\/wp\/v2\/posts\/974\/revisions"}],"predecessor-version":[{"id":977,"href":"http:\/\/www.tech.dimprash.com\/index.php?rest_route=\/wp\/v2\/posts\/974\/revisions\/977"}],"wp:attachment":[{"href":"http:\/\/www.tech.dimprash.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=974"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tech.dimprash.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=974"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tech.dimprash.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}