freeCodeCamp/part-12.md at b99d78858be1d1ab1aae3417e00c38a458a72ae3

lmilliken 39b0afd5f0 feat: tests for calorie counter

2020-09-16 11:54:00 +05:30

3.1 KiB

Raw Blame History

id, title, challengeType, isBeta

id	title	challengeType	isBeta
5ddb965c65d27e1512d44da5	Part 12	0	true

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()

Instructions

Tests

tests:
  - text: See description above for instructions.
    testString: assert( code.toString().replace(/\s/g, '').match(/Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)\.map\(\)\;?/) );

Challenge Seed

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

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

Before Test

<!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 Test

  </body>
</html>

Solution

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

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

3.1 KiB Raw Blame History