In the JS file, there are some issues I noticed
line 5:
const showCartButton = document.querySelector('.show-cart');
-- The show-cart class does not exist in the html; instead, try:
const showCartButton = document.querySelector('.show-cart-btn');
line 123:
document.getElementById('show-cart-btn').addEventListener('click', function() {
console.log('Show Cart button clicked');
document.getElementById('cart-modal').style.display = 'block';
updateCartDisplay();
});
-- Similar issue; 'show-cart-btn' is a class, not an id; instead try:
document.querySelector('.show-cart-btn').addEventListener('click', function() {
console.log('Show Cart button clicked');
document.getElementById('cart-modal').style.display = 'block';
updateCartDisplay();
});
line 4,5 (different topic):
const cartButtons = document.querySelectorAll('.add-to-cart-btn');
const showCartButton = document.querySelector('.show-cart');
-- These variables aren't being used, and don't have to declared / initialized; line 3 is being referenced however. I would delete these lines.
In general,
double check your code to make sure everything matches spelling-wise.
If the code ran before you implemented the new API, then I think the issue probably involves names shadowing each-other.
Within the 2 files that are visible to me, which you provided, I can't see how the external code interacts with yours -- so, all I can do is guess. It is pretty common in JS to have an import statement, where the variable names might conflict with one's code.
Switching IDE's might offer new troubleshooting tools (if you have a second one you use), or renaming everything to something unique. Honestly, I'm not sure this is the issue.
There are probably other reasons your code would stop working after implementing outside code:
there might be some downloading of dependencies you might have to do ahead of time; look at any downloading requirements for the API.
Hopefully the notes I left prior help out; I know this question is a few days old. I wish I could give you a definitive answer, but this is the best I've got (until ~I learn more).
- Cheers