My shopping List challenge (wait what?). Code explained

I challenged myself. I think getting DOM elements and interacting with them is more what a beginner like me would like to learn. I’ve made this shopping list “app” that gets HTML elements, creates new elements, interacts with the created elements, etc. I have added plenty of comments to explain exactly what every line does.

Maybe someone can help me fix it these 2 issues:

1- the “animated bounce” class is added to the new list items, but it triggers only after adding yet another item, so it targets the wrong element so to speak.

2- I can’t seem able to add a function that prevents the user from submitting an empty element.

Both of your additions make a lot of sense : ) I’ll implement them tomorrow. And thank you! It’s so rewarding really, the first month it’s all like, what am I even learning…Then it clicks and things make sense, oh yea I could use this here, could use this other thing to do that, etc.

Next it would be to add an API to get recipes and create a personalized shooping list with the choosen recipe, out of my league but something to strive for.

You don’t need to write an api! You can use one another person has made such as https://spoonacular.com/food-api. It shouldn’t be too far out of your league especially once you finish some of the other front-end projects that access an api.

Oh no I didnt mean write one, but to just use it, thanks to point out that one I’ll give it a shot.