Jump to content

Quantity Converter Problem


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)





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/ -->

 .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; }

<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 class="item"> <div><input id="current" value="4" size="4">
                           <label for="current"> Current No. of People </label></div>

<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"> 

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

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

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

(function (d) {

  function calculateResult() {
      = `${'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
        += `${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);
    if (idName != '') { tag.setAttribute('id', idName); }
    if (elClass != '') { tag.setAttribute('class', elClass); }
    return tag;

/* addInput(

  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
    return tag;

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

  var addStuff = function() {
//              tag,  class,id,info,parent [,action]
  d.getElementById('addStuff').addEventListener('click', addStuff);

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



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

  • Create New...