How to change javascript calculator code?

Question

I made this calculator with basic javascript knowledge: https://jsfiddle.net/7vmtuzsL/4/

Parameters for specific food are listed in this structure:

<option value="110,1.24,0,23.09">Chicken breast</option>
<option value="18,0.2,3.92,0.88">Tomato</option>
<option value="374,1.04,80.43,8.11">Rice</option>

How can I change this style to have more organized and transparent structure?

For example 110 are calories, 0.2 are fats, 3.92 are carbs and 0.88 are proteins.

I would like to add 20 parameters for foods like all vitamins and minerals. I figured out that these structure is not good because you can easily make mistake and don't know which parameter belongs to which category.

Any ideas how to name each value without reconstruction of entire code?

Answer 1

Then you can have an array of objects (array of food) and for each object (food) have its properties:

arrayOfFood = [
    apple: {
        cal: 20,
        fat: 0.2
    },
    pear: {
        cal: 25,
        fat: 0.3
    }
]

Answer 2

You can use an object like the following:

    nutritionValue = {
       cal: [110, 18, 374, ...],
       fats: [0.2, ....],
       carbs: [3.92, ....],
       proteins: [0.88, ....],
       vitamins: [....],
       minerals: [....]
    }

Answer 3

You can use data attributes eg

<option data-calories="110" data-fats="0.2" data-carbs="3.92" data-proteints="0.88" value="chicken breast">Chicken breast</option>

And to get the selected option data use this:

console.log($('select > option:selected').data())

Answer 4

Use the data attribute to insert logic data on HTML tags.

I use the old way of handling them with getAttribute , but if you know your users platform is modern you can use the dataset approach .

 var foodSelector = document.getElementById('food-selector'); function getFoodData(option) { var info = { calories: parseFloat(option.getAttribute('data-calories')), fats: parseFloat(option.getAttribute('data-fats')), carbs: parseFloat(option.getAttribute('data-carbs')), proteins: parseFloat(option.getAttribute('data-proteins')) }; return info; } foodSelector.addEventListener('change', function(evt) { var info = getFoodData(evt.target.options[evt.target.selectedIndex]); console.log(info) })

 <select id="food-selector"> <option data-calories="110" data-fats="1.24" data-carbs="0" data-proteins="23.09">Chicken breast</option> <option data-calories="18" data-fats="0.2" data-carbs="3.92" data-proteins="0.88">Tomato</option> <option data-calories="374" data-fats="1.04" data-carbs="80.43" data-proteins="8.11">Rice</option> </select>

In response to the comments:

Separation of concerns is valuable, but you don't always have that kind of control over your code. Maybe you need the attributes for CSS or maybe you get it from some external source.

Anyway, below is a snippet showing how one could keep the data in JavaScript and only include the minimum required HTML in the website:

 //Find existing elements var foodSelector = document.getElementById("food-selector"); //Data var data = [{ calories: 110, fats: 1.24, carbs: 0, proteins: 23.09, name: "Chicken breast", node: document.createElement("option") }, { calories: 1120, fats: 124, carbs: 10, proteins: 2.19, name: "Tomato", node: document.createElement("option") }, { calories: 180, fats: 1.84, carbs: 19, proteins: 9.09, name: "Rice", node: document.createElement("option") }, ]; //Append nodes data.forEach(function(dataPoint) { dataPoint.node.textContent = dataPoint.name; foodSelector.appendChild(dataPoint.node); }); //Listen for event foodSelector.addEventListener("change", function(evt) { var dataPoint = data.find(function(d) { return d.node === foodSelector.options[foodSelector.selectedIndex]; }); console.log(dataPoint); });

 <select id="food-selector"></select>