Drake Equation Calculator

drake.js

/**
A little bare-bones drake calculator whipped together in ten minutes just to test some values and have fun.
Should work in all modern browsers.
**/
function createDrake(element){

	if(!element){element = document.body;}

	const container = document.createElement('div');
	container.id = 'drake';

	const resultLabel = document.createElement('label');
	resultLabel.innerHTML = 'Result:'

	const resultText = document.createElement('strong');
	resultText.innerHTML = '0';

	const result = document.createElement('div');
	result.className = 'result';
	result.appendChild(resultLabel);
	result.appendChild(resultText)


	const assign = (a,b)=>Object.assign({},a,b);

	const setResultText = (text)=>{
		resultText.innerHTML = text;
	};

	const percentDefault = {min:0,max:1,step:0.001};

	const state = {
		formation_rate:{
			label:'Formation Rate (R*)'
		,	help:'Rate of formation of suitable stars in our galaxy (per year)'
		,	min:0
		,	max:1000
		,	step:1
		,	value:7
		}
	,	fp:assign(percentDefault,{
			label:'Planets Per Star (Fp)'
		,	help:'Percentage of those stars (previous value) with planets'
		,	value:.9
		})
	,	ne:assign(percentDefault,{
			label:'Suitable Planets (Ne)'
		,	help:'Number of planets per star (previous value) that are suitable for Earth-like life'
		,	value:.9
		})
	,	fl:assign(percentDefault,{
			label:'Life-Bearing Planets (Fl)'
		,	help:'Percentage of those suitable planets (previous value) where life actually develops'
		,	value:.4
		})
	,	fi:assign(percentDefault,{
			label:'Planets with Intelligent Life (Fi)'
		,	help:'Percentage of planets with life (previous value) where intelligent life develops'
		,	value:.5
		})
	,	fc:assign(percentDefault,{
			label:'Planets that Want to Communicate (Fc)'
		,	help:'Percentage of planets with intelligent beings (previous value) where technology and interest in inter-stellar communication develops'
		,	value:.2
		})
	,	l:{
			label:'Lifetime (L)'
		,	help:'Average lifetime of communicating civilizations (in years); i.e, how long before a civilization destroys itself or dies. That\'s the lifetime of how long it communicates into space, not how long it exists.'
		,	min:0
		,	max:999999999999999999999999999999
		,	step:100
		,	value:100000
		}
	};

	const keys = Object.keys(state);

	const drake = ()=>{
		return keys.reduce((result,key)=>(result * state[key].value),1);
	}

	const onChange = (name,value)=>{
		state[name].value = parseFloat(value);
		setResultText(drake());
	}


	const insertInput = (labelText,helpText,name,value,min,max,step) => {

		const input = document.createElement('input');
		input.type = 'number';
		input.step = step;
		input.name = name;
		input.value = value;
		input.min = min;
		input.max = max;
		input.addEventListener('change',(evt)=>onChange(name,evt.target.value))

		const help = document.createElement('span');
		help.className = 'help';
		help.innerHTML = helpText;
		
		const label = document.createElement('label');
		label.innerHTML = labelText;

		const wrapper = document.createElement('div');
		wrapper.className='input'
		wrapper.appendChild(label)
		wrapper.appendChild(input);
		wrapper.appendChild(help);

		container.appendChild(wrapper);
	}

	keys.forEach((key)=>{
		const f = state[key];
		const label = f.label || key;
		insertInput(label,f.help||'',key,f.value||0,f.min||0,f.max||1,f.step||.1);
	});

	container.appendChild(result);

	const style = document.createElement('style');
	style.type = 'text/css';
	style.innerHTML = `#drake{text-align:left;margin:0 auto;background:#fcfcfc;font-family:sans-serif;font-size:1em;max-width:500px;position:absolute;top:0;}
#drake label{display:inline-block;width:100px;}
#drake .help{display:block;font-size:.7em;color:#888;}
#drake .input{margin-bottom:10px;padding:5px;border-bottom:1px solid #ccc;}
#drake .result{padding:5px 5px 5px 10px;font-size:1.2em;}`;
	document.getElementsByTagName('head')[0].appendChild(style);


	element.appendChild(container);
	drake();
	return container;
}