-
Notifications
You must be signed in to change notification settings - Fork 0
/
index2.html
69 lines (66 loc) · 2.53 KB
/
index2.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Shopping Cart || First Vue App</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript" src="app.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="app1">
<div class="loader-container">
<div class="loader" v-if="loading"></div>
</div>
<div class="container" v-if="!loading">
<h2 v-if="chart.length>1">Your Chart with ({{chart.length}} items)</h2>
<h2 v-else-if="chart.length==0">Your chart is empty</h2>
<h2 v-else>Your Chart with ({{chart.length}} item)</h2>
<div class="item" v-for="(i,index) in chart">
<a href="#"> <img v-bind:src="i.img" alt="item1" /></a>
<div class="item-info">
<h4>{{i.name}} by {{i.provider}}</h4>
<p class="status" v-if="i.shipment">Free</p>
<p class="status1" v-else>Not Free</p>
<p class="shipment" v-if="i.shipment">Avaible</p>
<p class="shipment1" v-else>Not Avaible</p>
<div class="link">
<a href="#" v-on:click="remove(index)">Delete</a>
<a href="#" class="move-to-saved" v-on:click="move(index)"
>Move
</a>
</div>
</div>
</div>
</div>
<div class="saved" v-if="!loading">
<h2 class="savedTitle" v-if="saved.length>1">
Your saved with ({{saved.length}} items)
</h2>
<h2 class="savedTitle" v-else-if="saved.length==0">
Your saved list is empty
</h2>
<h2 class="savedTitle" v-else>
Your saved with ({{saved.length}} item)
</h2>
<div class="item" v-for="i in saved">
<a href="#"> <img v-bind:src="i.img" alt="item1" /></a>
<div class="item-info">
<h4>{{i.name}} by {{i.provider}}</h4>
<p class="status" v-if="i.shipment">Free</p>
<p class="status1" v-else>Not Free</p>
<p class="shipment" v-if="i.shipment">Avaible</p>
<p class="shipment1" v-else>Not Avaible</p>
<div class="link">
<a href="#" v-on:click="remove1(index)">Delete</a>
<a href="#" class="move-to-saved" v-on:click="move1(index)"
>Move to Chart
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>