2.9 KiB

Raw Blame History

id	title	challengeType	dashedName
5ddb965c65d27e1512d44da5	Step 12	0	step-12

--description--

We need a way to iterate through all the meal items in the total array and return the values that the user entered as an array.

The map() method allows us to do exactly that.

Delete const meal = total[0]; and chain the .map() method to the end of your Array.from() method. Here's an example of .map() chained to an array: [3, 2, 1].map()

--hints--

See description above for instructions.

assert(
  code
    .toString()
    .replace(/\s/g, '')
    .match(
      /Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)\.map\(\)\;?/
    )
);

--seed--

--before-user-code--

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <form id="calorie-form">
        <h2 class="center">Calorie Counter</h2>
        <div class="grid">
          <legend>Sex</legend>
          <div>
            <input type="radio" name="sex" id="female" value="F" checked />
            <label for="female">
              Female (2,000 calories)
            </label>

            <div>
              <input type="radio" name="sex" id="male" value="M" />
              <label for="male">
                Male (2,500 calories)
              </label>
            </div>
          </div>
        </div>
        <div class="grid" id="entries">
          Breakfast
          <input
            type="number"
            min="0"
            class="cal-control"
            id="breakfast"
          /><br />
          Lunch
          <input type="number" min="0" class="cal-control" id="lunch" /><br />
          Dinner <input type="number" min="0" class="cal-control" id="dinner" />
        </div>
        <button type="button" class="btn-add" id="add">
          Add Entry
        </button>
        <button type="submit" class="btn-solid" id="calculate">
          Calculate
        </button>
        <button type="button" class="btn-outline" id="clear">
          Clear
        </button>
      </form>
      <div id="output"></div>
    </div>
  </body>
</html>

--after-user-code--

  </body>
</html>

--seed-contents--

<script>
--fcc-editable-region--
  document.getElementById('calorie-form').onsubmit = calculate;

  function calculate(e) {
    e.preventDefault();
    const total = Array.from(document.getElementsByClassName('cal-control'));
    const meal = total[0];
  }
--fcc-editable-region--
</script>

--solutions--

<script>
  document.getElementById('calorie-form').onsubmit = calculate;

  function calculate(e) {
    e.preventDefault();
    const total = Array.from(
      document.getElementsByClassName('cal-control')
    ).map();
  }
</script>

2.9 KiB Raw Blame History