Dilution calculator (really ugly)

Hi.

I have coded a small dilution calculator to calculate the amount of detergent needed for a correct mixing ratio trough two steps of dilution. First in a bottle with given volume and then through a foam lance. A foam lance is used to foam schampoo when you wash your car.

So to my problem. I have used two different scripts so it’s actually two calculators in one. The first one is very simple just to dilute detergent with water or mix oil in gas for two stroke engines..

The second one is the serial dilution calculator for the foam lance.

Both scripts works and validates fine, but is not coded by the same “artist” so it looks a little bit sloppy. I have used and edited “free to use scripts”

Now I need help with two things that I can’t figure out myself. (you can se the working but really ugly app [URL=”http://thiger.nu/Bilvardsforum/calc2.html”]here![/URL]) but please read through the post…

In the code below I edited the recalculation to fl. oz to measure in milliliters instead (from 128 to 1000. Does this apply the right way?

[CODE]function pwCalc()
{
var C = document.getElementById(“fin_mr_num”).value / (document.getElementById(“fin_mr_den”).value * 1.0 + document.getElementById(“fin_mr_num”).value * 1.0) * (document.getElementById(“pw_mr_den”).value * 1.0 + document.getElementById(“pw_mr_num”).value * 1.0) / document.getElementById(“pw_mr_num”).value;
document.getElementById(“premixConcentration”).value = (C * 100).toFixed(2);
document.getElementById(“detergent_vol”).value = (C * document.getElementById(“premix_vol”).value).toFixed(3);
document.getElementById(“detergent_vol_oz”).value = (C * document.getElementById(“premix_vol”).value * 1000).toFixed(1);
document.getElementById(“water_vol”).value = ((1-C) * document.getElementById(“premix_vol”).value).toFixed(3);
document.getElementById(“water_vol_oz”).value = ((1-C) * document.getElementById(“premix_vol”).value * 1000).toFixed(1);
}[/CODE]

This second script is for the simpel mix ratio calculator:

[CODE] function clear_field(field) {
if (field.value == field.defaultValue) {
field.value = ”
}
}

function calcOil() {
var gastm = document.gasoil.gasm.value; //get liters
var gomrtm = document.gasoil.gomrm.value; //get mixture ratio
var gasom = (gastm * 10); //convert petrol to dl
var oilom = ((gasom) / gomrtm); //divide by ratio
document.gasoil.oilqtym.value = (oilom); //required oil
document.gasoil.gomr.value = (document.gasoil.gomrm.value); //mixture ratio
document.gasoil.oilqty.value = (oilom * 0.033814022701843); //required oil converted to ounces
}[/CODE]

Is there a way to combine the two scripts to one

My second problem is to wrap the calculators in a good locking way so it is easy to use for the end user.

Below is my sorry ass try to write some html. I have used a few wysiwyg editors which made the code even more messy.

[code=html]<meta charset=”UTF-8″ />
<title></title>
<center>&nbsp;</center>

<p align=”center”>&nbsp;</p>

<div align=”center”>
<center>
<table border=”1″ bordercolor=”#C0C0C0″ cellpadding=”10″ cellspacing=”1″ cols=”1″ style=”background-color: #FFFFFF; width: 550px;”>
<tbody>
<tr>
<td style=”width: 500px;”>
<p align=”center” style=”background-color: #FFFFFF;”><span style=”color:#000000;”><b><img height=”62″ src=”bbv_logo_color.png” width=”456″ /></b></span></p>

<hr />
<p><span style=”color:#000000;”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation</span></p>

<p>&nbsp;</p>

<form name=”gasoil”>
<center>
<table border=”1″ bordercolordark=”#999999″ cellpadding=”10″ cellspacing=”1″ cols=”1″ width=”350″>
<tbody>
<tr>
<td>
<p align=”right”><span style=”color:#000000;”>Ammount of final dilution (in Liters):</span></p>
</td>
<td><span style=”color:#000000;”><input name=”gasm” onfocus=”clear_field(this)” size=”6″ type=”text” value=”1″ /></span></td>
</tr>
<tr>
<td>
<p align=”right”><span style=”color:#000000;”>Desired dilution ratio:</span></p>
</td>
<td><span style=”color:#000000;”><input name=”gomrm” onfocus=”clear_field(this)” size=”6″ type=”text” value=”50″ />:1</span></td>
</tr>
<tr>
<td colspan=”2″>
<center><span style=”color:#000000;”><input onclick=”calcOil()” type=”button” value=”Beräkna” />&nbsp;&nbsp;&nbsp; <input type=”reset” value=”Nollställ” /></span></center>
</td>
</tr>
<tr>
<td colspan=”2″>
<center><span style=”color:#000000;”>You need<input name=”oilqtym” readonly=”readonly” size=”14″ type=”text” value=”Klicka beräkna!” />dl concentrate</span></center>
</td>
</tr>
</tbody>
</table>
</center>
</form>

<hr />
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
</center>
</div>

<p><span style=”color:#000000;”>This calculator computes the amount of detergent needed in the pre-mix jug, using the given mixing ratios.</span></p>

<table>
<tbody>
<tr>
<td>
<table class=”calc”>
<tbody>
<tr style=”font-size:small”>
<th>&nbsp;</th>
<th><span style=”color:#000000;”>Detergent</span></th>
<th><span style=”color:#000000;”>Water</span></th>
</tr>
<tr>
<td><span style=”color:#000000;”>Final Mixing Ratio:</span></td>
<td><span style=”color:#000000;”><input id=”fin_mr_num” size=”3″ value=”1″ />:</span></td>
<td><span style=”color:#000000;”><input id=”fin_mr_den” size=”3″ value=”20″ /></span></td>
</tr>
<tr>
<td><span style=”color:#000000;”>Pressure Washer Mixing Ratio:</span></td>
<td><span style=”color:#000000;”><input id=”pw_mr_num” size=”3″ value=”1″ />:</span></td>
<td><span style=”color:#000000;”><input id=”pw_mr_den” size=”3″ value=”7″ /></span></td>
</tr>
</tbody>
</table>
</td>
<td><span style=”color:#000000;”><span class=”small” style=”position:relative; top:2em”>Tip: Set to 1:0 for a general mixing calculation.</span></span></td>
</tr>
</tbody>
</table>

<p><span style=”color:#000000;”>Desired Volume of Pre-mix:&nbsp;<input id=”premix_vol” size=”3″ value=”1″ />&nbsp;Liters<br />
<br />
<input name=”pwButton” onclick=”pwCalc()” type=”button” value=”Calculate…” /></span></p>

<table class=”calc”>
<tbody>
<tr>
<td><span style=”color:#000000;”>Pre-mix Concentration:</span></td>
<td><span style=”color:#000000;”><input id=”premixConcentration” size=”5″ />%</span></td>
<td>&nbsp;</td>
</tr>
<tr>
<td><span style=”color:#000000;”>Detergent:</span></td>
<td><span style=”color:#000000;”><input id=”detergent_vol” size=”5″ />L=</span></td>
<td><span style=”color:#000000;”><input id=”detergent_vol_oz” size=”5″ /> ml</span></td>
</tr>
<tr>
<td><span style=”color:#000000;”>Water:</span></td>
<td><span style=”color:#000000;”><input id=”water_vol” size=”5″ />L=</span></td>
<td><span style=”color:#000000;”><input id=”water_vol_oz” size=”5″ /> ml</span></td>
</tr>
</tbody>
</table>

<p><span style=”color:#000000;”>The water volume needs typically not be measured since we can just top up the jug with water.</span></p>[/code]

I really need help to clean up this little web-app so it looks nice.

This project is for a small detailing forum and is totally bro bono and noncommercial!!

Also in #JavaScript _↴