Arrow functions are a shorter way to write a function, and they are everywhere in modern JavaScript. Learn the short forms, the object-return trap, and the one place you shouldn't use them.
console.log is the fastest way to see what your code is doing, until it prints 300 lines and you can't find the one that matters. Label your logs, log objects properly, use console.table and console.group, and clean up before you ship.
Separate missing, invalid and numeric form input, then compare normalized quantities without treating an empty field as zero.
for...of gives you the values of an array. for...in gives you the keys of an object, as strings. Mix them up and you get indexes instead of items, or worse.
Trace a const reassignment inside an input handler, preserve the original list, and verify that filtering and clearing the query both work.
Backticks and ${} replace most string gluing with +. You get readable text, values inside it, and multi-line strings without \n everywhere.
"5" + 1 is "51" because + joins text before it adds numbers. Convert values on purpose with Number(), String() and parseInt(), check for NaN, and stop letting JavaScript guess for you.
"Uncaught TypeError: Cannot read properties of undefined" means you used a value that wasn't there. Read the message, find the line, check what is actually undefined, then fix the cause instead of hiding it.
Your HTML file opens blank, shows as text, or downloads instead of rendering. Check the extension, the file:// open path, the doctype and a missing closing tag before you rewrite the page.
Measure two boxes with the same declared width, calculate padding and border, and reproduce the 100% width overflow mistake before fixing it.
Compare text alignment, a centred block and two-axis child placement, then test why centering needs available space.
Diagnose an ID rule that defeats a reusable note modifier, then keep the ID for navigation while moving presentation to classes.