{"id":5939,"date":"2024-01-11T16:40:00","date_gmt":"2024-01-11T16:40:00","guid":{"rendered":"https:\/\/codehim.com\/?p=5939"},"modified":"2024-01-22T14:43:39","modified_gmt":"2024-01-22T09:43:39","slug":"simple-grocery-list-app-in-javascript","status":"publish","type":"post","link":"https:\/\/codehim.com\/vanilla-javascript\/simple-grocery-list-app-in-javascript\/","title":{"rendered":"Simple Grocery List App in JavaScript"},"content":{"rendered":"

This code snippet helps you to create a simple grocery list app in JavaScript. It comes with a user-friendly interface to allow users to enter grocery items with quantity to the shopping list<\/a>. Similarly, users can remove the added items from the list or mark the items that have been purchased.<\/p>\n

You can easily integrate this grocery app into your shopping website project<\/a>\/template to allow users to make their shopping lists. On the other hand, it can also be used as a separate grocery list web app that may help users to make digital shopping items lists.<\/p>\n

Basically, this grocery app project depends on jQuery<\/a> and Backbone JS<\/a> to add, remove and mark items in an efficient way. So, it can be highly customized with additional functions and features according to your needs.<\/p>\n

How to Create Simple Grocery List App in JavaScript<\/h2>\n

1. First of all, create the HTML structure for the grocery app as follows. You can place the following HTML code anywhere in the webpage where you want to create the grocery app.<\/p>\n

  <header>\r\n    Simple grocery list\r\n  <\/header>\r\n\r\n  <main>\r\n    <form>\r\n      <label for=\"item-input\">Item<\/label>\r\n      <input type=\"text\" id=\"item-input\">\r\n      <label for=\"quantity-input\">Quantity<\/label>\r\n      <input type=\"number\" id=\"quantity-input\">\r\n      <button type=\"submit\" id=\"submit-btn\">Add<\/button>\r\n    <\/form>\r\n\r\n    <div id=\"lists\">\r\n      <p class=\"list__label\">Still need to grab <span class=\"quantity\" id=\"shopping-num\"><\/span><\/p>\r\n      <ul id=\"shopping-list\">\r\n      <\/ul>\r\n      <p class=\"list__label\">In cart <span class=\"quantity\" id=\"bought-num\"><\/span><\/p>\r\n      <ul id=\"bought-list\">\r\n      <\/ul>\r\n    <\/div>\r\n\r\n  <\/main>\r\n  <div class=\"push\"><\/div>\r\n<\/div>\r\n<\/pre>\n
2. After that, style the grocery app with the following CSS styles. You can also use your own CSS or change styles in order to customize the app interface.<\/p>\n
header,\r\nfooter {\r\n  color: white;\r\n  background-color: #004A55;\r\n  width: 100%;\r\n  text-align: center;\r\n  padding: 0.5em;\r\n  position: relative;\r\n}\r\nfooter,\r\n.push {\r\n  height: 2em;\r\n}\r\n.wrapper {\r\n  margin: 0 auto -2em;\r\n  min-height: 100%;\r\n}\r\nform {\r\n  width: inherit;\r\n}\r\nlabel {\r\n  display: block;\r\n  line-height: 1.5em;\r\n}\r\ninput {\r\n  width: inherit;\r\n  padding: 1em;\r\n}\r\n.delete, button {\r\n  color: white;\r\n  background-color: #F87D09;\r\n}\r\nbutton {\r\n  border: 0;\r\n  padding: 1em;\r\n  width: inherit;\r\n  margin: 0.75em 0;\r\n}\r\n.icon {\r\n  display: inline-block;\r\n  width: 0.9em;\r\n  height: 0.9em;\r\n  margin-right: 0.25em;\r\n  fill: #004A55;\r\n}\r\n#bought-list li:before, #shopping-list li:before {\r\n  content: \"\";\r\n  display: inline-block;\r\n  background-size: 100%;\r\n  height: 0.9em;\r\n  width: 1em;\r\n  margin-right: 0.3em;\r\n}\r\n#shopping-list li:before {\r\n  background-image: url(\"https:\/\/res.cloudinary.com\/ddy54k4ks\/image\/upload\/v1454106412\/svg\/checkmark2.svg\");\r\n}\r\n#bought-list li:before {\r\n  background-image: url(\"https:\/\/res.cloudinary.com\/ddy54k4ks\/image\/upload\/v1454106412\/svg\/checkmark.svg\");\r\n}\r\nul {\r\n  list-style: none;\r\n  margin: 0 auto;\r\n  padding: 0;\r\n}\r\nli {\r\n  color: #004A55;\r\n  padding: 0.75em;\r\n  cursor: pointer;\r\n  margin: 0.5em 0;\r\n  border: 1px solid #004A55;\r\n  position: relative;\r\n  transition: background-color 0.2s;\r\n}\r\nli:hover {\r\n  background-color: #A7CDCC;\r\n}\r\n.quantity {\r\n  color: #F87D09;\r\n}\r\n.quantity:before {\r\n  content: \"(\";\r\n}\r\n.quantity:after {\r\n  content: \")\";\r\n}\r\n.delete {\r\n  float: right;\r\n  padding: inherit;\r\n  position: absolute;\r\n  right: 0;\r\n  top: 0;\r\n}\r\n.delete:after {\r\n  clear: both;\r\n}\r\n#bought-list li {\r\n  background-color: #F6F6F6;\r\n}\r\n#bought-list li .quantity {\r\n  color: #666666;\r\n}\r\n.list__label {\r\n  border-bottom: 2px solid #F87D09;\r\n  font-size: 0.75em;\r\n  color: #004A55;\r\n  padding: 0;\r\n}\r\n<\/pre>\n
3. After creating HTML and CSS styles for the grocery app, load the following dependencies just before closing of the body tag.<\/p>\n
<!-- jQuery -->\r\n<script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.0.0-alpha1\/jquery.min.js'><\/script>\r\n<!-- Lodash JS -->\r\n<script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/lodash.js\/3.10.1\/lodash.min.js'><\/script>\r\n<!-- Backbone JS -->\r\n<script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/backbone.js\/1.2.3\/backbone-min.js'><\/script>\r\n<\/pre>\n
4. Finally, functionalize and initialize the app with the following JavaScript function and done. You can place the following code between <script> tag just after the dependencies files. Or create a separate JS file and include it into your project.<\/p>\n
const classNames = {\r\n  DELETE: \"delete\" };\r\n\r\nconst logger = {\r\n  logging: false,\r\n  log(msg) {\r\n    if (this.logging) console.log(msg);\r\n  } };\r\n\r\nconst itemProto = {\r\n  bought: false,\r\n  toggle() {\r\n    this.bought = !this.bought;\r\n    this.trigger(\"toggled\", this);\r\n  } };\r\n\r\nconst items = {\r\n  list: [],\r\n\r\n  add(item) {\r\n    let newItem = Object.create(itemProto);\r\n    Object.assign(newItem, item, Backbone.Events);\r\n    newItem.on(\"toggled\", function (item) {\r\n      logger.log(\"toggled\");\r\n      view.addToList(item);\r\n    });\r\n    newItem.id = _.uniqueId();\r\n    this.list.push(newItem);\r\n    this.trigger(\"itemAdded\", newItem);\r\n    this.trigger(\"updated\");\r\n  },\r\n\r\n  delete(id) {\r\n    logger.log(\"delete: \" + id);\r\n    let item = _.find(items.list, {\r\n      \"id\": id });\r\n\r\n    view.remove(item.$el);\r\n\r\n    this.list = _.pull(this.list, item);\r\n    this.trigger(\"updated\");\r\n  },\r\n\r\n  toggle(id) {\r\n    _.find(items.list, {\r\n      \"id\": id }).\r\n    toggle();\r\n\r\n    this.trigger(\"updated\");\r\n  } };\r\n\r\nconst app = {\r\n  init() {\r\n    view.init();\r\n    Object.assign(items, Backbone.Events);\r\n    items.on(\"itemAdded\", function (item) {\r\n      logger.log(\"item added\");\r\n      view.addToList(item);\r\n    });\r\n\r\n    items.on(\"updated\", function () {\r\n      logger.log(\"updated\");\r\n      view.updateQuantities();\r\n    });\r\n  } };\r\n\r\nconst view = {\r\n  init() {\r\n\r\n    this.$shoppingList = $(\"#shopping-list\");\r\n    this.$boughtList = $(\"#bought-list\");\r\n    this.$form = $(\"form\");\r\n\r\n    const handleSubmit = function (e) {\r\n      e.preventDefault();\r\n\r\n      let name = $(\"#item-input\"),\r\n      quantity = $(\"#quantity-input\");\r\n\r\n      if (name.val()) {\r\n        items.add({\r\n          name: name.val(),\r\n          quantity: quantity.val() || 1 });\r\n\r\n      }\r\n      name.val(\"\");\r\n      quantity.val(\"\");\r\n\r\n    };\r\n\r\n    const handleClick = function (e) {\r\n      e.preventDefault();\r\n      logger.log(\"Clicked\");\r\n\r\n      if (e.target.nodeName === \"LI\") {\r\n        let id = $(e.target).data(\"id\").toString();\r\n        items.toggle(id);\r\n      } else if (e.target.className === classNames.DELETE) {\r\n        let id = $(e.target).parent().data(\"id\").toString();\r\n        items.delete(id);\r\n      }\r\n    };\r\n\r\n    const handleDelete = function (e) {\r\n      e.preventDefault();\r\n      logger.log(\"Delete: \" + item);\r\n      let id = $(e.target).data(\"id\").toString(),\r\n      item = _.find(items.list, {\r\n        \"id\": id });\r\n\r\n    };\r\n\r\n    $(\"#lists\").on(\"click\", handleClick);\r\n    this.$form.on(\"submit\", handleSubmit);\r\n    $(\".\" + classNames.DELETE).on(\"click\", handleDelete);\r\n\r\n  },\r\n\r\n  addToList(item, list) {\r\n    let $item = item.$el || this.createListItem(item);\r\n\r\n    if (item.bought) {\r\n      $item.prependTo(this.$boughtList);\r\n    } else {\r\n      $item.appendTo(this.$shoppingList);\r\n    }\r\n  },\r\n\r\n  updateQuantities() {\r\n    logger.log(\"updateQuantities\");\r\n    $(\"#shopping-num\").html(this.$shoppingList.children().length);\r\n    $(\"#bought-num\").html(this.$boughtList.children().length);\r\n  },\r\n\r\n  remove($el) {\r\n    $el.remove();\r\n  },\r\n\r\n  createListItem(item) {\r\n    item.$el = $(`<li data-id=${item.id}>${item.name} <span class=\"quantity\">${item.quantity}<\/span><span class=\"delete\">X<\/span><\/li>`);\r\n\r\n    return item.$el;\r\n  },\r\n\r\n  getListItem(id) {\r\n    let $el = $(\"li[data-id='\" + id + \"']\");\r\n    return $el.length ? $el : null;\r\n  },\r\n\r\n  render(items) {\r\n    logger.log(\"render\");\r\n\r\n    this.$shoppingList.empty();\r\n    this.$boughtList.empty();\r\n\r\n    items.forEach(item => {\r\n      let $item = $(`<li data-id=${item.id}>${item.name}<span>${item.quantity}<\/span><\/li>`);\r\n\r\n      if (item.bought) {\r\n        this.$boughtList.append($item);\r\n        $item.addClass(\"bought\");\r\n      } else {\r\n        this.$shoppingList.append($item);\r\n      }\r\n    });\r\n\r\n  } };\r\n\r\napp.init();\r\n\r\nitems.add({\r\n  name: \"Wine\",\r\n  quantity: 1 });\r\n\r\nitems.add({\r\n  name: \"Cheese\",\r\n  quantity: 1 });\r\n\r\nitems.add({\r\n  name: \"Dark chocolate\",\r\n  quantity: 1 });\r\n<\/pre>\n
That’s all! hopefully, you have successfully integrated this grocery app into your project. If you have any questions or facing any issues, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This code snippet helps you to create a simple grocery list app in JavaScript. It comes with a user-friendly interface…<\/p>\n","protected":false},"author":1,"featured_media":6054,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[116],"tags":[217],"class_list":["post-5939","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vanilla-javascript","tag-shopping-cart"],"acf":[],"yoast_head":"\nSimple Grocery List App in JavaScript — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a well developed simple grocery list app in JavaScript\/jQuery. It allows users to add remove and mark shopping items.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/vanilla-javascript\/simple-grocery-list-app-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Simple Grocery List App in JavaScript — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a well developed simple grocery list app in JavaScript\/jQuery. It allows users to add remove and mark shopping items.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/vanilla-javascript\/simple-grocery-list-app-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-11T16:40:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T09:43:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/02\/simple-grocery-list-app-in-javascript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/simple-grocery-list-app-in-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/simple-grocery-list-app-in-javascript\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Simple Grocery List App in JavaScript\",\"datePublished\":\"2024-01-11T16:40:00+00:00\",\"dateModified\":\"2024-01-22T09:43:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/simple-grocery-list-app-in-javascript\/\"},\"wordCount\":299,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/simple-grocery-list-app-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/02\/simple-grocery-list-app-in-javascript.png\",\"keywords\":[\"Shopping Cart\"],\"articleSection\":[\"Vanilla JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/simple-grocery-list-app-in-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/simple-grocery-list-app-in-javascript\/\",\"url\":\"https:\/\/codehim.com\/vanilla-javascript\/simple-grocery-list-app-in-javascript\/\",\"name\":\"Simple Grocery List App in JavaScript — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/simple-grocery-list-app-in-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/simple-grocery-list-app-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/02\/simple-grocery-list-app-in-javascript.png\",\"datePublished\":\"2024-01-11T16:40:00+00:00\",\"dateModified\":\"2024-01-22T09:43:39+00:00\",\"description\":\"Here is a well developed simple grocery list app in JavaScript\/jQuery. It allows users to add remove and mark shopping items.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/simple-grocery-list-app-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/simple-grocery-list-app-in-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/simple-grocery-list-app-in-javascript\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/02\/simple-grocery-list-app-in-javascript.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/02\/simple-grocery-list-app-in-javascript.png\",\"width\":1280,\"height\":960,\"caption\":\"Simple Grocery List App in JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/simple-grocery-list-app-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vanilla JavaScript\",\"item\":\"https:\/\/codehim.com\/category\/vanilla-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Simple Grocery List App in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Simple Grocery List App in JavaScript — CodeHim","description":"Here is a well developed simple grocery list app in JavaScript\/jQuery. It allows users to add remove and mark shopping items.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/vanilla-javascript\/simple-grocery-list-app-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Simple Grocery List App in JavaScript — CodeHim","og_description":"Here is a well developed simple grocery list app in JavaScript\/jQuery. It allows users to add remove and mark shopping items.","og_url":"https:\/\/codehim.com\/vanilla-javascript\/simple-grocery-list-app-in-javascript\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-11T16:40:00+00:00","article_modified_time":"2024-01-22T09:43:39+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/02\/simple-grocery-list-app-in-javascript.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/vanilla-javascript\/simple-grocery-list-app-in-javascript\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/simple-grocery-list-app-in-javascript\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Simple Grocery List App in JavaScript","datePublished":"2024-01-11T16:40:00+00:00","dateModified":"2024-01-22T09:43:39+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/simple-grocery-list-app-in-javascript\/"},"wordCount":299,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/simple-grocery-list-app-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/02\/simple-grocery-list-app-in-javascript.png","keywords":["Shopping Cart"],"articleSection":["Vanilla JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/vanilla-javascript\/simple-grocery-list-app-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/vanilla-javascript\/simple-grocery-list-app-in-javascript\/","url":"https:\/\/codehim.com\/vanilla-javascript\/simple-grocery-list-app-in-javascript\/","name":"Simple Grocery List App in JavaScript — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/simple-grocery-list-app-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/simple-grocery-list-app-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/02\/simple-grocery-list-app-in-javascript.png","datePublished":"2024-01-11T16:40:00+00:00","dateModified":"2024-01-22T09:43:39+00:00","description":"Here is a well developed simple grocery list app in JavaScript\/jQuery. It allows users to add remove and mark shopping items.","breadcrumb":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/simple-grocery-list-app-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/vanilla-javascript\/simple-grocery-list-app-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/vanilla-javascript\/simple-grocery-list-app-in-javascript\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/02\/simple-grocery-list-app-in-javascript.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/02\/simple-grocery-list-app-in-javascript.png","width":1280,"height":960,"caption":"Simple Grocery List App in JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/vanilla-javascript\/simple-grocery-list-app-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Vanilla JavaScript","item":"https:\/\/codehim.com\/category\/vanilla-javascript\/"},{"@type":"ListItem","position":3,"name":"Simple Grocery List App in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":14241,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/5939","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=5939"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/5939\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/6054"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=5939"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=5939"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=5939"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}