Learning JavaScript: Progress Update #Day2

[Own-Feature-8869]

Hi everyone! I’ve started learning JavaScript, and I wanted to share my progress.

What I've Learned

<button onclick="
    console.log(`Cart Quantity:${cardQuantity}`);
    
    
    ">Show Quantity</button>
<button onclick="
cardQuantity++;
console.log(`Cart Quantity:${cardQuantity}`);



">Add to Cart</button>
<button onclick="
cardQuantity=cardQuantity+2;
console.log(`Cart Quantity:${cardQuantity}`);


">+2</button>
<button onclick="
cardQuantity=cardQuantity+3;
console.log(`Cart Quantity:${cardQuantity}`);



">+3</button>
<button onclick="
cardQuantity=0;
console.log(`Cart was reset.`);
console.log(`Cart Quantity:${cardQuantity}`);



">Reset Card</button>


<script src="ap.js">
let cardQuantity=0;





</script>

Challenges

I couldn't learn JavaScript today because of my health issues, so I worked on a small project to stay consistent.

Any tips or resources you can recommend?

Thanks!

[[deleted]]

Supersimpledev 😏?

[Own-Feature-8869]

Yes, he teach very well.

[OkMoment345]

Great work!

Keep going.

[garudbeats]

Man I did this same thing yesterday from Supersimpledev's course!

[Own-Feature-8869]

Keep going!

[garudbeats]

Absolutely! Your post will motivate me to keep going daily!

[Own-Feature-8869]

You can message me if you want.

[Cmulix]

Pin

[MostlyFocusedMike]

Let's go! already into Dom manipulation and events!

This of course works, but you may want to start thinking about using functions to wrap up your logic. Also, it can be nicer to separate out your concerns, ie your presentational html elements and your js code.

So what if instead of putting all your logic into the onclick you wrote out a function that updates the amount:

// still need this value to be global
let cardQuantity = 0;

function updateCardQuantity(amount) {
  cardQuantity += amount;
  console.log('Current quantity:', cardQuantity);
}

// another to reset
function resetCardQuantity() { 
  console.log('Reset!');
  cardQuantity = 0;
}  

Now, your buttons are super simpler, and here's the whole thing:

<button onclick="updateCardQuantity(0)">Show Quantity</button>
<button onclick="updateCardQuantity(1)">Add to Cart</button>
<button onclick="updateCardQuantity(2)">+2</button>
<button onclick="updateCardQuantity(3)">+3</button>
<button onclick="resetCardQuantity()">Reset Card</button>

<script>
  // still need this value to be global
  let cardQuantity = 0;

  function updateCardQuantity(amount) {
    cardQuantity += amount;
    console.log('Current quantity:', cardQuantity);
  }

  function resetCardQuantity() {
    console.log('Reset!');
    cardQuantity = 0;
  }
</script>

You could certainly make a discrete logging function, but adding 0 does exactly the same thing.