Cure and Sausage Calculators

One for the anoraks! I've been asked a number of times how I do the cure/sausage calculators on the blog but have been loathe to do a tutorial as whilst I can write (x)html and css like a native, my knowledge of Javascript is, to say the least limited. That any of the calculators actually work still amazes me!

Anyway, here goes - stating the obvious, to start with you need a recipe. You then need to convert the recipe so that all the ingredients are expressed as a percentage of the main one - in most case the meat. Lets take a simplified version of the Thurlaston Sausage recipe:

Sausage recipe

You can see above that the percentages are very different when expressed as percentages of the meat rather than the total sausage. We now need to divide these percentages by 100:

Sausage recipe percents

Now we've worked out those figures we can start preparing our web page. We're going to put all the scripting in a separate file, so the first thing we need to do is tell our web page where to find our script. We'll do this using the script html tag - let's call our script cure_calc and put it into the same directory as the web-page. There's a link at the end of the tutorial to download files with all the scripting, so don't bother to write everything down:

Script tag

To be good web citizens, we should also tell people with their scripting turned off what they're missing:

Noscript tag

Now we need to create a form for the calculator, I do mine in a table with two columns: one for the ingredients and the other for the results. We'll call the form myform and title the table Thurlaston Sausage Calculator:

Form tag

Let's add the input box for the meat weight and the button to operate the calculator. It's important that the input name is weight and that all the button details are as shown:

Meat tag and button

Now all we need to do is add the boxes for the ingredients, and the total weight; I've named these twoprod, threeprod, fourprod and totalprod. We also need to end the table and form:

Ingredient tags

Here's what we've done so far; the script tags wouldn't necessarily be positioned as below, but I have to do it this way due to the way my blog software works:

html form

If we view it in a browser it looks like this:

html form

All we've got to do now is make it work!

In a text editor we create a file for the Javascript, but instead of saving it with a .txt extension, we'll save it as cure_calc.js:

html form

In lines 5,6 and 7 we can see that we enter the percentage / 100 figures that we calculated earlier (the water and rusk have been transposed in this example). We can see in Line 2 that when we click the button on our webpage with the doMath instruction, the instructions in this script are executed. Line 3 tells it to get the weight of the meat entered into the web form and call it one. Line 5,6 and 7 give values for the ingredients and tell the form to call them two, three and four. Lines 9, 10 and 11 tell the script to multipy one (the meat weight) by two, three and four and call them twocalc, threecalc and fourcalc respectively. Line 12 tells the script to add these last three figures together and add them to the weight of the meat - it tells it to call this totalcalc. Lines 14, 15, 16 and 17 are the instructions to the script to place all these figures back on the webpage calling them twoprod, threeprod, fourprod and totalprod. The rest of the script is concerned with the calculations and, other than the fact that it has to be there, doesn't really concern us.

Anyway, that's how I see it working, but as I say, "You could write on a cigarette paper what I know about Javascript!"

The source files can be download as .pdf files. You will need to 'right click' them and choose 'save as...', 'save link as...', or similar choice, to save them to your computer. To use them, put them in the same directory and then copy the text and paste it into a blank text editor document, save the text from calc_tutorial.pdf as calc_tutorial.html and cure_calc.pdf as cure_calc.js. Or you can click on the link and it will open in a new browser window. You can then copy and paste as above directly from there.

Web Page html file.pdf

Javascript js file.pdf

I hope that this helps. I am happy to answer simple questions about it, but for anything complex please contact someone with scripting experience. If you use the design, it would be nice if you included a link to my website.

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • email
  • Facebook
  • Google
  • Posterous
  • Reddit
  • Technorati
  • Twitter
  • Yahoo! Bookmarks

There are two comments


Thanks for the tutorial, however your links are not working

Johan, - 02-08-’11 14:45

Thanks you. I have corrected the links and changed the files to .pdf so that they can be opened in a browser window if you want.

Phil, (Email ) (URL) - 02-08-’11 16:32

I'm somewhat incapacitated at present so replies may take some time. Please post urgent enquiries at the forum.

(optional field)
(optional field)

You need to enter the first 3 letters of food in lowercase type for your comment to be allowed

Comment moderation is enabled on this site. This means that your comment will not be visible until it has been approved by an editor.

Remember personal info?
Small print: All html tags except <b> and <i> will be removed from your comment. You can make links by just typing the url or mail-address.
/* */