Two solutions, which is best practice

Hey everyone, I have a simple counter element that can be increased and decreased, this is the way I chose to do it.

let numberOfItems = document.querySelector('.number-of-items')
let decreaseItem = document.querySelector('.decrease-item');
let increaseItem = document.querySelector('.increase-item');

decreaseItem.addEventListener('click', subtractItem)
increaseItem.addEventListener('click', addItem)

let counter = 0;

function addItem(){
    counter += 1;
    numberOfItems.innerHTML = counter;
}

function subtractItem(){
    if (counter === 0){
        alert("You don't have this item in your cart.")
    }
    else {
        counter -= 1;
        numberOfItems.innerHTML = counter;
    }
}

let numberOfItems = document.querySelector('.number-of-items')
let decreaseItem = document.querySelector('.decrease-item');
let increaseItem = document.querySelector('.increase-item');

decreaseItem.addEventListener('click', subtractItem)
increaseItem.addEventListener('click', addItem)

let counter = 0;

function addItem(){
    counter += 1;
    numberOfItems.innerHTML = counter;
}

function subtractItem(){
    if (counter === 0){
        alert("You don't have this item in your cart.")
    }
    else {
        counter -= 1;
        numberOfItems.innerHTML = counter;
    }
}

NazCodelandOP•9/23/22, 4:20 PM

I seen this solution online, I am wondering, which is the better way of doing it

NazCodelandOP•9/23/22, 4:21 PM

Joao•9/23/22, 4:24 PM

I find your solution to be better, selecting the elements that are going to be modified and store them as global variables rather than running the selector each time. Also the handler is out of fashion in favor of , mainly because you can provide additional options to it (not in this case though).

Joao•9/23/22, 4:26 PM

While I'm at it I would suggest not to use to display a notification, but instead use a separate function or make use of a library for that purpose. Also, the function should be responsible for exactly that. Whether the item in question is on the cart or not should be validated before hand.

Joao•9/23/22, 4:28 PM

I assume there's more to it than the example you are showing here?

NazCodelandOP•9/23/22, 4:30 PM

As for my code, that was all I had so far. But, I see what you mean about making do only what it's designed to do. I'm thinking, I would have to make another function that checks for the logic and from that function call the function otherwise, return a msg saying

MarkBoots•9/23/22, 4:33 PM

you could combine the add/substract in one
something like this

NazCodelandOP•9/23/22, 4:34 PM

I was thinking about that too, that's neat. Is the Math a built-in module or library?

MarkBoots•9/23/22, 4:34 PM

its in JS

NazCodelandOP•9/23/22, 4:34 PM

NazCodelandOP•9/23/22, 4:38 PM

thank you @joao6246 and @MarkBoots, I think I can combine both of your suggestions into a really nice compact modularized code, sounds fancy but I'll share in a bit

NazCodelandOP•9/23/22, 4:55 PM

NazCodelandOP•9/23/22, 4:56 PM

I like parts of this and also don't like some parts hmm

NazCodelandOP•9/23/22, 4:57 PM

I don't like how, is above the eventListners, for some reason, I think it makes more sense if they are below it and together with the other function

NazCodelandOP•9/23/22, 4:58 PM

Another thing I don't like is, that I am checking for logic within the arrow function of the decreaseItem eventListner

NazCodelandOP•9/23/22, 4:58 PM

in terms of code layout/looks, I think this makes it most readable:

NazCodelandOP•9/23/22, 5:00 PM

one sec

MarkBoots•9/23/22, 5:07 PM

how about this?
https://codepen.io/MarkBoots/pen/MWGEXrY?editors=1010

CodePenMark Boots

MWGEXrY

...

NazCodelandOP•9/23/22, 5:13 PM

yeah that makes sense and the code order is readable, I like that

NazCodelandOP•9/23/22, 5:13 PM

I tried doing something like this but it didn't work

NazCodelandOP•9/23/22, 5:13 PM

the only time it would give that alert message is if the items == 0 and someone is trying to decrease

NazCodelandOP•9/23/22, 5:13 PM

I thought that would work but no beuno

MarkBoots•9/23/22, 5:16 PM

you didnt do items += amount.
put it in your else before the innerhtml

NazCodelandOP•9/23/22, 5:17 PM

oh nice! I missed that, good catch

NazCodelandOP•9/23/22, 5:20 PM

something like that seems clean...ish

NazCodelandOP•9/23/22, 5:21 PM

if checkCart has the job of checking to see if the cart is empty or not and returning true or false based on that

NazCodelandOP•9/23/22, 5:21 PM

If I am trying to make my code 'modular', If the cart is empty I would have to make another function that get's called to alert that it's empty

NazCodelandOP•9/23/22, 5:23 PM

something like this,

NazCodelandOP•9/23/22, 5:25 PM

is this too much separation or if this is what they mean by modularizing, would this be a good solution ? @MarkBoots @joao6246

Joao•9/23/22, 6:10 PM

That looks good, I think if we take things to the next level we start seeing more practical uses for these two functions. Let's assume that the items variable is no longer a simple number, but an array of objects in the cart. Actually let's call it cart, and I'll add a unique id for each item.

Each object has a name, price and quantity (how many times it appears in the cart). Now, you can no longer simply increase/decrease some variable by one, you have to:
1) Find the right item.
2) Increase/decrease the qty property on that item.
2.a) If item is not found in the cart, create the item and add it to the array with qty 1.
2.b) If item qty drops to 0, remove it from the array.

Joao•9/23/22, 6:39 PM

Here's a baseline you can start with, with some hints. The weird comments are for documentation. If you put them on VSCode and hover over the function name it'll popup with the description. I've put a link to the array methods that you can use to find, add and remove items from an array.

Joao•9/23/22, 6:39 PM

NazCodelandOP•9/28/22, 9:43 PM

@joao6246 sorry for the late reply, been MIA. Have some time now and I went wrote everything down as you provided, I did not know we can add description to code, that is awesome, thank you for showing me that. Thank you for going out of your way for the help and the additional links for me to look into. I will look into them and msg you back, thank you so much!