I'm currently trying to parse my products.json file and an icon from FontAwesome. I was coding and then after coming back to my computer, both my JSON file and font-awesome files aren't being read, but I haven't touched my code.
Currently, my file system looks like this:
And below is my code which has the importing statements:
index.html
<head>
<meta charset="utf-8">
<title>Comfy House</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<!-- custom css -->
<link rel="stylesheet" href="styles.css">
<script defer src="/font-awesome/js/all.js"></script>
</head>
app.js
// responsible for getting the products from local storage
class Products{
async getProducts(){
try {
let result = await fetch("products.json");
//let's wait until we get the result
let data = await result.json();
//have products variable hold array
let products = data.items;
//destructure the products
products = products.map(item => {
//get the title and price from the fields property
const {title, price} = item.fields;
//get the id from the sys property
const {id} = item.sys;
const image = item.fields.image.fields.file.url;
//return the new product
return {title, price, id, image}
})
return products
} catch (error) {
console.log(error)
}
}
}
class UI {
displayProducts(products){
let result = '';
products.forEach(product => {
result += `
<article class="product">
<div class='img-container'>
<img src=${product.image} alt="product" class='product-img'>
<button class='bag-btn' data-id='${product.id}'>
<i class='fas fa-shopping-cart'></i>
add to bag
</button>
</div>
<h3>${product.title}</h3>
<h4>$${product.price}/roll</h4>
</article>
`
});
//insert the products into the productsDOM
productsDOM.innerHTML = result;
}
...more code...
