Hi, your solution looks pretty good!
I looked at your code, and I'll leave a couple of javascript ideas that hope you find useful.
Try to separate your DOM manipulation into functions. For example, if you find that you use too often something like this
document.querySelector('.when-clicked').style.display = "none";
you could introduce functions similar to this
function hide(selector) {
document.querySelector(selector).style.display = "none";
}
and use them like this
hide('.when-clicked');
Avoid using DOM elements as data, instead put data in variables and update the DOM when data changes.
For example, instead of operating directly on an element like this
function minus() {
document.getElementsByClassName("num")[0].innerHTML--;
document.getElementsByClassName("num")[1].innerHTML--;
// ...
}
function plus() {
document.getElementsByClassName("num")[0].innerHTML++;
document.getElementsByClassName("num")[1].innerHTML++;
// ...
}
you could operate on a variable and and update the DOM when the variable changes
let quantity = 0
function minus() {
quantity--;
updateDOM();
}
function plus() {
quantity++;
updateDOM();
}
function updateDOM() {
const nums = document.getElementsByClassName("num");
for (let num of nums) {
num.innerHTML = quantity;
}
}
lastly, leverage the power of fors when applicable, its easier than going through each element in an array.
Hope this is useful and gives you some ideas for your next challenge.
