More Efficient Javascript

Code Feedback
1

I made a calculator for my mom for Mother’s :white_flower: day to help with her granola business, it’s the first thing I’ve designed and built on my own with JavaScript so I know there’s a cleaner more efficient way to have written it. The goal is to make it simple for her to enter a recipe name, then go through the form to get the cost for each ingredient in that recipe and then a total price per an ounce. These values go into a table and once she’s finished adding ingredients I want her to be able to export it as a PNG or PDF. I also want to add a delete option on the table so she can remove an entry if she made a mistake.

I have most of those features working but I feel like there’s definitely a cleaner, more efficient way to have written my code. Does anyone have any suggestions or tips for cleaning it up and/or how to add the export functionality? :slightly_smiling_face:

My codepen.

2

First, I would suggest making a better HTML. Staring at this for a long time would strain the users eyes. For instance, here is some simple webpages I made to show off some simple styling:

–> https://codepen.io/Mike-was-here123/full/rQXpGd
–> https://codepen.io/Mike-was-here123/full/MLLprL
–> Template: https://codepen.io/Mike-was-here123/full/pqRVpb

Your idea would work great with this theme.

Also, use flexbox. It is a very good structuring system.

Notes

Please hit the reply button or I do not get notified.

Helpful tools–> https://codepen.io/Mike-was-here123/post/check-out-these-sites