javascript
$w.onReady(function () {
$w(“#compareButton”).onClick(() => {
const fuelEfficiencyVehicle2 = parseFloat($w(“#efficiencyVehicle2”).value);
if (isNaN(fuelEfficiencyVehicle2) || fuelEfficiencyVehicle2 <= 0) {
$w(“#comparisonResultText”).text = “Please enter a valid fuel efficiency for Vehicle 2.”;
return;
}
const latestData = $w("#dataset1").getCurrentItem();
if (!latestData) {
$w("#comparisonResultText").text = "Error: No data found. Please ensure you've entered data on the main calculator page.";
return;
}
const fuelEfficiencyVehicle1 = latestData.fuelEfficiency;
const annualDistance = latestData.annualDistance;
const fuelPrice = latestData.fuelPrice;
const annualFuelCostVehicle1 = (annualDistance / fuelEfficiencyVehicle1) * fuelPrice;
const annualFuelCostVehicle2 = (annualDistance / fuelEfficiencyVehicle2) * fuelPrice;
const costDifference = annualFuelCostVehicle1 - annualFuelCostVehicle2;
let comparisonResult;
if (costDifference > 0) {
comparisonResult = `Vehicle 1 is more economical, saving $${Math.abs(costDifference).toFixed(2)} annually compared to Vehicle 2.`;
} else if (costDifference < 0) {
comparisonResult = `Vehicle 2 is more economical, saving $${Math.abs(costDifference).toFixed(2)} annually compared to Vehicle 1.`;
} else {
comparisonResult = "Both vehicles are equally economical based on annual fuel costs.";
}
$w("#comparisonResultText").text = comparisonResult;
});
$w("#resetButton").onClick(() => {
$w("#efficiencyVehicle2").value = "";
$w("#comparisonResultText").text = "";
});
});
This is the overview/Explanation of the code;
Certainly! The code snippet provided for the comparison calculator on a Wix site is designed to compare the annual fuel costs of two vehicles based on user inputs and database-stored values. Here’s a breakdown of how it works:
Code Overview
javascript
$w.onReady(function () {
This line ensures that the code inside it will run only after the Wix page elements have finished loading, ensuring that all elements can be interacted with via code.
$w("#compareButton").onClick(() => {
This sets up an event listener for a click event on an element with the ID compareButton. When this button is clicked, the code inside this function will execute. This button is meant to trigger the comparison calculation.
const fuelEfficiencyVehicle2 = parseFloat($w("#efficiencyVehicle2").value);
This retrieves the user’s input for Vehicle 2’s fuel efficiency from an input element with the ID efficiencyVehicle2, converts it to a floating-point number (to ensure it’s treated as a numerical value for calculations), and stores it in the variable fuelEfficiencyVehicle2.
if (isNaN(fuelEfficiencyVehicle2) || fuelEfficiencyVehicle2 <= 0) {
$w("#comparisonResultText").text = "Please enter a valid fuel efficiency for Vehicle 2.";
return;
}
This checks if the input for Vehicle 2’s fuel efficiency is not a number (isNaN) or is less than or equal to zero. If either condition is true, it displays an error message in an element with the ID comparisonResultText and stops further execution of the function to prevent incorrect calculations.
const latestData = $w("#dataset1").getCurrentItem();
This retrieves the current item (the latest or selected entry) from a dataset connected to a collection (which stores Vehicle 1’s data) with the ID dataset1. The retrieved data is stored in the variable latestData.
if (!latestData) {
$w("#comparisonResultText").text = "Error: No data found. Please ensure you've entered data on the main calculator page.";
return;
}
This checks if any data was successfully retrieved from the dataset. If not, it displays an error message in the comparisonResultText element and stops further execution.
const fuelEfficiencyVehicle1 = latestData.fuelEfficiency;
const annualDistance = latestData.annualDistance;
const fuelPrice = latestData.fuelPrice;
const annualFuelCostVehicle1 = (annualDistance / fuelEfficiencyVehicle1) * fuelPrice;
const annualFuelCostVehicle2 = (annualDistance / fuelEfficiencyVehicle2) * fuelPrice;
const costDifference = annualFuelCostVehicle1 - annualFuelCostVehicle2;
These lines calculate the annual fuel costs for both Vehicle 1 and Vehicle 2 using the formula (Annual Distance / Fuel Efficiency) * Fuel Price, where fuelEfficiencyVehicle1 comes from the dataset, and fuelEfficiencyVehicle2 is user input. The difference in annual fuel costs between Vehicle 1 and Vehicle 2 is then calculated and stored in costDifference.
let comparisonResult;
if (costDifference > 0) {
comparisonResult = `Vehicle 1 is more economical...`;
} else if (costDifference < 0) {
comparisonResult = `Vehicle 2 is more economical...`;
} else {
comparisonResult = "Both vehicles are equally economical...";
}
Based on the value of costDifference, this section determines which vehicle is more economical or if they are equally economical. It prepares a message accordingly.
$w("#comparisonResultText").text = comparisonResult;
This displays the prepared comparison result message in the element with the ID comparisonResultText.
});
$w("#resetButton").onClick(() => {
$w("#efficiencyVehicle2").value = "";
$w("#comparisonResultText").text = "";
});
});
This sets up an event listener for the resetButton. When clicked, it clears the input for Vehicle 2’s fuel efficiency and the comparison result text, allowing users to perform a new comparison.
In summary, this code is responsible for fetching input data, performing a comparison calculation between two vehicles based on fuel efficiency and other parameters, and displaying the result of this comparison to the user.