{"id":1926,"date":"2018-02-22T19:41:00","date_gmt":"2018-02-22T19:41:00","guid":{"rendered":"http:\/\/websterart.com\/wordpress\/?p=1926"},"modified":"2018-02-22T19:43:28","modified_gmt":"2018-02-22T19:43:28","slug":"html5-shopping-list-app","status":"publish","type":"post","link":"https:\/\/websterart.com\/wordpress\/2018\/02\/html5-shopping-list-app\/","title":{"rendered":"HTML5 To Do shopping list app"},"content":{"rendered":"<p>I&#8217;ve been using both Evernote and Wunderlist for years. I&#8217;ve built a ToDo list before in jQuery that came close to Wunderlist. It had draggable list items, and delete item checkboxes. But when studying JavaScript, jQuery is considered cheating.<\/p>\n<p>So I was pleased to see this one show up in my latest online lesson. I prettied it up with some style sheets. I&#8217;m waiting until later in my studies to figure out how to connect it to a database, hopefully with something like Node.js. For now though, it just works in the browser session memory. It&#8217;s cool to make useful things that actually work. This one embedded in WordPress has some extra padding related to WordPress styles, but the direct link outside of WordPress works as intended.<\/p>\n    <style>\r\n\r\n    .theList {\r\n      width: 300px;\r\n    }\r\n    .shoppingH3 {\r\n      font-size: 1.2em;\r\n      color: rgb(25, 154, 146);\r\n      margin:0;\r\n      padding: 0;\r\n    }\r\n    ul.shopping {\r\n      list-style: none;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n    ul.shopping li {\r\n        margin: 1em 0 0 0;\r\n        padding: 0;\r\n        background-color: rgb(246, 232, 161);\r\n        border: 1px solid rgb(153, 129, 67);\r\n        display: flex;\r\n        justify-content: space-between;\r\n\r\n      }\r\n    .theList button {\r\n        color: white;\r\n        padding: 0.8em;\r\n        margin: 0;\r\n      }\r\n    .shopping li button {\r\n\r\n        background-color: rgb(218, 92, 29);\r\n\r\n\r\n\r\n\r\n      }\r\n      button.enterIt {\r\n        background-color: rgb(29, 128, 218);\r\n        margin-bottom: 1.5em;\r\n        \/* font-size: 2em; *\/\r\n\r\n      }\r\n\r\n    .theList  button:hover {\r\n        background-color: black;\r\n        color: white;\r\n      }\r\n    .theList  input {\r\n        width: 300px;\r\n        background-color: rgb(220, 241, 186);\r\n        font-size: 1.2em;\r\n      }\r\n\r\n    <\/style>\r\n    <h3 class=\"shoppingH3\">Shopping list<\/h3>\r\n\r\n    <div class=\"theList\">\r\n      <label for=\"item\">Enter item:<\/label><br>\r\n      <input type=\"text\" name=\"item\" id=\"itemShopping\">\r\n      <button class=\"enterIt\">Add item<\/button>\r\n\r\n\r\n    <ul class=\"shopping\">\r\n\r\n    <\/ul>\r\n  <\/div>\r\n    <script>\r\n      var ul = document.querySelector('.shopping');\r\n      var input = document.querySelector('#itemShopping');\r\n      var button = document.querySelector('.enterIt');\r\n      var newItem;\r\n      var allListItems;\r\n      var listNumber = 0;\r\n      var whichFood;\r\n      button.addEventListener('click', addItem);\r\n      function addItem(){\r\n        newItem = input.value;\r\n        input.value = '';\/\/we've got it, now hollow it out\r\n        \/\/ console.log(newItem);\r\n        listNumber++;\r\n        var newLi = document.createElement('li');\/\/virtual <li><\/li>\r\n\r\n        newLi.setAttribute('class', 'food' + listNumber);\/\/<li class=\"food1\">\r\n\r\n        whichFood = newLi.getAttribute('class');\/\/string: food1\r\n\r\n        var newSpan = document.createElement('span');\/\/returns virtual <span><\/span>\r\n        var newButton = document.createElement('button');\/\/returns virtual <button><\/button>\r\n        var buttonLabel = document.createTextNode('Delete');\/\/virtual word: Delete\r\n        newButton.appendChild(buttonLabel);\/\/<button>Delete<\/button>\r\n\r\n\r\n        var nameItem = document.createTextNode(newItem);\/\/ virtual: what they entered in input\r\n\r\n        newLi.appendChild(newSpan);\/\/<li class=\"food1\"><button>Delete<\/button><span><\/span><\/li>\r\n        newSpan.appendChild(nameItem);\/\/<li class=\"food1\"><button>Delete<\/button><span>Eggs and Milk<\/span><\/li>\r\n        newLi.appendChild(newButton);\/\/<li class=\"food1\"><button>Delete<\/button><\/li>\r\n\r\n        ul.appendChild(newLi);\/\/<ul><li class=\"food1\"><button>Delete<\/button><span>Eggs and Milk<\/span><\/li><\/ul>\r\n        document.querySelector('.' + whichFood + ' button').addEventListener('click', function(){\r\n\r\n          \/* goes up the DOM node tree from the button to button parent: li, to li parent: ul, then\r\n          say removeChild a child (of ul). As far as which child, the parent of the button, which\r\n          is the current li containing the child button.\r\n          *\/\r\n          this.parentNode.parentNode.removeChild(this.parentNode);\r\n        });\r\n        input.focus();\r\n        allListItems = document.querySelectorAll('li');\r\n        console.log(allListItems.length);\r\n      }\/\/end addItem function allListItems[i].parentNode.removeChild(allListItems[i]);\r\n    <\/script>\r\n\r\n\n<p>You can also access it <a href=\"http:\/\/websterart.com\/html\/study-js\/shopping-list\/shopping-list3.html\" target=\"_blank\" rel=\"noopener\">here as a direct link outside of WordPress<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve been using both Evernote and Wunderlist for years. I&#8217;ve built a ToDo list before in jQuery that came close to Wunderlist. It had draggable list items, and delete item checkboxes. But when studying JavaScript, jQuery is considered cheating. So I was pleased to see this one show up in my latest online lesson. I [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,179],"tags":[],"class_list":["post-1926","post","type-post","status-publish","format-standard","hentry","category-blog","category-programming"],"_links":{"self":[{"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/posts\/1926","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/comments?post=1926"}],"version-history":[{"count":4,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/posts\/1926\/revisions"}],"predecessor-version":[{"id":1930,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/posts\/1926\/revisions\/1930"}],"wp:attachment":[{"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/media?parent=1926"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/categories?post=1926"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/tags?post=1926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}