-
Notifications
You must be signed in to change notification settings - Fork 1
/
ecommerce3.js
97 lines (91 loc) · 3.06 KB
/
ecommerce3.js
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
const things = [
{
id:0,
image:'./ecommerce3_photo1.jfif',
name:'Ryan Albums',
price:'$25.00'
},
{
id:1,
image:'./ecommerce3_photo2.jfif',
name:'Movie Posters',
price:'$30.00'
},
{
id:2,
image:'./ecommerce3_photo3.jfif',
name:'Happy Ninja',
price:'$16.00'
},
{
id:3,
image:'./ecommerce3_photo4.jfif',
name:'Woo-hoodies',
price:'$12.00'
}
]
const things_set = [...new Set(things.map((items) =>{
return items;
}))]
document.getElementById('products').innerHTML = things_set.map((items) =>{
var {image, name, price} = items;
console.log(image);
return (
`<div class="boxes">
<img id="product-image" src="${image}" alt="">
<div id="product-info">
<h4>${name}</h4>
<div>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
<p >${price}</p>
<button class="btn btn-dark">Add to cart</button>
</div>
</div>`
)
}).join('');
`
<div class="boxes ">
<img id="product-image" src="./bg2.jpg" alt="">
<div id="product-info">
<h4>Happy Ninja</h4>
<p >$15.00</p>
<button class="btn btn-dark">Add to cart</button>
</div>
</div>
<div class="boxes ">
<img id="product-image" src="./bg2.jpg" alt="">
<div id="product-info">
<h4>Happy Ninja</h4>
<div>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
<p >$15.00</p>
<button class="btn btn-dark">Add to cart</button>
</div>
</div>
<div class="boxes ">
<img id="product-image" src="./bg2.jpg" alt="">
<div id="product-info">
<h4>Happy Ninja</h4>
<p >$15.00</p>
<button class="btn btn-dark">Add to cart</button>
</div>
</div>
<div class="boxes ">
<img id="product-image" src="./bg2.jpg" alt="">
<div id="product-info">
<h4>Happy Ninja</h4>
<p >$15.00</p>
<button class="btn btn-dark">Add to cart</button>
</div>
</div>
`