freeCodeCamp/part-021.md at 104a8068e323ac304f68eac64873bce1dc79b4b3

Randell Dawson b9c9a95223 chore(learn): Renamed all project-based curriculum project step filenames to use 3-digit format of part-ddd.md (#39463 )

* fix: renamed basic html cat photo app steps

* fix: renamed css-variables project steps

* fix: renamed d3-dashboard filenames

* fix: renamed rpg-game filenames

* fix: renamed functional-progamming-spreadsheet filenames

* fix: renamed calorie-counter project filenames

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

3.7 KiB

Raw Blame History

id, title, challengeType, isHidden

id	title	challengeType	isHidden
5e302e80e003129199103c78	Part 21	0	true

Description

To track how the reduce() function works, log the values of the accumulator and currentValue in the callback function before the return statement like this: console.log({ accumulator })

You can also check your progress by adding console.log({ total }) at the end of the calculate() function.

When you enter calorie values in the form and push the Calculate button, you will see the values of accumulator and currentValue in each iteration of the reduce() callback function.

Instructions

Tests

tests:
  - text: See description above for instructions.
    testString: assert( code.replace(/\s/g, '').match(/console.log\({accumulator}\)/) );

Challenge Seed

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

  function calculate(e) {
    e.preventDefault();

    const total = Array.from(document.getElementsByClassName('cal-control'))
      .map(meal => Number(meal.value))
      .reduce((accumulator, currentValue) => {
        // log the values of the `accumulator` and `currentValue` here
        return accumulator + currentValue;
      }, 0);

    // log the value of `total` here
  }
</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(meal => Number(meal.value))
      .reduce((accumulator, currentValue) => {
        console.log({ accumulator });
        console.log({ currentValue });
        return accumulator + currentValue;
      }, 0);

    console.log({ total });
  }
</script>

3.7 KiB Raw Blame History