freeCodeCamp/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-017.md

---
id: 5ddb965c65d27e1512d44daa
title: Part 17
challengeType: 0
isHidden: true
---

## Description

<section id='description'>

While you can use a loop to add everything in the `total` array to a variable, JavaScript provides the useful `reduce()` method.

Chain the `reduce()` method to the `Array.from()` expression.

</section>

## Instructions

<section id='instructions'>
</section>

## Tests

<section id='tests'>

```yml
tests:
  - text: See description above for instructions.
    testString: assert( code.replace(/\s/g, '').match(/Number\(meal\.value\)\)\.reduce\(\)/) );
```

</section>

## Challenge Seed

<section id='challengeSeed'>

<div id='html-seed'>

```html
<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));
  }
</script>
```

</div>

### Before Test

<div id='html-setup'>

```html
<!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>
```

</div>

### After Test

<div id='html-teardown'>

```html
  </body>
</html>
```

</div>

</section>

## Solution

<section id='solution'>

```html
<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();
  }
</script>
```

</section>
feat: tests for calorie counter 2019-12-07 17:11:14 -07:00			`---`
			`id: 5ddb965c65d27e1512d44daa`
			`title: Part 17`
			`challengeType: 0`
feat(learn): sync master and next-curriculum branches 2020-06-24 16:22:14 +09:00			`isHidden: true`
feat: tests for calorie counter 2019-12-07 17:11:14 -07:00			`---`

			`## Description`

			`<section id='description'>`

			While you can use a loop to add everything in the `total` array to a variable, JavaScript provides the useful `reduce()` method.

			Chain the `reduce()` method to the `Array.from()` expression.

			`</section>`

			`## Instructions`

			`<section id='instructions'>`
			`</section>`

			`## Tests`

			`<section id='tests'>`

			```yml
			`tests:`
			`- text: See description above for instructions.`
			`testString: assert( code.replace(/\s/g, '').match(/Number\(meal\.value\)\)\.reduce\(\)/) );`
			```

			`</section>`

			`## Challenge Seed`

			`<section id='challengeSeed'>`

			`<div id='html-seed'>`

			```html
			`<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));`
			`}`
			`</script>`
			```

			`</div>`

			`### Before Test`

			`<div id='html-setup'>`

			```html
			`<!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>`
			```

			`</div>`

			`### After Test`

			`<div id='html-teardown'>`

			```html
			`</body>`
			`</html>`
			```

			`</div>`

			`</section>`

			`## Solution`

			`<section id='solution'>`

			```html
			`<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();`
			`}`
			`</script>`
			```

			`</section>`