I am in search of a solution to create a user-friendly nutrition calculator that can analyze the variance between two different food items and display the variations in their nutritional content. However, I'm encountering a couple of hurdles:
- Although the code is functioning properly, it returns NaN values and sometimes calculates as 0 when the quantity is increased.
- The current code only utilizes the first textbox for linking values, so changing values in the second textbox doesn't affect anything. Additionally, I'm struggling to figure out how to compute the difference between the units in the first textbox and those in the other textbox. Do I need to create another function for the second food item?
Here's the code I currently have:
var stocks = [
// Nutritional data goes here
];
function Stock (data) {
// Function logic
}
stocks = stocks.map(Stock)
var $selects = $('.selectStock')
var $quantity = $('#numberOfStocks')
var $comparisonResult = $('.comparison .result')
// Remaining JavaScript code
.side {
// CSS styles for side div
}
.sideone {
// CSS styles for sideone div
}
.mid {
// CSS styles for mid div
}
.comparison {
// CSS styles for comparison div
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<meta name="viewport" content="width=10px, initial-scale=1.0">
</head>
<body>
<label>
<div class = "side">
Amount:
<input type="number" id="numberOfStocks" value="1" min="0" />
</div>
<br>
<br>
<br>
<br>
</label>
<div>
<div class="sideone">
<h2>First Item<span class="servingUnit"></span>:</h2>
<select class="selectStock">
<option value="-1">Pick a food!</option>
</select>
</div>
<label>
<div class = "side">
Amount:
<input type="number" id="numberOfStocks" value="1" min="0" />
</div>
<br>
<br>
<br>
<br>
</label>
<div class="sideone">
<h2>Second Item<span class="servingUnit"></span>:</h2>
<select class="selectStock">
<option value="-1">Pick a food!</option>
</select>
<br>
<br>
</div>
<div class="comparison side">
<h2>Comparison:</h2>
<br>
<br>
<div class="result"></div>
</div>
</div>
</body>Your help and guidance on this matter are greatly appreciated. Thank you!