-3

My code is focused on cooking (Banana Bread recipe). Depending on the number of people, I will sometimes make two Banana Bread's as opposed to one. Thus, I use the selection tool to account for this by changing the amount of each ingredient. Yet, my problem is JavaScript converting the fractions into decimals. I want to keep the numbers in fractions because this is how the majority of cooking is done.

Ideal Example
If 1 was selected, it would say 2 cups flour, ½ tsp salt.
If 2 was selected, it would say 4 cups flour, 1 tsp salt.
If 3 was selected, it would say 6 cups flour, 1 ½ tsp salt.

What actually happens:
If 1 was selected, it would say 2 cups flour, 0.5 tsp salt.
If 2 was selected, it would say 4 cups flour, 1 tsp salt.
If 3 was selected, it would say 6 cups flour, 1.5 tsp salt.

Code:

<body>
<script>

   // Step 1: Find the element we want the event on

     var button = document.getElementById("button");

   // Step 2: Define the event listener function

     var onButtonClick = function() {
        var selection = document.getElementById("quantity").value;
        const breadsQuantity = parseInt(selection, 10);

        document.getElementById('amount').innerHTML = breadsQuantity * 2;
        document.getElementById('amount2').innerHTML = breadsQuantity * 0.5;
                                    }

   // Step 3: Attach event listener to element

         button.addEventListener("click", onButtonClick);

</script>

<!-- HTML SNIPPIT -->

<label>How many Banana Bread's are you making? </label>

    <select id="quantity">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
    </select><br><br>

    <button id="button" type="button">
        Let's get started!
    </button>

    <p>
        Step 1: Add
        <span id="amount">2</span> cups flour and
        <span id="amount2">&frac12;</span>
        tsp salt into a large, dry bowl.
    </p>
 </body>
Pulvinar
  • 11
  • 6
  • 1
    Convert to the units you actually want, or do the math differently. There are likely fraction libraries available for JS. – Dave Newton Jun 13 '19 at 17:29
  • not sure how you expect it to render as a fraction when you are do an operation on it. – epascarello Jun 13 '19 at 17:32
  • Maybe here: https://stackoverflow.com/questions/23575218/convert-decimal-number-to-fraction-in-javascript-or-closest-fraction – redrum Jun 13 '19 at 17:37
  • As a point to note, no conversion from fraction to decimal actually took place. Your input was `parseInt` 'd by you. – maswerdna Jun 13 '19 at 18:06

1 Answers1

1

JavaScript does not "convert" fractions into decimals. Be definition they are the same thing. What you want is a different representation of those values.

Use Unicode symbols to accomplish your goal:

As an example, substitute ½ for 0.5:

<span>Sugar: &#189; cup</span>

from here:

http://unicodefractions.com

And here is a quick implementation to show how this can been done:

var button = document.getElementById("button");
var onButtonClick = function() {
  var selection = document.getElementById("quantity").value;
  const breadsQuantity = parseInt(selection, 10);
  document.getElementById('amount').innerHTML = breadsQuantity * 2;
  document.getElementById('amount2').innerHTML = getFraction(breadsQuantity * 0.5);
}
button.addEventListener("click", onButtonClick);


function getFraction(measure) {
  const measures = {
    half: "&frac12;",
    onethird: "&‌#8531;",
    twothird: "&‌#8532;",
    quarter: "&frac14;",
    threequarter: "&frac34;"
  };
  let out = '';
  if (measure > 1) {
    out = parseInt(measure);
    measure = measure - out;
  }
  switch (measure) {
    case (1 / 2):
      out += measures.half;
      break;
    case (1 / 3):
      out += measures.onethird;
      break;
    case (2 / 3):
      out += measures.twothird;
      break;
    case (1 / 4):
      out += measures.quarter;
      break;
    case (3 / 4):
      out += measures.threequarter;
      break;
    default:
      out += measure;
  }
  return out;
}
<label>How many Banana Bread's are you making? </label>

<select id="quantity">
  <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>
</select><br><br>

<button id="button" type="button">
        Let's get started!
    </button>

<p>
  Step 1: Add
  <span id="amount">2</span> cups flour and
  <span id="amount2">&frac12;</span> tsp salt into a large, dry bowl.
</p>

Please note input values must be rounded for this to work correctly with computed values.

Randy Casburn
  • 13,840
  • 1
  • 16
  • 31
  • Sorry Randy, this did not work. It failed to take into account the selection tool. When I changed the amount of banana breads from 1 to 3, the amount of salt did not change. I also received an ILLEGAL TOKEN on the following line: document.getElementById('output').innerHTML = `Add ${getFraction(0.5)} cups of sugar`; – Pulvinar Jun 13 '19 at 19:09
  • 2
    I thought you were looking for an answer to "how can i show a fraction instead of a decimal" - I answered that. Didn't realize you were looking for someone to write your code for you - I'll update the answer when I get a few minutes. – Randy Casburn Jun 13 '19 at 19:17
  • I've updated the post. consider this part of your homework finished for you. – Randy Casburn Jun 13 '19 at 22:20
  • Randy you're right, I could have worded my question better. Also, this isn't for homework, coding is a hobby of mine. – Pulvinar Jun 13 '19 at 23:03
  • Glad to know it isn't homework. you would be amazed at how may people expect us to complete homework assignments for them. I'm glad to help. Please accept my answer if it meets your needs. – Randy Casburn Jun 13 '19 at 23:26