Code explanation
---------------------------------------------------------------------------------------------------------------------
First of all, I would say that my script.js is inefficient, because some parts of code were repeated more than once.
I have used helper files such as model.js and modelCart.js. The idea is fully taken from the given ilearn examples.
Model.js has my product details and function that can be called by passing product id to it and it will return all
details of the product with the passed id. Also, there is a function that returns all products after been called.
Therefore, the reason model.js created is to get the product details with id and all product details at once.
Similarly, ModelCart.js has a function that sends cart contents. Also, i have used handlebars only for product name and
price which is shown as soon as we open the main page. I was not been able to use it for showing other information, and
honestly could not figure it out.
---------------------------------------------------------------------------------------------------------------------
For task 1, I simply used handlebar to send the all product details.
---------------------------------------------------------------------------------------------------------------------
For task 2, I created data-pid in html, and in script,js i am getting that id by this.dataset.
With this id i am getting product details by calling function from model.js. Then i am uploading everything to my html
(product name and product price). This handle is going to work only after any product name is pressed.
As regards close button, i simply created eventlistener, which will work after close button is pressed. Basically,
i am eptying the unordered list, which has product img description and etc.
---------------------------------------------------------------------------------------------------------------------
Task 3: Here, i have added the provided form to the unordered list as list with the product details (done in task 2 simultaneously).
However, it was sending to the cart contents.
To fix this problem and stay in the page while updating cart, i added $.post which is sending the data received from
the form, and the data is gotten with the help of $().serialize() function.
---------------------------------------------------------------------------------------------------------------------
Task 4: Here the modelCart.js is used as i needed the cart details to show its current state. If my cart is empty, which
means its length is 0, then i just simply send the string to the html page, otherwise i am going through cart information
with the help of loop as i may have multiple products in the cart. Then sending every needed information to the html page.
The state is shown as soon as we open the main page.
---------------------------------------------------------------------------------------------------------------------
Task 5: i have created an event listener on the text that is been sent in task 4 (cart state). Here i have created
temporary cart which is empty at the beginning and will be updated as soon as we add product into it. (To be honest, i have
not tried to use main cart and test if it gives me the same result. So, simply created tempCart). So, as we click
on the cart state, i am going through loop again to get cart details and uploading them, and i could not make it automatic.
I mean, when we add item to cart, my cart state is updated, but to update the cart details, i need to click on my cart state.
---------------------------------------------------------------------------------------------------------------------
Task 6: I have used event listeners here as well, one of the on name heading and another one on price heading in html.
Sorting functions are referenced inside the script.js. But, i had a problem, when i sort it, i was not being able to do anything
further, so i created function doNotRepeat()(the name is like this, because i did not want to copy and paste the whole
code again after i click product detail headings). So, after that i was able to do all needed operations after sorting by
price or name, but i could not sort by name after i sorted by price and vise versa. So, i created two functions, which
contain sort by name and sort by price. In those functions i have included the opposite function (sortPrice in sortName,
sortName in sortPrice), and i am calling them in the event listeners to make infinite loop(manually).
To make it clear, when i sort by price, i did not have event listener of name and vise versa. (if could not explain it
properly, feel free to ask questions on this task)
---------------------------------------------------------------------------------------------------------------------
Task 7: the first part of it i did in task 3 and 5, because in the former i am adding or updating the product quantity
in the cart, and in task 5 getting the cart details as table after clicking on the cart state. It should be noted that
i used event.preventDefault() to stay on the main html while the cart being updated. As regards the removing or resetting
the product quantity in the cart, i have used the same logic. Just copied and pasted to another listener which is activated
by second form.