Simple Grocery List App in JavaScript

Simple Grocery List App in JavaScript
Code Snippet:Shopping list
Author: Keari Eggers
Published: January 11, 2024
Last Updated: January 22, 2024
Downloads: 13,002
License: MIT
Edit Code online: View on CodePen
Read More

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. Similarly, users can remove the added items from the list or mark the items that have been purchased.

You can easily integrate this grocery app into your shopping website project/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.

Basically, this grocery app project depends on jQuery and Backbone JS 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.

How to Create Simple Grocery List App in JavaScript

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.

  <header>
    Simple grocery list
  </header>

  <main>
    <form>
      <label for="item-input">Item</label>
      <input type="text" id="item-input">
      <label for="quantity-input">Quantity</label>
      <input type="number" id="quantity-input">
      <button type="submit" id="submit-btn">Add</button>
    </form>

    <div id="lists">
      <p class="list__label">Still need to grab <span class="quantity" id="shopping-num"></span></p>
      <ul id="shopping-list">
      </ul>
      <p class="list__label">In cart <span class="quantity" id="bought-num"></span></p>
      <ul id="bought-list">
      </ul>
    </div>

  </main>
  <div class="push"></div>
</div>

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.

header,
footer {
  color: white;
  background-color: #004A55;
  width: 100%;
  text-align: center;
  padding: 0.5em;
  position: relative;
}
footer,
.push {
  height: 2em;
}
.wrapper {
  margin: 0 auto -2em;
  min-height: 100%;
}
form {
  width: inherit;
}
label {
  display: block;
  line-height: 1.5em;
}
input {
  width: inherit;
  padding: 1em;
}
.delete, button {
  color: white;
  background-color: #F87D09;
}
button {
  border: 0;
  padding: 1em;
  width: inherit;
  margin: 0.75em 0;
}
.icon {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.25em;
  fill: #004A55;
}
#bought-list li:before, #shopping-list li:before {
  content: "";
  display: inline-block;
  background-size: 100%;
  height: 0.9em;
  width: 1em;
  margin-right: 0.3em;
}
#shopping-list li:before {
  background-image: url("https://res.cloudinary.com/ddy54k4ks/image/upload/v1454106412/svg/checkmark2.svg");
}
#bought-list li:before {
  background-image: url("https://res.cloudinary.com/ddy54k4ks/image/upload/v1454106412/svg/checkmark.svg");
}
ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
}
li {
  color: #004A55;
  padding: 0.75em;
  cursor: pointer;
  margin: 0.5em 0;
  border: 1px solid #004A55;
  position: relative;
  transition: background-color 0.2s;
}
li:hover {
  background-color: #A7CDCC;
}
.quantity {
  color: #F87D09;
}
.quantity:before {
  content: "(";
}
.quantity:after {
  content: ")";
}
.delete {
  float: right;
  padding: inherit;
  position: absolute;
  right: 0;
  top: 0;
}
.delete:after {
  clear: both;
}
#bought-list li {
  background-color: #F6F6F6;
}
#bought-list li .quantity {
  color: #666666;
}
.list__label {
  border-bottom: 2px solid #F87D09;
  font-size: 0.75em;
  color: #004A55;
  padding: 0;
}

3. After creating HTML and CSS styles for the grocery app, load the following dependencies just before closing of the body tag.

<!-- jQuery -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js'></script>
<!-- Lodash JS -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js'></script>
<!-- Backbone JS -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js'></script>

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.

const classNames = {
  DELETE: "delete" };

const logger = {
  logging: false,
  log(msg) {
    if (this.logging) console.log(msg);
  } };

const itemProto = {
  bought: false,
  toggle() {
    this.bought = !this.bought;
    this.trigger("toggled", this);
  } };

const items = {
  list: [],

  add(item) {
    let newItem = Object.create(itemProto);
    Object.assign(newItem, item, Backbone.Events);
    newItem.on("toggled", function (item) {
      logger.log("toggled");
      view.addToList(item);
    });
    newItem.id = _.uniqueId();
    this.list.push(newItem);
    this.trigger("itemAdded", newItem);
    this.trigger("updated");
  },

  delete(id) {
    logger.log("delete: " + id);
    let item = _.find(items.list, {
      "id": id });

    view.remove(item.$el);

    this.list = _.pull(this.list, item);
    this.trigger("updated");
  },

  toggle(id) {
    _.find(items.list, {
      "id": id }).
    toggle();

    this.trigger("updated");
  } };

const app = {
  init() {
    view.init();
    Object.assign(items, Backbone.Events);
    items.on("itemAdded", function (item) {
      logger.log("item added");
      view.addToList(item);
    });

    items.on("updated", function () {
      logger.log("updated");
      view.updateQuantities();
    });
  } };

const view = {
  init() {

    this.$shoppingList = $("#shopping-list");
    this.$boughtList = $("#bought-list");
    this.$form = $("form");

    const handleSubmit = function (e) {
      e.preventDefault();

      let name = $("#item-input"),
      quantity = $("#quantity-input");

      if (name.val()) {
        items.add({
          name: name.val(),
          quantity: quantity.val() || 1 });

      }
      name.val("");
      quantity.val("");

    };

    const handleClick = function (e) {
      e.preventDefault();
      logger.log("Clicked");

      if (e.target.nodeName === "LI") {
        let id = $(e.target).data("id").toString();
        items.toggle(id);
      } else if (e.target.className === classNames.DELETE) {
        let id = $(e.target).parent().data("id").toString();
        items.delete(id);
      }
    };

    const handleDelete = function (e) {
      e.preventDefault();
      logger.log("Delete: " + item);
      let id = $(e.target).data("id").toString(),
      item = _.find(items.list, {
        "id": id });

    };

    $("#lists").on("click", handleClick);
    this.$form.on("submit", handleSubmit);
    $("." + classNames.DELETE).on("click", handleDelete);

  },

  addToList(item, list) {
    let $item = item.$el || this.createListItem(item);

    if (item.bought) {
      $item.prependTo(this.$boughtList);
    } else {
      $item.appendTo(this.$shoppingList);
    }
  },

  updateQuantities() {
    logger.log("updateQuantities");
    $("#shopping-num").html(this.$shoppingList.children().length);
    $("#bought-num").html(this.$boughtList.children().length);
  },

  remove($el) {
    $el.remove();
  },

  createListItem(item) {
    item.$el = $(`<li data-id=${item.id}>${item.name} <span class="quantity">${item.quantity}</span><span class="delete">X</span></li>`);

    return item.$el;
  },

  getListItem(id) {
    let $el = $("li[data-id='" + id + "']");
    return $el.length ? $el : null;
  },

  render(items) {
    logger.log("render");

    this.$shoppingList.empty();
    this.$boughtList.empty();

    items.forEach(item => {
      let $item = $(`<li data-id=${item.id}>${item.name}<span>${item.quantity}</span></li>`);

      if (item.bought) {
        this.$boughtList.append($item);
        $item.addClass("bought");
      } else {
        this.$shoppingList.append($item);
      }
    });

  } };

app.init();

items.add({
  name: "Wine",
  quantity: 1 });

items.add({
  name: "Cheese",
  quantity: 1 });

items.add({
  name: "Dark chocolate",
  quantity: 1 });

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X