Calorie counter using only HTML and JavaScript

This code here aims to allow users to type in how many of each thing that they have eaten and then at the end provide a total number of calories consumed.

On this page we use just three different dishes, but it could be any number, the code doesn't care. It will take all totals in divs with the class "result" and add them up.

The calculation for each individual dish is done with separate functions in this example here. I will leave it up to you to try and condense that into one function for all dishes.

You don't have to give credit for using this code, but I would greatly appreciate any links directly to this page or the front page, as it helps others find good free stuff like this.

Images provided (for free) by Pexels.com

Donuts yum!

Donuts are freaking amazing because they contain lots of sugar!

How many calories worth of donuts have you eaten?

Enter the amount of donuts you've eaten, and see how many calories that equates right here!

Number of donuts:

Number of calories: kcal

Food on a stick!

This looks pretty good to me, healthy even!

How many calories of food on stick have you eaten?

Enter the number of delicious grilled stuff you've eaten to see how many calories that is equal to.

Number of foodsticks:

Total calories: kcal

Healthy stuff

I hate browsing images of food, now I'm hungry.

Calories?

You've seen this before.

Amount:

Equals to: kcal