newIngredient.ejs 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <div id="newIngredient">
  2. <div class="sidebarIconButtons">
  3. <button class="iconButton" onclick="closeSidebar()">
  4. <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  5. <line x1="5" y1="12" x2="19" y2="12"></line>
  6. <polyline points="12 5 19 12 12 19"></polyline>
  7. </svg>
  8. </button>
  9. </div>
  10. <h1>NEW INGREDIENT</h1>
  11. <label>NAME:
  12. <input id="newIngName" type="text">
  13. </label>
  14. <label>CATEGORY:
  15. <input id="newIngCategory" type="text">
  16. </label>
  17. <label>QUANTITY:
  18. <input id="newIngQuantity" type="number" min="0" step="0.01">
  19. </label>
  20. <label>UNIT:
  21. <select id="unitSelector">
  22. <optgroup label="MASS/WEIGHT">
  23. <option value="g">g</option>
  24. <option value="kg">kg</option>
  25. <option value="oz">oz</option>
  26. <option value="lb">lb</option>
  27. </optgroup>
  28. <optgroup label="VOLUME">
  29. <option value="ml">ml</option>
  30. <option value="l">l</option>
  31. <option value="tsp">tsp</option>
  32. <option value="tbsp">tbsp</option>
  33. <option value="ozfl">oz. fl</option>
  34. <option value="cup">cup</option>
  35. <option value="pt">pt</option>
  36. <option value="qt">qt</option>
  37. <option value="gal">gal</option>
  38. </optgroup>
  39. <optgroup label="LENGTH">
  40. <option value="m">m</option>
  41. <option value="cm">cm</option>
  42. <option value="mm">mm</option>
  43. <option value="in">in</option>
  44. <option value="ft">ft</option>
  45. </optgroup>
  46. <optgroup label="OTHER">
  47. <option value="count">count</option>
  48. </optgroup>
  49. </select>
  50. </label>
  51. <button class="button" onclick="newIngredientComp.submit()">CREATE</button>
  52. </div>