Hashigo is spreadsheet style programming on the DOM.
Perfect for tasks like calculating totals for a shopping cart, or writing validation.

Hashigo has a wonderful shorthand that takes a selector and returns the value in the HTML element it selects. Functions that use this shorthand must be evaluated and are referred to as 'formulas'.




Hashigo has two modes; formula and function.

'Formula' mode:

//Example :
$('#a').calc('${#b} + ${#c}');

'Function' mode:

$(selector).calc(function[,array of selectors,options]);
//Example :          
$('#a').calc(function(b,c){return {b + c}),['#b','#c']);

event: string of events
triggerOnLoad: boolean, run the function or formula right away
bindFn: function,  the function used to bind functions to element events

  defaultOptions = {
    event: 'change',
    triggerOnLoad: true,
    bindFn: function($elements,fw){
      //Assign event handlers on variable elements
      $elements.live(event, fw);

The examples below show you how hashigo can simplify your code.
Note: these examples use the excellent jQuery and Underscore.js libraries.

Table sum

Let's sum the values in this table and put the
result in the cell with the ID 'result'.

16 +

Without Hashigo :

//Select our table elements with jQuery
var $cells = $('#sum td:not(#result)');

//Map our table cells to their values
var values = $cells.map(function(i,element){return $(element).text();});

//Reduce our values to a single value 'sum'
var sumOfValues = _(values).reduce(0,function(memo,val){return memo + parseFloat(val);});

//Set our result

With some Hashigo :

$('#result').calc('_(${#sum td:not(#result)}).reduce(0,function(memo, value){' +
        'return memo + parseFloat(value);' +

A hypotenuse calulator

Every right angle triangle has a hypotenuse. A hypotenuse is the longest side on any right angled triangle.

Here is a simple calculator you can use to calculate the hypotenuse of a right angled triangle:

adjacent =
opposite =
hypotenuse = sqrt(a^2 + o^2)

Ye olde way:

        var a = $('#a').val(),
            o = $('#o').val();
        $('#h').val(Math.sqrt(Math.pow(a,2) + Math.pow(o,2)));

With some Hashigo :

$('#h').calc('Math.sqrt(Math.pow(${#a},2) + Math.pow(${#o},2));');

Username generator

Let's help our unimaginative users come up with a username for our website.
We'll generate a username with their first initial and their last name, lowercased and without spaces.

First name :
Last name :
User name :

Old school method:

$('#firstname,#lastname').bind('keyup change',function(){
        var username = $('#firstname').val().substr(0,1) + $('#lastname').val().replace(/ /g,"").toLowerCase();

With help from Hashigo :

//Hashigo escapes all user input before it operates on it. 
//Note this for when your formulas manipulate text.
$('#username').calc('(${#firstname}.substr(0,1) + ${#lastname}).replace(/'+escape(' ')+'/g,"")').toLowerCase();

With help from Hashigo Function mode

//Hashigo can take functions too.
//Useful for long calculations(enhances readibility). It's also faster.
        return (firstname.substr(0,1) + lastname).replace(/ /g,"").toLowerCase();

Miscellaneous examples

Other input types and how you might interact with them using Hashigo.

Select lists/Drop downs

$('#selectedOption').calc("${[name=whatBeer]};'Selected : ' + ${[name=whatBeer] option:selected};");

Check boxes

$('#beerCost').calc("${.beer};'Beer bill : $' + _(${.beer:checked}).reduce(0, function(memo,value){return memo + parseFloat(value);});");

Radio buttons

$('#selectedRadioTimes10').calc("10 * ${input[name='multiplier']:checked}[0]");