JavaScriptCourse-FinalProject/index.js at master · qaifikhan/JavaScriptCourse-FinalProject · 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
$(document).ready(function(){
$('.center').slick({
centerMode: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
dots: true,
arrows: false,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});

functioncreateHomePageProductCard(obj){
// <div class="product-card">
// <a href='/details.html'>
// <img class="product-image" src="https://assets.myntassets.com/h_1440,q_100,w_1080/v1/assets/images/7579188/2018/11/5/08a7b230-ee8f-46c0-a945-4e835a3c01c01541402833619-United-Colors-of-Benetton-Men-Sweatshirts-1271541402833444-1.jpg" />

// <div class="product-meta">
// <h4>Men Navy Solid Sweatshirt</h4>
// <h5>United Colors of Benetton</h5>
// <p>Rs 2599</p>
// </div>
// </a>
// </div>

varmainDiv=document.createElement('div');
mainDiv.classList.add('product-card');

varproductLink=document.createElement('a');
productLink.href='/product/details.html?p='+obj.id;

varproductImage=document.createElement('img');
productImage.classList.add('product-image');
productImage.src=obj.preview;
productImage.alt=obj.name+' Pic';

productLink.appendChild(productImage);

varinnerDiv=document.createElement('div');
innerDiv.classList.add('product-meta');

varproductName=document.createElement('h4');
varproductNameText=document.createTextNode(obj.name);
productName.appendChild(productNameText);

varproductBrand=document.createElement('h5');
varproductBrandText=document.createTextNode(obj.brand);
productBrand.appendChild(productBrandText);

varproductPrice=document.createElement('p');
varproductPriceText=document.createTextNode('Rs '+obj.price);
productPrice.appendChild(productPriceText);

innerDiv.appendChild(productName);
innerDiv.appendChild(productBrand);
innerDiv.appendChild(productPrice);

mainDiv.appendChild(productLink);
mainDiv.appendChild(innerDiv);

returnmainDiv;
}

$.get('https://5d76bf96515d1a0014085cf9.mockapi.io/product',function(data,status){
varresponse=data;

for(vari=0;i<response.length;i++){
if(response[i].isAccessory){
$('#accessory-grid').append(createHomePageProductCard(response[i]))
}else{
$('#clothing-grid').append(createHomePageProductCard(response[i]))
}
}
})
});