Jump to content

Quantity Converter Problem


Arhtur_Barker
 Share

Recommended Posts

Hi all, 

I am fairly new to HTML/CSS and I am trying to make a quantity converter for food recipes as just a little challenge for myself. I think I have got most of the code down (I have created the basic function of the code, and got all the <input> and css write... I think) , but I am now stuck. At the moment in the they can only use one ingredient (or how many <inputs> I have put in there) but what I want to do is add a button which  basically adds more inputs, so that they can add as many ingredients as they need. 

How do I do this? (I have added what I have done below)

 

Cheers 

 

Arthur 

Ian's Quantity Converter.html

Link to comment
Share on other sites

  • 3 weeks later...

Here's something you might be able to modify to your specific needs:

<!DOCTYPE html><html lang="en"><head><title> Ian's Converter </title>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<!-- From: https://w3schools.invisionzone.com/topic/61432-quantity-converter-problem/ -->

<style>
 .container {
   display: grid;
   grid-template-columns: auto auto;
   padding: 10px;
   width: 30em;
 }
 .item { border: 1px solid rgba(0, 0, 0, 0.8); }

 body { background-color: lightBlue; }
 h1 {
   font-size: 50px;
   text-align: center;
 }
 h2 { font-size: 30px; }

 fieldset { width: 30em; }
 #calculate { font-size: 25px; }
 button, label { cursor: pointer; }
 textarea { height: 10em; width: 40em; }
</head><body>
</style>

<h1> Ian's Quantity Converter </h1>

<h2> People to Serve </h2>
 <div class="container">
   <div class="item"> <div><input id="orginal" value="2" size="4" placeholder="Ingredient">
                           <label for="original"> Orginal No. of People </label></div>
   </div>
   <div class="item"> <div><input id="current" value="4" size="4">
                           <label for="current"> Current No. of People </label></div>
   </div>
 </div>
 <br>

<fieldset><legend> Ingredients and Quantity </legend>
 <div id="stuff" class="container">
  <input class="item" value="" value="" size="30" placeholder="Ingredient"> 
  <input class="item" value="" value="" size="5" placeholder="Quantity"> 
 </div>

 <p> <button id="addStuff"> Add Stuff </button>
</fieldset>

<p> <button id="calculate"> Calculate Amounts </button>

<h2> Results </h2>
<textarea id="results" readonly></textarea>

<script>
(function (d) {
  console.clear();

  function calculateResult() {
    d.getElementById('results').value 
      = `${'Ingredients'.padEnd(40,' ')} : Quantity\n`;

    var sel = d.querySelectorAll('#stuff input'),
        serving, actualServing;
    for (let i=0; i<sel.length; i=i+2) {
      serving = sel[i+1].value / orginal.value
      actualServing = serving * current.value
    
      d.getElementById('results').value 
        += `${sel[i].value.padEnd(40,' ')} : ${actualServing}\n`;
    }
  }

  function addElement(tagName, elClass='', idName='', info='', parent=document.body) {
    var tag = d.createElement(tagName);
    var txt = d.createTextNode(info);
    tag.appendChild(txt);
    if (idName != '') { tag.setAttribute('id', idName); }
    if (elClass != '') { tag.setAttribute('class', elClass); }
    parent.appendChild(tag);
    return tag;
  }

/* addInput(
            tagType='text|button|checkbox|radio',
            idName='|ID|name', 
            info='',
            parent=document.body
            action=null|function
           )
*/

  function addInput(tagType='text', elClass='', idName='', info='', parent=document.body, action=null) {
    var tag = d.createElement('input');
    tag.setAttribute('type', tagType);
    if (tagType == 'radio') { tag.setAttribute("name", idName); }
                       else { tag.setAttribute("id", idName); }
    tag.setAttribute('placeholder', info);
    tag.setAttribute('value', '');
    if (elClass != '') { tag.setAttribute('class', elClass); }
    if (typeof action == 'function') 
      tag.addEventListener('click', action); // element function when clicked
    parent.appendChild(tag);
    return tag;
  }

  function btnClear(el) { while (el.firstChild) el.removeChild(el.firstChild); }

  var addStuff = function() {
//              tag,  class,id,info,parent [,action]
    addInput('input','item','','Ingredient',d.getElementById('stuff'));
    addInput('input','item','','Quantity',d.getElementById('stuff'));
  }
  d.getElementById('addStuff').addEventListener('click', addStuff);

  d.getElementById('calculate').addEventListener('click', calculateResult);

})(document)
</script>

</body></html>

Possible modifications if desired:
1. Remove line of "Ingredients | Quantity" if added in error or just clear contents of last entry
2. Skip "Results" display line if "Ingredient" is blank
3. Change "Results" display to a <OL> list display
4. Alter "Quantity" values to limit to 2 or less decimals if math converts to weird fraction.

Good Luck!

BTW, welcome to the forums. :)

 

Edited by JMRKER
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...