# Thread: Dilution calculator (really ugly)

1. Registered User
Join Date
Aug 2014
Posts
7

## 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 here!) 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);
}```
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
}```
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.

HTML Code:
```<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>```
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!!

2. Registered User
Join Date
Aug 2014
Posts
7
Anyone, really?

3. I would need more specific information...

1. Is the layout how you want the final project to look?
2. Can you give some specific inputs that result in specific outputs you expect to see from the calculations? More than one would be nice.
3. Which elements are for user specific entry and which are output elements that are displayed after calculations?

4. You can create a new function, eg

Code:
```function mynewFunc( f, act ){

switch( act ){

case "pwButton": pwCalc( f ); break;

case "gas": calcOil( f ); 	break;

}

}```
Then remove the </form> tag from the first form, remove the <form for the beginning of the second form so you create one large form.

rename the calculate buttons to

<input name="gas" type="submit" value="calculate" onclick="mynewFunc(document.forms.myform, this.name);" />

and

<input name="pwButton" onclick="mynewFunc(document.forms.myform ,this.name)" type="button" value="Calculate..." />

Then you should be getting somewhere with an all in one form.

your passing a form object to the new function that then gets passed to the functions so your functions code changes to

Code:
```function pwCalc( f ){
var C = f.fin_mr_num.value / (f.fin_mr_den.value * 1.0 + f.fin_mr_num.value * 1.0) * (f.pw_mr_den.value * 1.0 + f.pw_mr_num.value * 1.0) / f.pw_mr_num.value;
f.premixConcentration.value = (C * 100).toFixed(2);
f.detergent_vol.value = (C * f.premix_vol.value).toFixed(3);
f.detergent_vol_oz.value = (C * f.premix_vol.value * 1000).toFixed(1);
f.water_vol.value = ((1-C) * f.premix_vol.value).toFixed(3);
f.water_vol_oz.value = ((1-C) * f.premix_vol.value * 1000).toFixed(1);
}

function clear_field(field) {
if (field.value == field.defaultValue) {
field.value = ''
}
}

function calcOil(g) {
var gastm = g.gasm.value; //get liters
var gomrtm = g.gomrm.value; //get mixture ratio
var gasom = (gastm * 10); //convert petrol to dl
var oilom = ((gasom) / gomrtm); //divide by ratio
g.oilqtym.value = (oilom); //required oil
//g.gomr.value = (g.gomrm.value); //mixture ratio
//g.oilqty.value = (oilom * 0.033814022701843); //required oil converted to ounces
}```
make sure you rename this <form name="gasoil"> to <form name="myform" action="javascript:;" > and move it outside of the table, you never start a form inside a tables <TD> unless the closing </form tag is in the same <TD tag.

Much less code modding to be done and you can amend the functions as needed.
Last edited by \\.\; 08-27-2014 at 12:32 PM.

5. Registered User
Join Date
Aug 2014
Posts
7
Thank you, I got it to work and testing it on jsfiddle.net http://jsfiddle.net/7959r33r/13/

The problem now is that I am all lost in the html <td><tr><table>. The layout looks like ****!

I want it to be two calculators obviously first the easier calcOil and then the foamLance calculator.

I want them to be a little more boxed in than what they are today look here

I will create an image of what I want it to look like so you guys can hint me on the coding..

6. Registered User
Join Date
Aug 2014
Posts
7
This is how I want it to look like. Link to mockup picture

The javascript works (Thank you)

But the html is a big mess.. You can see the calculator here

7. Registered User
Join Date
Oct 2010
Location
Versailles, France
Posts
1,290
Use CSS style with class to avoid mixing code and format.
See w3scholls.com CSS tutorial with, for example, this demo page
Last edited by 007Julien; 08-28-2014 at 06:40 AM. Reason: complements

8. Registered User
Join Date
Aug 2014
Posts
7
CSS would be nice. But my knowledge of CSS is fairly limited, it would take time. As long as not one of you guys maby get me started by setting up the framework?

That would be a flying start..

Best regards

9. Registered User
Join Date
Aug 2014
Posts
7
Does anyone know where I can pay for some attention and help with my problem?

10. What you need is a WYSIWYG editor that like Serif WebPage Plus will allow your to design web pages in a graphical format, then add in your page elements and scripting and then render to a web page / site.

11. Registered User
Join Date
Aug 2014
Posts
7
Ok.

I don't know where to find a wysiwyg that does that..

12. I just mentioned one in my comment, Serif Web Page Plus, you also have Macromedia Fireworks which is a bit old and possibly superseded by an Adobe product, it all depends on what you are after.

Your quickest option is to extend the existing table and put the new elements in the extended area, chop out some images from the example you gave and have them placed in the table along with changing background colours of the table you have.

Its dirty but quick and you will find plenty of objection to using tables for layout, personally I see nothing wrong, if it work use it is my philosophy.

##### Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•

"

"

## X vBulletin 4.2.2 Debug Information

• Page Generation 0.15640 seconds
• Memory Usage 3,010KB
• Queries Executed 13 (?)
Template Usage (34):
• (4)bbcode_code
• (1)bbcode_html
• (1)footer
• (1)forumjump
• (1)forumrules
• (1)gobutton
• (12)memberaction_dropdown
• (1)navbar
• (1)navbar_moderation
• (1)navbar_noticebit
• (1)navbar_tabs
• (2)option
• (12)postbit
• (12)postbit_onlinestatus
• (12)postbit_wrapper
• (1)spacer_close
• (1)spacer_open
• (1)tagbit_wrapper

Phrase Groups Available (6):
• global
• inlinemod
• postbit
• posting
• reputationlevel
Included Files (26):
• ./global.php
• ./includes/class_bootstrap.php
• ./includes/init.php
• ./includes/class_core.php
• ./includes/config.php
• ./includes/functions.php
• ./includes/class_friendly_url.php
• ./includes/class_hook.php
• ./includes/class_bootstrap_framework.php
• ./vb/vb.php
• ./vb/phrase.php
• ./includes/functions_calendar.php
• ./includes/functions_bigthree.php
• ./includes/class_postbit.php
• ./includes/class_bbcode.php
• ./includes/functions_reputation.php
• ./includes/functions_notice.php
• ./packages/vbattach/attach.php
• ./vb/types.php
• ./vb/cache.php
• ./vb/cache/db.php
• ./vb/cache/observer/db.php
• ./vb/cache/observer.php

Hooks Called (70):
• init_startup
• friendlyurl_resolve_class
• init_startup_session_setup_start
• database_pre_fetch_array
• database_post_fetch_array
• init_startup_session_setup_complete
• global_bootstrap_init_start
• global_bootstrap_init_complete
• cache_permissions
• fetch_foruminfo
• global_state_check
• global_bootstrap_complete
• global_start
• style_fetch
• global_setup_complete
• strip_bbcode
• friendlyurl_clean_fragment
• friendlyurl_geturl
• forumjump
• cache_templates
• cache_templates_process
• template_register_var
• template_render_output
• fetch_template_start
• fetch_template_complete
• parse_templates
• notices_check_start
• notices_noticebit
• process_templates_complete
• friendlyurl_redirect_canonical
• bbcode_fetch_tags
• bbcode_create
• postbit_factory
• postbit_display_start
• postbit_imicons
• bbcode_parse_start
• bbcode_parse_complete_precache
• bbcode_parse_complete
• postbit_display_complete
• memberaction_dropdown
• tag_fetchbit_complete
• forumrules
• navbits
• navbits_complete