A #javascript page to make easily #estimation

estimation.css

.container {
	width: 960px;
	margin: 0 auto;
}
label {
	display: block;
}
input {
	width: 500px;
}
.label {
	display: inline-block;
	text-align: right;
	width: 250px;
}	
.label input {
	text-align: right;
	width: 230px;
}

estimation.js

window.onload = function(){
		
	// VAR
	var form, equations, equations_name, parameters;
	
	// UTILS
	function createElement( str ) {
	    var elem = document.createElement('div');
	    elem.innerHTML = str;
	    if ( elem.childNodes.length > 0 ) {
		return elem.childNodes[0];
	    }
	    return elem;
	}
	var init_location_parameters = function() {
		window.location.parameters = {};
		var url = window.location.href;
		url = decodeURIComponent( url.substring( url.indexOf( '?' )+1 ).replace( new RegExp( '\\+', 'g' ), ' ') );
		if ( url.indexOf( '#' ) != -1 ) {
			url = url.substring( 0, url.indexOf( '#' ) );
		}
		var parts = url.split('&');
		for ( var i=0; i<parts.length; i++ ) {
		    var name = parts[ i ].split( '=' ).slice( 0, 1 ).join('');
		    var value = parts[ i ].split( '=' ).slice( 1, 2 ).join('');
		    if ( name.substring( name.length-1 ) == ']' ) {
			name = name.substring( 0, name.length-1 );
			var subname = name.split( '[' ).slice( 1, 2 ).join('');
			name = name.split( '[' ).slice( 0, 1 ).join('');
			if ( typeof window.location.parameters[ name ] == 'undefined' ) {
			    window.location.parameters[ name ] = {};
			}
			window.location.parameters[ name ][ subname ] = value;
		    } else {
			window.location.parameters[ name ] = value;
		    }
		}
	}
	var update_results = function() {
		
		// VAR
		var results_node, parameters_values;
	
		// UTILS
		var get_parameters_values = function( parameter) {
	
			// UTILS
			var get_parameter_value = function( parameter ) {
				return form[ 'parameters[' + parameter + ']' ].value.replace( new RegExp( '[^0-9\.]+', 'g' ), '');
			}

			// LOGIC
			var parameters_values = {};
			for ( var i=0; i<parameters.length; i++) {
				parameters_values[ parameters[ i ] ] = get_parameter_value( parameters[ i ] );
			}
			return parameters_values;
		}
		var update_result = function( index ) {
		
			// VAR
			var result, node_id;
	
			// UTILS
			var get_result = function() {
				var equation = equations[ index ].replace( new RegExp( '([^\(\)\+\*\-\/0-9 ][^\(\)\+\*\-\/0-9]*[^\(\)\+\*\-\/0-9 ])', 'g'), 'parameters_values["$1"]');
				return eval( equation );
			}
			var create_result_node = function( ) {
				result_node = createElement( '<div><span class="label">' + name + ' : </span><span id="' + node_id + '">' + result + '</span></div>' );
				results_node.appendChild( result_node );
			}
			var update_result_node = function( ) {
				result_node.innerHTML = result;
			}

			// LOGIC
			node_id = 'result_' + i;
			var name = form[ 'equations_name[' + index + ']' ].value;
			result = get_result();
			parameters_values[ name ] = result;
			var result_node = document.getElementById( node_id );
			if ( result_node == null ) {
				create_result_node( );
			} else {
				update_result_node( );
			}
		}

		// LOGIC
		results_node = document.getElementById( 'results' );
		parameters_values = get_parameters_values( );
		for ( var i=0; i<equations.length; i++) {
			update_result( i ); 
		}
	}
	var create_form_equations = function() {

		// UTILS
		var init_equations = function() {
			equations = [];
			equations_name = [];
			if ( typeof window.location.parameters.equations == 'object' ) {
				for ( i in window.location.parameters.equations ) {
					if ( window.location.parameters.equations[ i ] != '' ) {
						equations[ equations.length ] = window.location.parameters.equations[ i ];
						if ( typeof window.location.parameters.equations_name != 'undefined' && typeof window.location.parameters.equations_name[ i ] != 'undefined' ) {
							equations_name[ i ] = window.location.parameters.equations_name[ i ];
						} else {
							equations_name[ i ] = 'Equation ' + ( i + 1 );
						}
					} else {
						delete window.location.parameters.equations[ i ];
						delete window.location.parameters.equations_name[ i ];
					}
				}
			} else {
				equations_name[ equations_name.length ] = "Intérêt maximum par an";
				equations[ equations.length ] = "Somme empruntée * taux d'intérêt /100";
				equations_name[ equations_name.length ] = "Intérêt maximum par an";
				equations[ equations.length ] = "Intérêts moyens par mois";
				equations_name[ equations_name.length ] = "Années d'emprunt";
				equations[ equations.length ] = "Somme empruntée / ( Echéance désirée - Intérêts moyens par mois ) / 12";
			}
		}
		var get_equation_name = function( index ) {
			return equation_name;
		}
		var add_equation_node = function( equation, equation_name, index ) {
			label = createElement( '<div><span class="label"><input type="text" name="equations_name[' + index + ']" value="' + equation_name + '" /> : </span><input type="text" name="equations[' + index + ']" value="' + equation + '" /></div>' );
			equations_node.appendChild( label );
		}

		// LOGIC
		init_equations();
		equations_node = document.getElementById( 'equations' );
		for ( var i=0; i<equations.length; i++ ) {
			add_equation_node( equations[ i ], equations_name[ i ], i );
		}
		add_equation_node( '', 'New equation', i );
	}
	var create_form_parameters = function() {
	
		// UTILS
		var get_parameters = function() {
		
			// VAR
			var parameters = [];
	
			// UTILS 
			var get_parameters_from_equation = function( equation ) {
				return equation
					.replace( new RegExp('[ ]?[\(\)\+\*\-\/0-9][ ]?','g'), '§' )
					.replace( new RegExp('[§]+','g'), '§' )
					.replace( new RegExp('^[ §]',''), '' )
					.replace( new RegExp('[ §]$',''), '' )
					.split( '§' );
			}
			var add_parameters = function( new_parameters ) {
				for ( var i=0; i < new_parameters.length; i++ ) {
					if ( parameters.indexOf( new_parameters[ i ] ) == -1 && equations_name.indexOf( new_parameters[ i ] ) == -1 ) {
						parameters[ parameters.length ] = new_parameters[ i ];
					}
				}
			}
		
			// LOGIC
			for ( var i=0; i<equations.length; i++ ) {
				add_parameters( get_parameters_from_equation( equations[ i ] ) );
			}
			return parameters;
		}
		var add_parameter_node = function( parameter ) {
			var parameter_value = 1;
			if ( typeof window.location.parameters.parameters != 'undefined'&& typeof window.location.parameters.parameters[ parameter ] != 'undefined' ) {
				parameter_value = window.location.parameters.parameters[ parameter ];
			}
			label = createElement( '<label><span class="label">' + parameter + ' : </span><input type="text" name="parameters[' + parameter + ']" value="' + parameter_value + '" /></label>' );
			parameters_node.appendChild( label );
			inputs = label.getElementsByTagName( 'input' );
			if ( inputs.length == 1 ) {
				inputs[ 0 ].onkeyup = update_results;
			}
		}

		// LOGIC
		parameters = get_parameters( );
		var label, 
		    inputs,
		    parameters_node = document.getElementById( 'parameters' );
		for ( var i=0; i<parameters.length; i++ ) {
			add_parameter_node( parameters[ i ] );
		}
		update_results();
	}

	// LOGIC
	init_location_parameters();
	form = document.getElementById( 'form' );
	if ( form ) {
		create_form_equations( );
		create_form_parameters( );
	}
}

index.html

<!DOCTYPE html>
<html>
	<head>
		<title>Easy Estimation</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="estimation.js"></script>
		<link type="text/css" rel="stylesheet" href="estimation.css">
	</head>
	<body>
		<div class="container">
			<form id="form">
				<div id="equations">
				</div>
				<div id="actions">
					<button type="submit">Update the parameters</button>
				</div>
				<div id="parameters">
				</div>
			</form>
			<div id="results">
			</div>
		</div>
	<body>
</html>