BloX Calculator With What If Editing
Summary: m8dzr6 shares details about a BloX template designed for creating a simple what-if scenario calculator. The template allows users to edit default values in input fields, with an arithmetic script updating the results based on these changes. The post includes a brief technical overview, including a widget script that handles user input changes and performs calculations, rounding the output to two decimal places. A link to JavaScript math resources is also provided.
This BloX template demonstrates how you can leverage the input fields to create a simple calculator that can be used for what-if scenarios.
By default, the input fields are populated by the values in the value panel.
The field amounts can be edited by the user by entering new values to see how the outcomes change with the new values.
Technical Overview
This BloX template utilizes a BloX text field script in the output object and a widget script.
The BloX text field script runs the arithmetic on the default values and an event handler in the widget scripts updates the figure when new values are passed.
Widget Script:
widget.on('ready', ()=>{
$('.inputs', element).on('change', function(){
// Get field values
let firstValue = parseFloat($('#f1', element).attr('value'));
let secondValue = parseFloat($('#f2', element).attr('value'));
let thirdValue = parseFloat($('#f3', element).attr('value'));
// Do arithmatic
let outputValue = firstValue + secondValue + thirdValue;
// Round and set values of the output text field
let roundedOutputValue = outputValue.toFixed(2);
$('#output').text(roundedOutputValue);
})
})
0 comments
