-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathLipsticks.html
104 lines (78 loc) · 3.26 KB
/
Lipsticks.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lipsticks product</title>
<link rel="stylesheet" href="./styles/product.css">
<link rel="stylesheet" href="./styles/navbar.css">
<link rel="stylesheet" href="./styles/footer.css">
</head>
<body>
<div id="navbar-outer-div"></div>
<!-- <div id="productcontainer">
<div id="titlebar">
<div><h1>Lipsticks</h1></div>
<p id="count">Result</p>
<div class="heddis">
<div class="hed1">Nothing helps to boost your confidence like wearing lipstick. Advancements in lipstick technology have meant that the essential product not only adds a pop of color to lips but can boast moisturizing ingredients that work to hydrate the lips and leave them nourished and smooth. Whether you prefer sharp, bold, and dramatic colors or more natural and subdued hues, SkinStore has a variety of shades from a host of popular brands to ensure we have the perfect cosmetic for you. Take a look at our lovely bestsellers like Chantecaille Butterfly Lip Chic and Perricone MD No Makeup Skincare Lipstick that are ideal for any occasion.
</div>
<div class="hed2">
<h2></h2>
<a href="#" class="previous">«</a>
<a href="#" class="next round">1</a>
<a href="#" class="previous round">2</a>
<a href="#" class="previous round">3</a>
<a href="#" class="next"> »</a>
</div>
</div>
</div>
<div id="sidebar">
</div>
<div id="product">
</div>
<br>
</div>
</div> -->
<div id="maincontainer">
<div id="select"></div>
<div id="container"></div>
</div>
<div id="footer-outer-div"></div>
</body>
</html>
<!-- <script src="./ViewAllSkincare.js"></script> -->
<!-- <script src="./javascriptfiles/viewallskincarelocastorage.js"></script> -->
<!--
jh adu -->
<script type="module">
import navbar from "./components/navbar.js";
document.querySelector("#navbar-outer-div").innerHTML = navbar();
import footer from "./components/footer.js";
document.querySelector("#footer-outer-div").innerHTML = footer();
import select from "./scripts/select.js";
import { APIcall1, append1 } from "./scripts/product.js";
let select_div = document.getElementById("select");
select_div.innerHTML = select();
let res = await APIcall1("https://skinstoreproject.herokuapp.com/product5");
console.log(res);
let parent = document.getElementById("container");
append1(res, parent);
let ele = document.getElementById("priceSort1");
ele.addEventListener("change", function () {
let v = document.getElementById("priceSort1").value;
if (v == "low") {
res.sort(function (a, b) {
return a.priceOfProduct - b.priceOfProduct;
});
}
if (v == "high") {
res.sort(function (a, b) {
return b.priceOfProduct - a.priceOfProduct;
});
}
// console.log(res)
append1(res, parent);
});
</script>