The-Grocery-Store/script.js at master · actuallyroy/The-Grocery-Store · 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
101
/*Model.............. */
var modal = document.getElementById('cartModel');
var btn = document.querySelector('.cartImage');
var closeBtn = document.querySelector('.closeModelCart');
btn.onclick = function () {
  modal.style.display = 'block';
  document.body.classList.add('stop-scrolling');
};
closeBtn.onclick = function () {
  modal.style.display = 'none';
  document.body.classList.remove('stop-scrolling');
};
window.onclick = function (event) {
  if (event.target == modal) {
    modal.style.display = 'none';
    document.body.classList.remove('stop-scrolling');
  }
};

const itemDetails = document.querySelector('.itemDetails');
const payButton = document.querySelector('.payButton');
const billDetails = document.querySelector('.billDetails');

if (itemList.length > 0) {
  payButton.disabled = false;
  billDetails.style.display = 'block';
  itemList.forEach((item) => {
    itemDetails.innerHTML += `
    <div class="singleItemDetails">
        <div class="singleProdCont">
            <div class="imageProd">
                <img src="${item.image}" alt="">
            </div>
            <div class="prodDesc">
                <h3>${item.name}</h3>
                <div class="priceDesc">
                    <h2>${item.price}</h2>
                    <h3>${item.discountAmount}</h3>
                    <h5>${item.discountPer} off</h5>
                </div>
                <p>${item.quantity} kg</p>
                <div class="amountCont">
                    <div class="amountBtn">
                        <span>-</span>
                    </div>
                    <div class="amount">
                        <span>1</span>
                    </div>
                    <div class="amountBtn">
                        <span>+</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    `;
  });
} else {
  itemDetails.innerHTML = '<h2>No items in cart</h2>';
  payButton.ddisabled = true;
  billDetails.style.display = 'none';
}

const sideBarList = document.querySelector('.sideBarList');

sidebarData.forEach((item) => {
  sideBarList.innerHTML += `
  <li class="liDropdown">
  <span>${item.nameOfHead}</span>
  <div class="dropdownCont">
      <ul>
         ${Object.values(item.listSidebar)
           .map((value) => {
             return `<li class="listItemSideBarcont">${value}</li>`;
           })
           .join('')}
      </ul>
  </div>
  </li>
`;
});

const listItemSideBarcont = document.querySelectorAll('.listItemSideBarcont');
listItemSideBarcont.forEach((item, index) => {
  item.addEventListener('click', (e) => {
    console.log(
      e.target.innerText,
      item.parentElement.parentElement.parentElement.firstElementChild.innerText
    );
    window.location.href = `./pages/ShopingListPage/index.html?c=${item.parentElement.parentElement.parentElement.firstElementChild.innerText}&s=${e.target.innerText}`;
  });
});

window.onclick = function (event) {
  console.log(event.target);
  if (event.target === overlay) {
    profilePopupIFrame.style.display = 'none';
    overlay.style.display = 'none';
    document.body.classList.remove('stop-scrolling');
  }
};