CodeAlpha_SimpleEcommerceStore/script.js at main · AkshayasriM/CodeAlpha_SimpleEcommerceStore · 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
102
103
104
105
106
107
// Product List

const products = [

{
id:1,
name:"Apple MacBook Pro",
price:129999,
image:"https://images.unsplash.com/photo-1517336714739-489689fd1ca8?w=600"
},

{
id:2,
name:"iPhone 15 Pro",
price:109999,
image:"https://images.unsplash.com/photo-1592750475338-74b7b21085ab?w=600"
},

{
id:3,
name:"Sony Headphones",
price:29999,
image:"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=600"
},

{
id:4,
name:"Apple Watch",
price:39999,
image:"https://images.unsplash.com/photo-1546868871-7041f2a55e12?w=600"
},

{
id:5,
name:"Canon DSLR Camera",
price:69999,
image:"https://images.unsplash.com/photo-1516035069371-29a1b244cc32?w=600"
},

{
id:6,
name:"Gaming Keyboard",
price:4999,
image:"https://images.unsplash.com/photo-1511467687858-23d96c32e4ae?w=600"
}

];

const productContainer=document.getElementById("products");

displayProducts();

function displayProducts(){

productContainer.innerHTML="";

products.forEach(product=>{

productContainer.innerHTML+=`

<div class="card">

<img src="${product.image}" alt="${product.name}">

<h2>${product.name}</h2>

<p class="price">₹${product.price.toLocaleString()}</p>

<button onclick="addCart(${product.id})">

Add To Cart

</button>

</div>

`;

});

}

// Add to Cart

function addCart(id){

let cart=JSON.parse(localStorage.getItem("cart"))||[];

cart.push(id);

localStorage.setItem("cart",JSON.stringify(cart));

alert("✅ Product Added To Cart!");

}

// Shop Now Button

function shopNow(){

document.getElementById("products").scrollIntoView({

behavior:"smooth"

});

}