@IzykGit
Posted
Even though you mentioned your struggles, your project still turned out pretty well. Also extra points for SEO!
You expressed that you do not know how to test your application. The easiest way to test your application is to use console.log()!
Create them in the function, outside the function, test to see if it returns a certain value, or just simply use it to return the data you are working with. It's also very helpful to label your console.logs. I would do something like this:
console.log("Returning array of selected products here:", selectedProducts)
console.log("Returning value of total prices here:", totalPrices)
What you would be testing for is bugs. Testing to see if functions return their intended value, if a button has been clicked, and if your fetched data is actually being fetched. Console.log is a very powerful tool.
Also you mentioned that you really struggled with this project using vanilla JS and attempted to use React and Vue. You didn't mention if you already knew these two frameworks but before jumping right into a framework with a project like this, get good with the basics of javascript and then start with the very basic with frameworks.
Starting with a project like this on a framework will leave you only more confused with the framework instead of improving your skill with it.
Now the for loops are fine but remember with arrays you also have .map, .filter, .reduce, and more to help reduce some of the javascript you might have to write.
Last thing! On your project, if the user selects every product and then hits confirm, the container is too big for the screen! You can make a div scrollable.
Try something like this:
.products {
height: 20rem;
max-height: 30rem;
overflow-y: scroll;
}
Adding overflow-y and then the attribute scroll, will make that div scrollable along the Y axis.
If you want to check out my javascript or styling click here
Keep up the good work! :)
Marked as helpful
