-
Notifications
You must be signed in to change notification settings - Fork 3
/
mayblin.html
65 lines (58 loc) · 2.25 KB
/
mayblin.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
<!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>Mayblin</title>
<link rel="stylesheet" href="./styles/product.css" />
<link rel="stylesheet" href="./styles/navbar.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="./styles//footer.css" />
</head>
<body>
<div id="navbar-outer-div"></div>
<div id="discription">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRvnOKNZVkY917xJEizcAyv1UArju41-kqykg&usqp=CAU" alt="">
<h4>Maybelline or Maybelline New York is an American multinational cosmetics, skin care, fragrance, and personal care company, based in New York City. It was founded in Chicago in 1914, and has been a subsidiary of French cosmetics company L'Oréal since 1996.</h4>
</div>
<div id="maincontainer">
<div id="select"></div>
<div id="container"></div>
</div>
<div id="footer-outer-div"></div>
</body>
</html>
<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://projectskinstore.herokuapp.com/product1");
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>