https://farmers-friend.netlify.app/store.js

1if (document.readyState == 'loading') {
2    document.addEventListener('DOMContentLoaded', ready)
3} else {
4    ready()
5}
6
7function ready() {
8    var removeCartItemButtons = document.getElementsByClassName('btn-danger')
9    for (var i = 0; i < removeCartItemButtons.length; i++) {
10        var button = removeCartItemButtons[i]
11        button.addEventListener('click', removeCartItem)
12    }
13
14    var quantityInputs = document.getElementsByClassName('cart-quantity-input')
15    for (var i = 0; i < quantityInputs.length; i++) {
16        var input = quantityInputs[i]
17        input.addEventListener('change', quantityChanged)
18    }
19
20    var addToCartButtons = document.getElementsByClassName('shop-item-button')
21    for (var i = 0; i < addToCartButtons.length; i++) {
22        var button = addToCartButtons[i]
23        button.addEventListener('click', addToCartClicked)
24    }
25
26    document.getElementsByClassName('btn-purchase')[0].addEventListener('click', purchaseClicked)
27}
28
29function purchaseClicked() {
30 
31    var cartItems = document.getElementsByClassName('cart-items')[0]
32    while (cartItems.hasChildNodes()) {
33        cartItems.removeChild(cartItems.firstChild)
34    }
35    updateCartTotal()
36}
37
38function removeCartItem(event) {
39    var buttonClicked = event.target
40    buttonClicked.parentElement.parentElement.remove()
41    updateCartTotal()
42}
43
44function quantityChanged(event) {
45    var input = event.target
46    if (isNaN(input.value) || input.value <= 0) {
47        input.value = 1
48    }
49    updateCartTotal()
50}
51
52function addToCartClicked(event) {
53    var button = event.target
54    var shopItem = button.parentElement.parentElement
55    var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText
56    var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText
57    addItemToCart(title, price)
58    updateCartTotal()
59}
60
61function addItemToCart(title, price) {
62    var cartRow = document.createElement('div')
63    cartRow.classList.add('cart-row')
64    var cartItems = document.getElementsByClassName('cart-items')[0]
65    var cartItemNames = cartItems.getElementsByClassName('cart-item-title')
66    for (var i = 0; i < cartItemNames.length; i++) {
67        if (cartItemNames[i].innerText == title) {
68            alert('This item is already added to the cart')
69            return
70        }
71    }
72    var cartRowContents = `
73        <div class="cart-item cart-column">
74            <span class="cart-item-title">${title}</span>
75        </div>
76        <span class="cart-price cart-column">${price}</span>
77        <div class="cart-quantity cart-column">
78            <input class="cart-quantity-input" type="number" value="1">
79            <button class="btn btn-danger" type="button">REMOVE</button>
80        </div>`
81    cartRow.innerHTML = cartRowContents
82    cartItems.append(cartRow)
83    cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem)
84    cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged)
85}
86
87function updateCartTotal() {
88    var cartItemContainer = document.getElementsByClassName('cart-items')[0]
89    var cartRows = cartItemContainer.getElementsByClassName('cart-row')
90    var total = 0
91    for (var i = 0; i < cartRows.length; i++) {
92        var cartRow = cartRows[i]
93        var priceElement = cartRow.getElementsByClassName('cart-price')[0]
94        var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
95        var price = parseFloat(priceElement.innerText.replace('Rs.', ''))
96        var quantity = quantityElement.value
97        total = total + (price * quantity)
98    }
99    total = Math.round(total * 100) / 100
100    document.getElementsByClassName('cart-total-price')[0].innerText = 'Rs.' + total
101}