A vanilla Javascript project. Concentrating on show-hide functionality with the cart element - data with local JSON and LocalStorage
Async - await, {dynamic} elements, LocalStorage = Web Storage API, Classes, innerText manipulation.
Counter with map(), parseFloat()
and classList add - remove functions
and a lot of other methods
but no libraries
- First set up: selectors then determine the classes (
Products UI and Storage as empty-body classes
) and let cart an empty array, for last move event listener for DOMcontent loaded establishclass callers
. - Get Products session, fetch establising, async await (instead of old .then because i dont need a sequence) for fetch JSON, after we get back the data with the result itself and put it into json();
- originally the json content was set up to match with (Contentful) [https://www.contentful.com/]. I did not wanted to use that way so next object properties restucture field established. Using map() destructuring out elements from "field" property, so we have title price id image. In the return we give back the clean object.
- At UI Class I want to display products next.
return +=
will add for result variable instead of overwriting it. With backticks import theHTML
product element to the function body. Swap its elements to dynamic${}
attributes.
Right after theforEach
session access the variable what holds originally theHTML element
and refer back the result method.
- For Buttons, function create. Inside do a selection this [...spread] is a nice way to get instantly array, not Nodelist for selection, so I dont need to transorm it separately.
Next set up aforEach callback
, createvariables
,find()
method for id match.
event.target
set to disabled after clicked and text in cart.
Rest of the functions inside this one are//commented directly
. Structure of Storage follows the sequence of UI elements.- The counter can be found in this class as well.
setCartValue
works withmap()
. Just give back the value after the countings withinnerText
and must be parsed to let it be a number.- addCartItem adds a div with
classList
toHTML
with dynamic${}
elements. As closure must be appended to parent to declare position within the DOM.- Show and hide cart are simple class adding / removing methods.
- setupAPP for invoke
- Storage class will contain static methods, then I can reuse them in the UI Class.
For setItem the data must be
stringified
because storage can not store them as an Array.
- Next
JSON parse
to get items from the local storage.find()
return product if the id matches.- saveCart
JSON stringify
again- getCart if you have value already in the cart, itt will parse local storage. If empty then we get empty array.