Can anyone provide me with some tips on the best practices for structuring JavaScript code? I am working on creating a tool for a smoothie shop owner where customers can select ingredients, and we need to calculate the total amount of sugar and vitamins. However, I am struggling to figure out how to combine all these parameters in JavaScript.
EarlyBirdSmoothie: Apple - Vitamin A = UI200, Vitamin C = UI300, Sugar = 200mg
Pear: Orange C = UI3000, Vitamin A = UI1000, Sugar = 250mg
Orange: Vitamin C = UI3000, Sugar = 250mg
Each fruit has a unique combination of Vitamins and Sugar, e.g., Orange = Vitamin C 3000UI + 250mg Sugar
Product builder with an overview: When a staff member orders a smoothie with Apple, Pear & Orange, we need to calculate the total amount of Vitamins UI and Sugar MG, along with individual Vitamin and Sugar content of each ingredient.
Editing option for created products: Ideally, we should be able to create a list of bestselling soups that can be reused, and allow for adding or removing ingredients from the soup.
What is the best technique to achieve this and how can it be done?
I have made a rough estimation of how I would approach this to get started:
Here is my current mockup:
// Custom function
function calculateTip() {
// Store the data of inputs
var vitaminTypes = document.getElementById("vitaminTypes").value;
var vitaminAmount = document.getElementById("vitaminAmount").value;
var sugarAmount = document.getElementById("sugarAmount").value;
var ingredientTypes = document.getElementById("ingredientTypes").value;
// Quick validation
if(fruitAmount === "" || serviceQuality == 0) {
window.alert("Please enter some values to get this up and running!");
return; // this will prevent the function from continuing
}
// Check to see if this input is empty or less than or equal to 1
if(numFruits === "" || numFruits <= 1) {
numPeople = 1;
document.getElementById("each").style.display = "none";
} else {
document.getElementById("each").style.display = "block";
}
// Do some math!
var total = (vitaminType * vitaminAmount) ;
total = Math.round(total * 100);
total = total.toFixed(2);
// Display the content!
document.getElementById("totalAmount").style.display = "block";
document.getElementById("amount").innerHTML = total;
}
// Hide the content info amount on load
document.getElementById("totalAmount").style.display = "none";
document.getElementById("each").style.display = "none";
// Clicking the button calls our custom function
document.getElementById("calculate").onclick = function() { calculateAmount(); }