shoplist/scripts.js at master · martaszczepaniak/shoplist · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
$(document).ready(function() {
  var productsList = {
    products: [
      {
        name: "Butter",
        id: 0
      },
      {
        name: "Flour",
        id: 1
      },
      {
        name: "Milk",
        id: 2
      },
      {
        name: "Eggs",
        id: 3
      },
      {
        name: "Pasta",
        id: 4
      },
      {
        name: "Tomato",
        id: 5
      },
      {
        name: "Cucumber",
        id: 6
      },
      {
        name: "Orange Juice",
        id: 7
      }
    ]
  }

  var basketList = {
    products: []
  }

  var renderBasket = function() {
    $("#basket-list").html("")
    basketList.products.forEach(function(product) {
      basketListItem = generateListItem(product, "-")
      $("#basket-list").append(basketListItem)
    })
  }

  var renderProductsList = function() {
    productsList.products.forEach(function(product) {
      productListItem = generateListItem(product, "+")
      $("#products-list").append(productListItem)
    })
  }

  var generateListItem = function(product, linkText) {
    listItem = $("<li>").text(product.name).attr("data-id", product.id).attr("data-number", product.number)

    itemLink = $("<a>").text(linkText)

    return listItem.append(itemLink)
  }

  var addItemToBasket = function(event) {
    productId = parseInt($(event.currentTarget).parent().attr("data-id"))
    product = _.find(productsList.products, { id: productId })

    basketProduct = _.find(basketList.products, { id: productId })

    if(basketProduct) {
      basketProduct.number += 1
    } else {
      product.number = 1
      basketList.products.push(product)
    }

    renderBasket()
  }

  var removeItemFromBasket = function(event) {
    productId = parseInt($(event.currentTarget).parent().attr("data-id"))
    product = _.find(basketList.products, { id: productId })

    if(product.number > 1) {
      product.number -= 1
    } else {
      _.remove(basketList.products, { id: productId })
    }

    renderBasket()
  }

  $("body").on("click", "#products-list a", addItemToBasket)

  $("body").on("click", "#basket-list a", removeItemFromBasket)

  renderProductsList()
})