Design the dynamic ingredients input form

[finne132]

• [ ] after the users enters one ingredient, automatically add a new text input line
• [ ] Do we want to do a slider for calorie content?
• [ ] html/css designer should work with the javascript person (Joe) to make sure we have good id selectors to grab values from the DOM with jquery

[finne132]

We should do this after the basic bootstrapping

[finne132]

The HTML for the form should use something like this for dynamically adding inputs. This requires the user to hit a button (plus icon) to add a new text field. This example code uses a limit of the maximum number of items that can be added. We can probably set out limit much higher, but should still use a maximum to prevent abuse of the form.

HTML (somewhere inside of the form tag) `

Entry 1

` Then the JS would look like this...

JAVASCRIPT

// start a counter at 1 var counter = 1; // this sets the limit for the number of text input fields that can be added var limit = 3; function addInput(divName){ if (counter == limit) { alert("You have reached the limit of adding " + counter + " inputs"); } else { var newdiv = document.createElement('div'); newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>"; document.getElementById(divName).appendChild(newdiv); counter++; } }

[finne132]

Issue #32 is dependent on the completion of this one.

So for issue 32 to be satisfied... this function must assign the class (or ID) textField${counter} to each dynamically generated text input field. This will allow us to iterate over it with a loop later. It should count/iterate starting from 0

[finne132]

So that means when a new field gets created it should have the ID or class of...

textField0, textField1, textField2, and so forth. We can use a "counter" variable to track this.

The counter variable will need to be returned to the queryBuilder function to know how many text fields it has to iterate through and get values for. queryBuilder will grab each individual ingredient from its text field and append it to an ingredients[] array