Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Location
    Nottingham, UK
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Need Help - Specific Javascript Converters

    Hi all,

    I'm new here *waves*. Basically, in a nutshell I have absolutely no experience with javascript. I know HTML and a enough CSS to get me by but learning javascript at almost 32 is sending me blind! :lol:

    I'm looking for help with learning how to code my own specific javascript converter. As I said before, I'm completely new with this so bare with me if I'm end up going cross-eyed or getting confused.

    I'd like to set up specific recipe converters on my website, Sweet 2 Eat Baking. By specific, I mean coded with certain answers. An example of this would be a oven temperature converter. On most, if I enter 180℃ and convert to ℉, it gives me 354℉. This is technically 'correct' but in reality, it's 350℉ which I'd like to be used as a specific answer. Does that make sense?

    I'd like a temperature converter with my specific answers for input and output either way (from F to C and C to F). I also want cup measurements to metric and metric to cup and I have a few of these to implement due to different weights with flours, sugars, liquids, etc.

    Is there anyone willing to help me with this project at all?

    Either way, thanks for reading.

    -Lisa.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,226
    Thanks
    23
    Thanked 606 Times in 605 Posts
    Find a Cut & Paste Temperature Converter here http://www.javascriptkit.com/script/...pconvert.shtml

    Chart for this are found here http://www.jsward.com/cooking/conversion.shtml

    Yell if you want to do this in code, but a tooltip jut might easier or just post the chart.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,037
    Thanks
    203
    Thanked 2,539 Times in 2,517 Posts
    Quote Originally Posted by Sweet2EatBaking View Post
    I'd like to set up specific recipe converters on my website, Sweet 2 Eat Baking. By specific, I mean coded with certain answers. An example of this would be a oven temperature converter. On most, if I enter 180℃ and convert to ℉, it gives me 354℉. This is technically 'correct' but in reality, it's 350℉ which I'd like to be used as a specific answer. Does that make sense?
    Only partially. What do you mean by a "specific answer"? Do you mean a result rounded up/down/to the nearest 5 or 10 degrees?

    I am not sufficiently knowledgeable about cooking to know what is meant by a "cup". Does it differ with the weight of the ingredient? The only cups I know much about are A, B, C and D. As I understand it, no matter what size cup is used, the ingredients of a recipe measured with the same size cup will have their volumes in the same proportion to one another.

    The script suggested by sunfighter is very old-fashioned and uses the much-despised eval(). eval() is evil!!! Here is a basic converter which rounds the result to the nearest 5 degrees. Obviously you can easily change 5 to 10 or whatever for either/both conversions. You can round the result down (as opposed to round to the nearest) by using Math.floor rather than Math.round. Or Math.ceil if you want to round up.

    If it does not meet your needs, feel free to come back. I will be most happy to bare with you at any time! Your place or mine?

    Code:
    CONVERT OVEN TEMPERATURES CELCIUS > FARENHEIT > CELCIUS<br><br>
    
    Celcius <input type = "text" id = "Celcius"  size = "3" maxlength = "3" onfocus = "this.value = ""; onkeyup="checkNumsOnly(this)"  onchange = "calculate('C')">
    Farenheit <input type = "text" id = "Farenheit"  size = "3" maxlength = "3" onkeyup="checkNumsOnly(this)"  onchange = "calculate('F')">
    
    <script type = "text/javascript">
    
    function checkNumsOnly(which) {
    var val = which.value;
    var len = val.length;
    if (/\D/.test(val)) {
    val = val.substring(0,len-1);
    which.value = val;
    }
    }
    
    function calculate(which) {
    if (which == "C") {
    var c = document.getElementById("Celcius").value;
    var f = (9/5)*c + 32;
    var rf = 5; //   rounding factor - round to nearest 5
    var result = Math.round(f/rf)*rf;  
    document.getElementById("Farenheit").value = result;
    // document.getElementById("Farenheit").value = f.toFixed(0); // unrounded
    
    }
    
    if (which == "F") {
    var f = document.getElementById("Farenheit").value;
    var c = (5/9)*(f-32);
    var rf = 5; //   rounding factor - round to nearest 5
    var result = Math.round(c/rf)*rf;  
    document.getElementById("Celcius").value = result;
    // document.getElementById("Celcius").value = c.toFixed(0); // unrounded
    }
    
    }
    
    </script>


    Quizmaster: Give me a word ending in the letters E, A, R.
    Contestant: (after some deliberation). Tupperwear.
    Last edited by Philip M; 02-24-2013 at 04:52 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    New to the CF scene
    Join Date
    Feb 2013
    Location
    Nottingham, UK
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi Philip, Hehe thanks. You might just regret saying you'd bare with me. Oh ye knowledgable one.

    Quote Originally Posted by Philip M View Post
    Only partially. What do you mean by a "specific answer"? Do you mean a result rounded up/down/to the nearest 5 or 10 degrees?
    Not as such. As stupid as it sounds, with baking the exact answers aren't what is used in cookbooks and such. So, when using an online converter including the one you provided below (and thank you for that) it gives an accurately correct answer but is technically incorrect because in cookbooks 180℃ = 350℉ and vice versa. When using the javascript code, it gives me an answer of 355℉ instead of 350℉.

    So we'll call the calculated (javascript converted) answers as 'correct' and the cookbook answers as 'cookbook' in order for me to even attempt to explain more.

    It's hard to explain but I'd like it to convert into the 'cookbook' answers instead of the 'correct'. Does that make sense?

    Another example of the 'cookbook' answers is below.

    140℃ = 275℉ - Gas Mark 1
    150℃ = 300℉ - Gas Mark 2
    170℃ = 325℉ - Gas Mark 3
    180℃ = 350℉ - Gas Mark 4
    190℃ = 375℉ - Gas Mark 5
    200℃ = 400℉ - Gas Mark 6
    220℃ = 425℉ - Gas Mark 7
    230℃ = 450℉ - Gas Mark 8
    240℃ = 475℉ - Gas Mark 9
    260℃ = 500℉ - Gas Mark 10

    I'd like the 'cookbook' answers above to be the ones that are displayed when entered. So, the example above of if someone enters 180℃ and gets an answer of 355℉ is not what I'm looking for, I'd like the answer to say 350℉.

    If at all possible, I'd love if the Gas Marks (those people that have gas ovens) could be implemented too?

    I hope I'm making some sort of sense? If not, enjoy my rambles!

    Quote Originally Posted by Philip M View Post
    I am not sufficiently knowledgeable about cooking to know what is meant by a "cup". Does it differ with the weight of the ingredient? The only cups I know much about are A, B, C and D. As I understand it, no matter what size cup is used, the ingredients of a recipe measured with the same size cup will have their volumes in the same proportion to one another.
    As I'm sure you're aware, here in the UK when cooking, baking and such we weigh in grams (metric). In the US, they don't weigh at all, they use measuring cups (which can be bought here but not everyone knows that). The measuring cups come in certain measurements of 1/4 (60ml), 1/3 (80ml), 1/2 (125ml) and 1 cup (250ml).

    There's a few problems. The main problem is that different ingredients have different weights (which I have already calculated and should be an easier conversion since the weight for 1 cup can be divided to give the correct cup measurement.)

    Here's a few examples (I'm using UK names for ingredients so I don't confuse you further):

    FLOURS:
    1 cup of plain flour = 127g (4.5 oz)
    1 cup of self-raising flour = 120g (4.5oz)
    1 cup of whole wheat flour = 131g (4.6oz)

    SUGARS:
    1 cup of granulated sugar = 200g (7oz)
    1 cup of brown sugar = 255g (9oz)
    1 cup of caster sugar = 225g (8oz)
    1 cup of icing sugar = 125g (4oz)

    BUTTER & MARGARINE:
    1 cup of butter = 226g (8oz)

    COCOA POWDER:
    1 cup of cocoa powder = 100g (3.5oz)

    See the difference in weight between the different ingredients? To calculate between 1/4, 1/3 and 1/2, I just divided and then rounded up. Same with the Ounce (oz) values too.

    Quote Originally Posted by Philip M View Post
    The script suggested by sunfighter is very old-fashioned and uses the much-despised eval(). eval() is evil!!! Here is a basic converter which rounds the result to the nearest 5 degrees. Obviously you can easily change 5 to 10 or whatever for either/both conversions. You can round the result down (as opposed to round to the nearest) by using Math.floor rather than Math.round. Or Math.ceil if you want to round up.
    Yup, I went cross-eyed there. But yes, modern is better, thank you.

    Quote Originally Posted by Philip M View Post
    If it does not meet your needs, feel free to come back. I will be most happy to bare with you at any time! Your place or mine?
    LOL Anywhere you like.

    Quote Originally Posted by Philip M View Post
    Quizmaster: Give me a word ending in the letters E, A, R.
    Contestant: (after some deliberation). Tupperwear.
    Is it bad the first thing I thought was 'underwear'?

    Thanks again for your help. I guess you're regretting offering now.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,037
    Thanks
    203
    Thanked 2,539 Times in 2,517 Posts
    Bear - dear - fear - gear - hear - near - pear - rear - sear - tear - wear - year .....

    I did say that you could easily change the script I gave you to round to the nearest 10 rather than 5. Likewise to the the nearest 25 if that is what is wanted.

    You list:-

    140℃ = 275℉ - Gas Mark 1
    150℃ = 300℉ - Gas Mark 2
    170℃ = 325℉ - Gas Mark 3
    180℃ = 350℉ - Gas Mark 4
    190℃ = 375℉ - Gas Mark 5
    200℃ = 400℉ - Gas Mark 6
    220℃ = 425℉ - Gas Mark 7
    230℃ = 450℉ - Gas Mark 8
    240℃ = 475℉ - Gas Mark 9
    260℃ = 500℉ - Gas Mark 10


    If you want only these values, then a simple conversion table will do the job. But I don't feel like doing any more on this unless/until I am sure that I have fully understood what you want. You requirement, the whole requirement and nothing but the requirement, please. What about 210 and 250 degrees C? Do you want to convert only from Celcius to F or the reverse as well? Frankly if it is as simple as that I would just list the conversion table on the website.

    I am not entirely sure I really understand the cups part.

    What do you expect the user to enter as input and what output do you expect? Surely there are many different ingedients?
    Personally, I would ignore the Americans. Let them eat cake. Or another idea is to have a separete website for US visitors with the receipes expressed in their (strange) measurements. I understand that they still use rods! (And perhaps roods - square rods).

    Would it not be simpler to specify each of the ingredients in both metric and in "cups"? Rather than attempt dynamic conversion, which does not seem too practical to me if a cup of flour is 127g but a cup of butter is 226g and a cup of something else is 100g. I think I will stick with beans on toast - I do know how to cook that! On a good day I can boil an egg as well!

    One possible approach is to set up a select list of every ingredient and when the user selects an item he gets the metric or imperial equivalent weight of one US cup of that item. Not sure how that helps. Surely the Americans must use peculiar fractions of a cup?

    I may be a bit dim today, but I do not see how a UK recipe which calls for
    200g plain flour
    100g granulated sugar
    75g cocoa powder
    can be expressed in US cups, unless bizarre fractions are involved.
    Last edited by Philip M; 02-24-2013 at 07:44 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    One problem with setting up converters for cooking measurements is that the conversions do not appear to be the same in all countries.

    When I set up a converter for some cooking measures many years ago I set the tablespoon conversion to 20ml - which is what it is defined to be here - and got complaints from people in other countries that they couldn't use it on their sites because that conversion was wrong because the tablespoons in their country are a different size.

    Not sure where the 180 C = 355 F came from since the correct answer is 356 - and it is always that regardless of where you are using it. So how big a tolerance is supposed to be allowed in cooking - 350 is 1.7% low. Based on the supplied list it looks like it is supposed to be rounded to the nearest 25 (and the conversion the other way is to the nearest 10 - which is a completely different tolerance since 10 C = 18 F).
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    New to the CF scene
    Join Date
    Feb 2013
    Location
    Nottingham, UK
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    Bear - dear - fear - gear - hear - near - pear - rear - sear - tear - wear - year .....
    It was the first thing that came into my mind. *blush*

    Quote Originally Posted by Philip M View Post
    I did say that you could easily change the script I gave you to round to the nearest 10 rather than 5. Likewise to the the nearest 25 if that is what is wanted.

    You list:-

    140℃ = 275℉ - Gas Mark 1
    150℃ = 300℉ - Gas Mark 2
    170℃ = 325℉ - Gas Mark 3
    180℃ = 350℉ - Gas Mark 4
    190℃ = 375℉ - Gas Mark 5
    200℃ = 400℉ - Gas Mark 6
    220℃ = 425℉ - Gas Mark 7
    230℃ = 450℉ - Gas Mark 8
    240℃ = 475℉ - Gas Mark 9
    260℃ = 500℉ - Gas Mark 10

    If you want only these values, then a simple conversion table will do the job. But I don't feel like doing any more on this unless/until I am sure that I have fully understood what you want. You requirement, the whole requirement and nothing but the requirement, please. What about 210 and 250 degrees C? Do you want to convert only from Celcius to F or the reverse as well? Frankly if it is as simple as that I would just list the conversion table on the website.
    I suppose for the temperatures, it probably would be easiest for the both of us to just have them listed like above. As for the 210 and 250, they're not listed in the books because they're not normally used in baking.

    Quote Originally Posted by Philip M View Post
    I am not entirely sure I really understand the cups part.

    What do you expect the user to enter as input and what output do you expect? Surely there are many different ingedients?
    Personally, I would ignore the Americans. Let them eat cake. Or another idea is to have a separete website for US visitors with the receipes expressed in their (strange) measurements. I understand that they still use rods! (And perhaps roods - square rods).
    Forgive me for not knowing the technical terms but I'm mainly interested in the conversion between metric grams and US cups and perhaps a separate conversion area (separate javascript) for each ingredient and for it to calculate both ways (from grams to cups and cups to grams). I realise this would mean possibly coding 9 separate scripts - I'm clueless to this sort of thing. If it's too much work then I completely understand. Perhaps it might be easier (when I've attempted to explain everything) to hire for the work?

    For example: picking granulated sugar as one of the ingredient examples...

    200g = 1 cup.
    Since there's also 1/4, 1/3, and 1/2 I calculated the gram values by dividing.
    1/4 cup = 50g (200 / 4 = 50),
    1/3 cup = 67g (200 / 3 = 67),
    1/2 cup = 100g (200 / 2 = 100).

    I'd like a javascript converter which would go above and beyond the listed grams. So let's say someone wants to convert 500g of cocoa powder into cups, it's simple to see that 1 cup of cocoa powder is 100g so the end result would be 5 cups. And if possible vice versa too so a US user, using the same example, wants to know what the gram value of 5 cups is therefore listing 500g.

    I could just go ahead and list all the ingredients and their conversions on my specific page created but I thought it would be more user-friendly and professional to have some sort of conversion tool.

    Quote Originally Posted by Philip M View Post
    Would it not be simpler to specify each of the ingredients in both metric and in "cups"? Rather than attempt dynamic conversion, which does not seem too practical to me if a cup of flour is 127g but a cup of butter is 226g and a cup of something else is 100g. I think I will stick with beans on toast - I do know how to cook that! On a good day I can boil an egg as well!
    At the moment, I'm trying to do this but I use both UK and US recipes. Therefore I spend a lot of time physically weighing the ingredients to get the gram value when baking something. It's really time consuming and isn't 100% accurate. I'd hate for anyone to comment saying they tried my recipe and it failed because things weren't accurate in the first place.

    Quote Originally Posted by Philip M View Post
    One possible approach is to set up a select list of every ingredient and when the user selects an item he gets the metric or imperial equivalent weight of one US cup of that item. Not sure how that helps. Surely the Americans must use peculiar fractions of a cup?
    Something like this?

    Although I tried the above link entering cocoa powder into the ingredients (which I know is 100g to 1 cup) and entering 100g to cup but it seems to calculate at 1.17 cups and should be 1.00 (1) cup. *shrug*

    Quote Originally Posted by Philip M View Post
    I may be a bit dim today, but I do not see how a UK recipe which calls for
    200g plain flour
    100g granulated sugar
    75g cocoa powder
    can be expressed in US cups, unless bizarre fractions are involved.
    The cups do come in fractions. You get 4 cups which are 1/4, 1/3, 1/2 and 1 cup. And you can create 2/3 and 3/4 out of them too.

    But let me try. I'm not the best at maths so here goes...
    200g plain flour - the closest I can to getting 200g is 3/4 of a cup (approx. 96g) I got this by multiplying 1/4 cup (32g) by 3.
    100g granulated sugar - 1 cup of granulated sugar is 200g therefore halving that equals 100g = 1/2 cup
    75g cocoa powder - 1 cup of cocoa powder is 100g. 1/4 of a cup equals 25g therefore 75g of cocoa powder would be 3/4 of a cup.

    Again, if it's too much work or what I'm asking for isn't possible to achieve then it's fine. Thanks again for your time.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,037
    Thanks
    203
    Thanked 2,539 Times in 2,517 Posts
    Try this for the temperature converter:-

    Code:
    COOKING TEMPERATURES CONVERTER
    <br>
    <br>
    
    Celcius <select id = "celcius" onchange = "go(this)">
    <option value = """>Choose ...</option>
    <option value = 140>140</option>
    <option value = 150>150</option>
    <option value = 170>170</option>
    <option value = 180>180</option>
    <option value = 190>190</option>
    <option value = 200>200</option>
    <option value = 220>220</option>
    <option value = 230>230</option>
    <option value = 240>240</option>
    <option value = 260>260</option>
    </select>
    
    Farenheit <select id = "farenheit" onchange = "go(this)">
    <option value = """>Choose ...</option>
    <option value = 275>275</option>
    <option value = 300>300</option>
    <option value = 325>325</option>
    <option value = 350>350</option>
    <option value = 375>375</option>
    <option value = 400>400</option>
    <option value = 425>425</option>
    <option value = 450>450</option>
    <option value = 475>475</option>
    <option value = 500>500</option>
    </select>
    
    Gas Mark <select id = "gas" onchange = "go(this)">
    <option value = """>Choose ...</option>
    <option value = 1>1</option>
    <option value = 2>2</option>
    <option value = 3>3</option>
    <option value = 4>4</option>
    <option value = 5>5</option>
    <option value = 6>6</option>
    <option value = 7>7</option>
    <option value = 8>8</option>
    <option value = 9>9</option>
    <option value = 10>10</option>
    </select>
    
    <script type = "text/javascript">
    
    function go(which) {
    var si = which.selectedIndex;
    alert (si)
    document.getElementById("celcius").selectedIndex = si;
    document.getElementById("farenheit").selectedIndex = si;
    document.getElementById("gas").selectedIndex = si;
    }
    
    </script>

    I am afraid that I still cannot get my head around converting from units of weight (grams or oz) to units of volume (cups). As I see it you need a separate converter for each ingedient.

    The only route I can see is something like this:-


    Code:
    Ingredient<select id = "ingredients" onchange = "cups()">
    <option value = 0>Choose...</option>
    <option value = 1>Granulated sugar</option>
    <option value = 2>Plain flour</option>
    <option value = 3>Horsemeat</option>
    </select>
    
    Weight in grams<select id = "weights" onchange = "cups()">
    <option value = 0>Choose...</option>
    <option value = 50>50g</option>
    <option value = 100>100g</option>
    <option value = 150>150g</option>
    <option value = 200>200g</option>
    <option value = 250>250g</option>
    </select>
    
    
    <script type = "text/javascript">
    function cups() {
    var ing = document.getElementById("ingredients").value;  // value is 0 to whatever
    var si = document.getElementById("ingredients").selectedIndex;
    var ingtext = document.getElementById("ingredients").options[si].text; 
    var wt =  document.getElementById("weights").value;  
    
    if ((ing>0) && (wt >0)) {
    alert ("You have selected " + wt + " grams of " + ingtext);
    
    // use switch statements to find the equivalent value expressed in cups for that quantity of that ingredient.  
    
    
    }
    
    
    }
    
    </script>
    But if there a lot of diffferent ingredients and a lot of weights per ingredient, then it will be long job to code. If you are not able to do that yourself (and you say that you have absolutely no experience with javascript) then you will need to pay a professional to do the job. I just do not have the time! But good luck anyway.
    Last edited by Philip M; 02-25-2013 at 08:39 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,037
    Thanks
    203
    Thanked 2,539 Times in 2,517 Posts
    You should perhaps be aware that computers work with decimal (actually binary) numbers and cannot readily handle fractions.
    You can add .25 to .25 to get .5, but you cannot add 1/4 to 1/4 to get 1/2.

    The more I think about this, the more it seems to me that the simplest and most user-friendly approach is to list the ingredients of a recipe using both weights and cups.

    Granulated sugar 150g (2 1/3 cups)
    Plain flour 200g (1 3/4 cups)
    Horsemeat 500g (6 cups)

    I would advise to forget conversion tools.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Tags for this Thread

    Posting Permissions

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