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

---
id: 5ddb965c65d27e1512d44d9f
title: Part 6
challengeType: 0
isHidden: true
---

## Description

<section id='description'>

When a form is submitted, the browser will try to submit it to a server and reload the page. We want to prevent this from happening and do our own processing on the client side.

Prevent the default behavior of the form submit event by calling `e.preventDefault()` inside of the `calculate` function.

</section>

## Instructions

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

## Tests

<section id='tests'>

```yml
tests:
  - text: See description above for instructions.
    testString: assert(calculate.toString().match(/e\.preventDefault\(\s*\)/));
```

</section>

## Challenge Seed

<section id='challengeSeed'>

<div id='html-seed'>

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

  function calculate(e) {}
</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();
  }
</script>
```

</section>
feat: tests for calorie counter 2019-12-07 17:11:14 -07:00			`---`
			`id: 5ddb965c65d27e1512d44d9f`
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-08-25 02:19:45 -07:00			`title: Part 6`
feat: tests for calorie counter 2019-12-07 17:11:14 -07:00			`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'>`

			`When a form is submitted, the browser will try to submit it to a server and reload the page. We want to prevent this from happening and do our own processing on the client side.`

			Prevent the default behavior of the form submit event by calling `e.preventDefault()` inside of the `calculate` function.

			`</section>`

			`## Instructions`

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

			`## Tests`

			`<section id='tests'>`

			```yml
			`tests:`
			`- text: See description above for instructions.`
			`testString: assert(calculate.toString().match(/e\.preventDefault\(\s*\)/));`
			```

			`</section>`

			`## Challenge Seed`

			`<section id='challengeSeed'>`

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

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

			`function calculate(e) {}`
			`</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();`
			`}`
			`</script>`
			```

			`</section>`