Skip to content

Commit f16970a

Browse files
john-smilgajohn-smilga
committed
22 - products page project complete
1 parent 2c887a3 commit f16970a

9 files changed

Lines changed: 241 additions & 124 deletions

File tree

‎22-products/final/README.md‎

Lines changed: 97 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,100 @@
1-
## Numbers Project
1+
## Products Project
22

33
#### Structure (HTML)
44

5-
- section
6-
- article
7-
- span.number data-value="value" (0)
8-
- p (text)
9-
10-
#### Logic (JS)
11-
12-
- select all span's with .number
13-
- iterate over and log each span
14-
- create updateCount function
15-
- accept el as argument
16-
- invoke and pass each span el in iteration
17-
18-
```js
19-
const updateCount = (el) => {
20-
const value = parseInt(el.dataset.value);
21-
const increment = Math.ceil(value / 1000);
22-
let initialValue = 0;
23-
};
24-
```
25-
26-
```js
27-
const updateCount = (el) => {
28-
const value = parseInt(el.dataset.value);
29-
const increment = Math.ceil(value / 1000);
30-
let initialValue = 0;
31-
32-
const increaseCount = setInterval(() => {
33-
initialValue += increment;
34-
if (initialValue > value) {
35-
el.textContent = `${value}+`;
36-
clearInterval(increaseCount);
37-
return;
38-
}
39-
el.textContent = `${initialValue}+`;
40-
}, 1);
41-
};
42-
```
5+
- section.products
6+
7+
- div.title
8+
- h2(products)
9+
- div.title-underline
10+
- div.products-center
11+
- div.products-container
12+
- a.single-product href="product.html"
13+
- img.single-product-img.img
14+
- footer
15+
- h5.name (product title)
16+
- span.price($9.99)
17+
18+
- create product.html
19+
- basic structure
20+
21+
#### Loading and Error
22+
23+
- (CSS Loading Spinner)[https://youtu.be/DqqZEpctZ8w]
24+
- in .products-center
25+
- div.loading
26+
- p.error
27+
28+
#### API Docs
29+
30+
- (Course API)[https://course-api.com/]
31+
32+
- (Products)[https://course-api.com/javascript-store-products]
33+
34+
- (Single Product)[https://course-api.com/javascript-store-single-product?id=rec43w3ipXvP28vog]
35+
36+
#### Fetch Products
37+
38+
- select .products-center
39+
- fetch products
40+
- log result
41+
- try/catch
42+
43+
#### Loading and Error
44+
45+
- add loading while fetching
46+
- add error in catch
47+
48+
#### Display Products - Setup
49+
50+
- return data from fetchProducts
51+
- create displayProducts(list)
52+
- create start()
53+
- invoke fetchProducts and displayProducts in start
54+
- invoke start
55+
56+
#### Display Products - Complete
57+
58+
- iterate over list
59+
- pull out all the values
60+
- set productsDOM equal to result
61+
62+
#### Single Product
63+
64+
- link styles.css
65+
- a.btn.home-link(back home)
66+
- section.product
67+
- div.product-wrapper
68+
- img.img
69+
- div.product-info
70+
- h3 (title)
71+
- h5 (company)
72+
- span (price)
73+
- div.colors
74+
- span.product-color
75+
- p (lorem text)
76+
- button.btn(add to cart)
77+
78+
#### product.js setup
79+
80+
- create product.js
81+
- link product.html
82+
- select .product
83+
- get single product url
84+
- setup fetchProduct(),displayProduct(),start()
85+
86+
#### Loading, Error, Fetch Single Product
87+
88+
- fetch single product
89+
- setup loading and error
90+
- make id dynamic
91+
- new URLSearchParams
92+
- window.location.search
93+
- get(keyName)
94+
95+
#### Display Single Product
96+
97+
#### Display Colors
98+
99+
- iterate over colors array
100+
- return span with dynamic color value

‎22-products/final/app.js‎

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,44 @@
11
const url = 'https://course-api.com/javascript-store-products';
22

33
const productsDOM = document.querySelector('.products-center');
4-
productsDOM.innerHTML = `<div class="loading"></div>`;
54

65
const fetchProducts = async () => {
6+
productsDOM.innerHTML = '<div class="loading"></div>';
77
try {
88
const resp = await fetch(url);
99
const data = await resp.json();
1010
return data;
1111
} catch (error) {
12-
productsDOM.innerHTML = `<p class="error">There was a problem loading the products. Please try again later.</p>`;
12+
productsDOM.innerHTML = '<p class="error">there was an error</p>';
1313
}
1414
};
1515

16-
const displayProducts = (list = []) => {
16+
const displayProducts = (list) => {
1717
const productList = list
1818
.map((product) => {
19-
// tons of different ways to achieve the same result
2019
const { id } = product;
2120
const { name: title, price } = product.fields;
2221
const { url: img } = product.fields.image[0];
2322
const formatPrice = price / 100;
24-
return `<a class="single-product" href="product.html?id=${id}">
25-
<img
26-
src="${img}"
27-
class="single-product-img img"
28-
alt="${title}"
29-
/>
30-
<footer>
31-
<h5 class="name">${title}</h5>
32-
<span class="price">$${formatPrice}</span>
33-
</footer>
34-
</a>`;
23+
// id,name,price,img
24+
return `<a class="single-product" href="product.html?id=${id}&name=john&age=25">
25+
<img src="${img}" class="single-product-img img" alt="${title}" />
26+
<footer>
27+
<h5 class="name">${title}</h5>
28+
<span class="price">$${formatPrice}</span>
29+
</footer>
30+
</a>`;
3531
})
3632
.join('');
37-
38-
productsDOM.innerHTML = `<div class="products-container">
39-
${productList}
40-
</div>`;
33+
productsDOM.innerHTML = ` <div class="products-container">
34+
${productList}
35+
36+
</div>`;
4137
};
4238

43-
const startApp = async () => {
44-
const products = await fetchProducts();
45-
displayProducts(products);
39+
const start = async () => {
40+
const data = await fetchProducts();
41+
displayProducts(data);
4642
};
4743

48-
startApp();
44+
start();

‎22-products/final/couch.jpg‎

186 KB
Loading

‎22-products/final/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Products Starter</title>
7+
<title>Products Complete</title>
88
<link rel="stylesheet" href="./styles.css" />
99
</head>
1010
<body>

‎22-products/final/product.html‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,12 @@
44
<meta charset="UTF-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Product</title>
7+
<title>Single Product</title>
88
<link rel="stylesheet" href="./styles.css" />
99
</head>
1010
<body>
11-
<a class="btn home-link" href="index.html">back home</a>
12-
<section class="product">
13-
<h4 class="product-loading">Loading...</h4>
14-
</section>
11+
<a href="index.html" class="btn home-link">back home</a>
12+
<section class="product"></section>
1513
<script src="./product.js"></script>
1614
</body>
1715
</html>

‎22-products/final/product.js‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,22 @@ const url = 'https://course-api.com/javascript-store-single-product';
33

44
const fetchProduct = async () => {
55
try {
6+
productDOM.innerHTML = '<h4 class="product-loading">Loading... </h4>';
7+
// console.log(window.location.search);
68
const params = new URLSearchParams(window.location.search);
79
const id = params.get('id');
810

911
const response = await fetch(`${url}?id=${id}`);
1012
const data = await response.json();
1113
return data;
1214
} catch (error) {
13-
productDOM.innerHTML = `<p class="error">There was a problem loading the product. Please try again later.</p>`;
15+
productDOM.innerHTML =
16+
'<p class="error">There was a problem loading the product. Please try again later </p>';
1417
}
1518
};
1619

1720
const displayProduct = (product) => {
18-
console.log(product);
21+
// company, colors, description, name:title, price, image(url:img)
1922
const {
2023
company,
2124
colors,
@@ -25,28 +28,24 @@ const displayProduct = (product) => {
2528
image,
2629
} = product.fields;
2730
const { url: img } = image[0];
28-
29-
// set page title
3031
document.title = title.toUpperCase();
3132

33+
// colors
3234
const colorsList = colors
33-
.map((colorValue) => {
34-
return `<span class="product-color" style="background-color:${colorValue}"></span>`;
35+
.map((color) => {
36+
return `<span class="product-color" style="background: ${color}"></span>`;
3537
})
3638
.join('');
3739

3840
productDOM.innerHTML = `<div class="product-wrapper">
39-
<img
40-
src="${img}"
41-
class="img"
42-
alt=""
43-
/>
41+
<img src="${img}" class="img" alt="${title}" />
4442
<div class="product-info">
4543
<h3>${title}</h3>
4644
<h5>${company}</h5>
47-
<span>$${price / 100}</span>
45+
<span>${price / 100}</span>
4846
<div class="colors">
4947
${colorsList}
48+
5049
</div>
5150
<p>
5251
${description}
@@ -56,9 +55,9 @@ const displayProduct = (product) => {
5655
</div>`;
5756
};
5857

59-
const startApp = async () => {
60-
const product = await fetchProduct();
61-
displayProduct(product);
58+
const start = async () => {
59+
const data = await fetchProduct();
60+
displayProduct(data);
6261
};
6362

64-
startApp();
63+
start();

0 commit comments

Comments
 (0)