Chasing-Limits/changeBackground.js at main · Kudsanai413/Chasing-Limits · 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
const toggle = document.querySelector("#toggle");
const cartShower = document.querySelector("#cart");
const main = document.querySelector("main");
const addBtns = document.querySelectorAll(".product-card button");
const allProductCards = document.querySelectorAll(".product-card");
const cartImage = document.querySelector("#cart img");
const addToCart = document.querySelector("#add-to-cart");
const size = document.querySelector("input[name='size']").value;
const quantty = document.querySelector("input[name='quantity']").value;
const allColors = document.querySelectorAll(".color");


number = 0;
colour = "";

let cartList = JSON.parse(localStorage.getItem("shoppingCart")) | [
    {
        product: "Formal Shoe",
        color:   "black",
        size: 28,
        price: 20,
        quantity: 2,
        total: 40
    }
]


allColors.forEach(item => {
    item.addEventListener("click", () => {
        colour = item.style.background;
        alert(colour);
    });
})


toggle.addEventListener("click", () => {
    main.classList.toggle("blurry", false)
    cartShower.style.display = "none";


});


addToCart.addEventListener("click", () => {
    main.classList.toggle("blurry", false);
    cartShower.style.display = "none";
    type = allProductCards[number].children[1].innerHTML;
    amount = allProductCards[number].children[2].innerHTML;


})


addBtns.forEach( (button, index) => {
    button.addEventListener("click", () => {
        number = index;
        cartImage.src = allProductCards[index].firstElementChild.src;
        cartShower.style.display = "flex";
        main.classList.toggle("blurry");

    })
})