-
Notifications
You must be signed in to change notification settings - Fork 0
/
src.js
100 lines (88 loc) · 2.32 KB
/
src.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
98
99
100
const data = fetch('./data.json')
.then(function (response) {
return response.json();
})
.then(function (data) {
appendData(data.items);
console.log(data.items)
})
.catch(function (err) {
console.log(err);
});
function appendData(data) {
const container = document.getElementById('contents');
const container1 = document.getElementById('calculationcontent');
data.forEach((result, idx) => {
// Construct card content
const content = `
<!-- Content cart -->
<div class="shopping-item">
<div class="discount_tag">${result.discount}% </div>
<img id ="image" src=${result.image} >
<div class="footer">
<p class="item">${result.name}</p>
<br>
<div class="text_align">
<p class="discounted_rate">
<span class="discounted"><span style='color:#8e8383'>${result.price.actual}</span>
</span>
<span class="final_rate"> ${result.price.display}</span>
<button class="footerbutton">
Add To Cart
</button>
</div>
</p>
</div>
</div>
`;
container.innerHTML += content;
});
const content1 = `
<!-- Content cart -->
<table>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr>
<td>
<img class ="image_short" src=${data[0].image} >
${data[0].name}</td>
<td > <span> - </span> <span class="box_shadow"> 2 </span> <span>+</span>
</td>
<td>$${data[0].price.actual}</td>
</tr>
<tr>
<td>
<img class ="image_short" src=${data[0].image} >
${data[0].name}
</td>
<td > <span> - </span> <span class="box_shadow"> 2 </span> <span>+</span>
</td> <td>$${data[0].price.actual}</td>
</tr>
</table>
<div class="total_amount">
<h4 class="sub_head">Total</h4>
<table >
<tr>
<th>${data[0].name}:</th>
<td>$${data[0].price.actual}</td>
</tr>
<tr>
<th>Discount:</th>
<td>$${data[0].discount}</td>
</tr>
<tr>
<th>Type Discount:</th>
<td>$0</td>
</tr>
<tr class="last_row">
<th>Order Total:</th>
<td>$${data[0].price.actual}</td>
</tr>
</table>
</div>
`
container1.innerHTML += content1;
}