Hello everyone! My name is Renardo Williams and this blog is about my web application Iconic Desserts. Iconic Desserts is a work in progress eCommerce web application that I am building for my wife. She has started a pastry company and wanted me to build a web page for her. The main purpose for web application is to View, Rate and order different desserts in different categories.
Behind the scenes of my web application is a db.json file which uses JSON (JavaScript Object Notation) API is an application programming interface designed for lightweight data interchange (text-based data exchange format) between two computer applications operating on the same hardware device or between different computers in different geographical areas.
In the context of Iconic Desserts, I used API to retrieve data for the different Dessert categories
fetch(`http://localhost:3000/${key}`)
.then(data => data.json())
I also use API to record and update the ratings on items the db.json file using a PATCH.
function updateRating(item, key)
fetch(`http://localhost:3000/${key}/${item.id}`, { method: "PATCH", headers: { "Content-Type": "application/json", Accept: "application/json" }, body: JSON.stringify({ "rating": item.rating
Now, that we have data from our .json file we can go ahead and display each item on the webpage. I do this by storing each element of the db.json in an array of objects. Then from there I can Loop through this array using a forEach() method and create each card to display on the webpage.
.then((item) => { item.forEach(item => generateItem(item, key)); })
Once we have all our items showing on the webpage we can view an image, brief description, rating and price. we are also able to add the item to a cart for a checkout process.
I used an array of objects to store each element in the Cart. If an item is added to the cart the item will have an attribute quantity with a value of 1, if the same item is added again instead of duplicating the item test is run to see if the item already exist in the array and then increments the quantity value by 1.
let index = -1
for (let i = 0; i < cart.length; i++) {
if (cart[i].name === data.name) { index = i }
}
if (index >= 0) { cart[index].quantity += 1; }
else { data.quantity = 1; cart.push(data); }
With the combination of API and JSON this has giving me the opportunity to create this beautiful website.
The link to my project Repo is here:
https://github.com/Renardo1985/project-iconic-desserts.
I always appreciate feedback on my project as this is my very first project. looking forward to growing and doing a lot more projects in the future! Thank you and enjoy!
Top comments (0)