Javascript framework for creating web calculators

<p> The other day I needed to make a web calculator. It was not the first calculator that I wrote, and memories of JavaScript encoding the logic of computation, every time anew, did not add enthusiasm at all. Obviously, something had to be done with this, separating the logic of the calculations, its on each site, from the code and algorithm of the calculator itself (“to see the value selected by the user - to calculate how much it costs”).







<p> The first thing that comes to mind in such cases is the use of standard arrays or objects. But this approach is too heavy. It would be much more convenient to use hashes, but their support in JavaScript is very limited. That's why I decided to use the Prototype library, in which there is a practically full Hash class , and to describe the logic of the calculator and the form field with calculations . This allowed us to make the calculator code quite simple (although I see a wide field for refactoring here) and expandable.

')

var calculations = new Hash({})



function calcPrice() {

var f = document.forms['calculator']

var price = 0

calculations.each(function(pair) {

if(f[pair.key] == null){

alert(pair.key)

}

if(pair.value['fieldtype'] == 'counter' && f[pair.key].value.match(/^\d+$/)){

price += f[pair.key].value * pair.value['price']

}

if(pair.value['fieldtype'] == 'radio'){

val = getRadioValue(f[pair.key])

} else {

val = f[pair.key].value

}

if(pair.value['fieldtype'] == 'radio' || pair.value['fieldtype'] == 'select'){

if(val != 0){

price += pair.value['prices'][val]

}

}

})

$('pricevalue').innerHTML = price + ' .'

}



<p> To get the values ​​of radio buttons, use the auxiliary function getRadioValue .



function getRadioValue(radio) {

for(i = 0; i < radio.length; i++){

if(radio[i].checked)

return radio[i].value

}

return 0;

}



<p> The keys of the calculations hash are the names of the form fields, the values ​​are the hashes with the rules for calculating the price for this field. Each rule contains a fieldtype key indicating the type of the field, as well as other keys describing how to handle the field (in my case price and prices). This architecture allows, if necessary, to easily increase the functionality and complexity of the calculator, without rewriting the previously created code. I used three types of fields. </ P>



<p> In addition, the rules in the calculations hash can be modified dynamically, for example, when AJAX-loading parts of the form. </ p>

Field counter

<p> Text or other field in which the quantity is indicated; the amount is calculated by multiplying the number entered by the value of the price key. </ p>

calculations['units'] = $H({ fieldtype:'counter', price:5.50 })

<input type="text" value="2" name="counter">

Select field

Select a list of several items. Each element has its own alphanumeric identifier and a certain value. The dependency identifier — the price is set by the hash in the prices key of the rule.

calculations("color") = $H({ fieldtype:'select', prices:$H({white:20.95,red:49.55}) })

<select name="color">

<option value="white"></option>

<option value="red"></option>

</select>

Radio field

Similar to the select field, except that radio buttons are used for selection.

calculations("color") = $H({ fieldtype:'radio', prices:$H({white:20.95,red:49.55}) })

<input type="radio" name="color" value="white" />

<input type="radio" name="color" value="red" />