--description--

In this step, you will complete the updateResultsList function.

Now iterate through the units array. For each value, check if it is not equal to the current unit (unitToConvert.value).

If the condition is true, convert the existing unit to the current unit and add a new list item to resultList in the format:

ingredient: quantity unit

For example, if the input is flour, 5, and gram, the result should be:

flour: 0.02 cup
flour: 0.18 ounce
flour: 1.00 teaspoon

--hints--

When clicking the button your updateResultsList function should properly update the DOM.

ingredientName.value = "Flour";
ingredientQuantity.value = 5;
numberOfServings.value = 5;
unitToConvert.value = "gram";
const submit = new Event("submit");
recipeForm.dispatchEvent(submit);
assert.include(resultList.innerHTML, "<li>Flour: 0.10 cup</li>");
assert.include(resultList.innerHTML, "<li>Flour: 0.88 ounce</li>");
assert.include(resultList.innerHTML, "<li>Flour: 5.00 teaspoon</li>");

--seed--

--seed-contents--

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Recipe Ingredient Converter</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main class="container">
      <h1>Recipe Ingredient Converter</h1>
      <form id="recipe-form">
        <div class="input-container">
          <label for="ingredient">Ingredient:</label>
          <input type="text" id="ingredient" required />
        </div>

        <div class="input-container">
          <label for="quantity">Quantity:</label>
          <input type="number" id="quantity" step="any" required />
        </div>

        <div class="input-container">
          <label for="unit">Unit:</label>
          <select id="unit">
            <option value="cup">Cup</option>
            <option value="gram">Gram</option>
            <option value="ounce">Ounce</option>
            <option value="teaspoon">Teaspoon</option>
          </select>
        </div>
        <div class="input-container">
          <label for="servings">Number of Servings:</label>
          <input type="number" id="servings" step="any" value="1" />
        </div>
        <button type="submit">Convert</button>
      </form>

      <section>
        <h2>Converted Ingredients</h2>
        <ul id="result-list"></ul>
      </section>
    </main>
    <script src="script.js"></script>
  </body>
</html>

css

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --dark-grey: #0a0a23;
  --white: #fff;
  --light-grey: #ddd;
  --golden-yellow: #fecc4c;
  --yellow: #ffcc4c;
  --gold: #feac32;
  --orange: #ffac33;
  --dark-orange: #f89808;
}

body {
  font-family: Arial, sans-serif;
  background-color: var(--dark-grey);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

h1 {
  margin: 10px 0 15px;
}

.container {
  text-align: center;
  background: var(--white);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 600px;
}

input,
select {
  padding: 10px;
  font-size: 16px;
  margin: 5px 0;
  border: 1px solid var(--light-grey);
  border-radius: 4px;
}

button {
  font-size: 1.2rem;
  cursor: pointer;
  width: 200px;
  margin: 20px 0 30px;
  color: var(--dark-grey);
  background-color: var(--gold);
  background-image: linear-gradient(var(--golden-yellow), var(--orange));
  border-color: var(--gold);
  border-width: 3px;
}

button:hover {
  background-image: linear-gradient(var(--yellow), var(--dark-orange));
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  padding: 10px;
  border-bottom: 1px solid var(--light-grey);
  display: flex;
  justify-content: space-between;
}

const conversionTable = {
  cup: { gram: 240, ounce: 8.0, teaspoon: 48 },
  gram: { cup: 1 / 240, ounce: 0.0353, teaspoon: 0.2 },
  ounce: { cup: 0.125, gram: 28.35, teaspoon: 6 },
  teaspoon: { cup: 1 / 48, gram: 5, ounce: 0.167 },
}

const convertQuantity = (fromUnit) => (toUnit) => (quantity) => {
  const conversionRate = conversionTable[fromUnit][toUnit];
  return quantity * conversionRate;
}

const gramsResult = convertQuantity("cup")("gram")(2);
console.log(gramsResult);

const adjustForServings = (baseQuantity) => (newServings) =>
  baseQuantity * newServings;

const servingsResult = adjustForServings(4)(6);
console.log(servingsResult);

const processIngredient = (baseQuantity, baseUnit, newUnit, newServings) => {
  const adjustedQuantity = adjustForServings(baseQuantity)(newServings);
  const convertedQuantity =
    convertQuantity(baseUnit)(newUnit)(adjustedQuantity);
  return convertedQuantity.toFixed(2);
};

const ingredientName = document.getElementById("ingredient");
const ingredientQuantity = document.getElementById("quantity");
const unitToConvert = document.getElementById("unit");
const numberOfServings = document.getElementById("servings");
const recipeForm = document.getElementById("recipe-form");
const resultList = document.getElementById("result-list");

const units = ["cup", "gram", "ounce", "teaspoon"];

--fcc-editable-region--
const updateResultsList = () => {
  resultList.innerHTML = "";
}

--fcc-editable-region--

recipeForm.addEventListener("submit", (event) => {
  event.preventDefault();
  updateResultsList();
});

--solutions--