freeCodeCamp/part-21.md at 39b0afd5f0e6fc3f2bcaaa5544d44a54679436a6

lmilliken 39b0afd5f0 feat: tests for calorie counter

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

3.7 KiB

Raw Blame History

id, title, challengeType, isBeta

id	title	challengeType	isBeta
5ddb965c65d27e1512d44dae	Part 21	0	true

Description

Now that we have the total number of calories that the user entered. We need to determine the maximum calories they should consume.

Look at the form and notice that there are radio buttons for Female and Male. If Female is selected, the maximum calories a normal Female should consume is 2000. If Male is selected, the maximum is 2500.

If you inspect the Female radio button you will notice its id attribute: <input type="radio" name="sex" id="female" value="F" checked="">

Create a variable named maxCalories and set it equal to the document element with the id of female. This is similar to how you reference the element with the id of calorie-form at the beginning of this file.

Instructions

Tests

tests:
  - text: See description above for instructions.
    testString: assert(/const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)/.test(code));

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) => accumulator + currentValue, 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(meal => Number(meal.value))
      .reduce((accumulator, currentValue) => accumulator + currentValue, 0);

    const maxCalories = document.getElementById('female');
  }
</script>

3.7 KiB Raw Blame History