-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhtmltest.html
145 lines (125 loc) · 4.68 KB
/
htmltest.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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fake Store</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
/* Ensure cards are of equal height */
.card {
display: flex;
flex-direction: column;
height: 100%;
}
.card-body {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card-img-top {
max-height: 200px;
object-fit: contain;
}
.spinner {
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
background-color: whitesmoke;
}
</style>
</head>
<body>
<!-- Header -->
<header class="bg-primary text-white text-center py-3">
<h1>Fake Store</h1>
<p>Your one-stop shop for demo products</p>
</header>
<!-- Main Content -->
<main class="container my-4">
<div id="product-container" class="row g-4">
<!-- Products will be dynamically loaded here -->
</div>
<div id="loading">
<div class="spinner">
<svg width="66" height="60" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<style>
.spinner_aj0A {
transform-origin: center;
animation: spinner_KYSC .75s infinite linear
}
@keyframes spinner_KYSC {
100% {
transform: rotate(360deg)
}
}
</style>
<path
d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"
class="spinner_aj0A" />
</svg>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-dark text-white text-center py-3 mt-5">
<p>© 2024 Fake Store. All rights reserved.</p>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom JS -->
<script>
const productContainer = document.getElementById('product-container');
const loadingElement = document.getElementById('loading');
// Fetch and display products
async function fetchProducts() {
try {
const response = await fetch('https://fakestoreapi.com/products');
if (!response.ok) throw new Error('Failed to fetch products');
const products = await response.json();
loadingElement.style.display = 'none';
displayProducts(products);
} catch (error) {
productContainer.innerHTML = `
<div class="col-12 text-center text-danger">
<p>${error.message}</p>
</div>
`;
console.error(error);
}
}
function displayProducts(products) {
products.forEach(product => {
const productCard = `
<div class="col-md-4 col-lg-3 d-flex">
<div class="card">
<img src="${product.image}" class="card-img-top" alt="${product.title}">
<div class="card-body">
<h5 class="card-title">${product.title}</h5>
<p class="card-text text-muted">${product.description.slice(0, 100)}...</p>
<div class="d-flex justify-content-between align-items-center">
<span class="fw-bold">$${product.price}</span>
<a href="productDetails.html?id=${product.id}" class="btn btn-primary btn-sm">View Details</a>
</div>
</div>
</div>
</div>
`;
productContainer.innerHTML += productCard;
});
}
fetchProducts();
</script>
</body>
</html>