feat: tests for calorie counter
This commit is contained in:
lmilliken
committed by
Mrugesh Mohapatra
Mrugesh Mohapatra
parent
d3d5147c1f
commit
39b0afd5f0
@ -0,0 +1,131 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44d9a
|
||||
title: Part 01
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
|
||||
When a browser loads a page, it creates a Document Object Model (DOM) representation of the page which includes all of the HTML elements in a tree structure.
|
||||
|
||||
In JavaScript, you can access the DOM by referencing the global `document` object.
|
||||
|
||||
To view the DOM, log it to the console with `console.log(document)`.
|
||||
|
||||
|
||||
</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(/console\.log\(document\)/));
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
|
||||
</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>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
### After Test
|
||||
<div id='html-teardown'>
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
console.log(document);
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,139 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44d9b
|
||||
title: Part 02
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
In our HTML document, we have a form element with an `id` attribute: `<form id="calorie-form">`
|
||||
|
||||
To reference and access this particular form in JavaScript, we can use the getElementById() method on the document and provide the ID.
|
||||
|
||||
The code `document.getElementById('my-form')` gets a reference to an HTML element with an `id` of `my-form`. Get a reference to the HTML element with the `id` of `calorie-form`.
|
||||
|
||||
</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(/document\.getElementById\([\'\"\`]calorie\-form[\'\"\`]\)/) );
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
//console.log(document);
|
||||
</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>
|
||||
//console.log(document);
|
||||
document.getElementById('calorie-form');
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,142 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44d9c
|
||||
title: Part 03
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Now we need to specify what should be done with the form when the user submits it by clicking the Calculate button.
|
||||
|
||||
Forms have an `onsubmit` event that can execute a function when the form is submitted.
|
||||
|
||||
For example, in `document.getElementById('my-form').onsubmit = processForm;`, the function `processForm` will run when the form is submitted.
|
||||
|
||||
Assign a function named `calculate` to the `onsubmit` event of your form.
|
||||
|
||||
You will create the `calculate` function later.
|
||||
|
||||
</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(/document\.getElementById\([\'\"\`]calorie\-form[\'\"\`]\)\.onsubmit\=calculate/) );
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.getElementById('calorie-form');
|
||||
</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;
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,141 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44d9d
|
||||
title: Part 04
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Create the `calculate` function that will hold the code to sum up the user's calorie inputs. Leave the body blank for now.
|
||||
Here is an example of an empty function called `square`:
|
||||
|
||||
```js
|
||||
function square() {}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: See description above for instructions.
|
||||
testString: assert( typeof calculate === "function" );
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.getElementById('calorie-form').onsubmit = calculate;
|
||||
</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() {}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,146 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44d9e
|
||||
title: Part 05
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
By default, `onsubmit` will pass the event object as a parameter to the function it calls.
|
||||
People usually call it `e`, short for event.
|
||||
Update the `calculate()` function to accept `e` as parameter.
|
||||
|
||||
Here is an example of an empty function called `square` that takes a `number` as a parameter:
|
||||
|
||||
```js
|
||||
function square(number) {}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: See description above for instructions.
|
||||
testString: assert(calculate.toString().match(/function calculate\(\s*e\)\s*\{\s*\}/));
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.getElementById('calorie-form').onsubmit = calculate;
|
||||
|
||||
function calculate() {}
|
||||
</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) {}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,142 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44d9f
|
||||
title: Part 06
|
||||
challengeType: 0
|
||||
isBeta: 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>
|
||||
@ -0,0 +1,147 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44da0
|
||||
title: Part 07
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
If you inspect the inputs in the form, you will notice that they have the class name `cal-control`.
|
||||
|
||||
To access elements with a certain class name, we use the `getElementsByClassName()` method.
|
||||
|
||||
Similar to how you referenced the calorie form above (`document.getElementById('calorie-form')`), create a reference to the elements with the class name `cal-control` below `e.preventDefault()`.
|
||||
|
||||
</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(/document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)/) );
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.getElementById('calorie-form').onsubmit = calculate;
|
||||
|
||||
function calculate(e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
</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();
|
||||
document.getElementsByClassName('cal-control');
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,144 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44da1
|
||||
title: Part 08
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Now assign the document object you just referenced to a variable named `total`. Since this variable will not change, use `const` to create it.
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: See description above for instructions.
|
||||
testString: assert(/const\s*total\s*=\s*document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)/.test(code));
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.getElementById('calorie-form').onsubmit = calculate;
|
||||
|
||||
function calculate(e) {
|
||||
e.preventDefault();
|
||||
document.getElementsByClassName('cal-control');
|
||||
}
|
||||
</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 = document.getElementsByClassName('cal-control');
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,145 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44da2
|
||||
title: Part 09
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
To make the document objects easier to handle, let's turn them into an array.
|
||||
Wrap the `document.getElementsByClassName('cal-control')` portion of your code in an `Array.from()` method.
|
||||
|
||||
</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(/Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)/) );
|
||||
```
|
||||
|
||||
</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 = document.getElementsByClassName('cal-control');
|
||||
}
|
||||
</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'));
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,145 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44da3
|
||||
title: Part 10
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Create a variable named `meal` and set it equal to the first index of `total` (`total[0]`). This would be the input for Breakfast on the form.
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: See description above for instructions.
|
||||
testString: assert(/const\s*meal\s*=\s*total\[0\]/.test(code));
|
||||
```
|
||||
|
||||
</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'));
|
||||
}
|
||||
</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'));
|
||||
const meal = total[0];
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,146 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44da4
|
||||
title: Part 11
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Log `meal.value` to the console, enter a number in the Breakfast input and hit the Calculate button. You'll notice that it displays what you entered.
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: See description above for instructions.
|
||||
testString: ''
|
||||
```
|
||||
|
||||
</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'));
|
||||
const meal = total[0];
|
||||
}
|
||||
</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'));
|
||||
const meal = total[0];
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,152 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44da5
|
||||
title: Part 12
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='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()`
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: See description above for instructions.
|
||||
testString: assert( code.toString().replace(/\s/g, '').match(/Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)\.map\(\)\;?/) );
|
||||
```
|
||||
|
||||
</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'));
|
||||
const meal = total[0];
|
||||
}
|
||||
</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();
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,156 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44da6
|
||||
title: Part 13
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Now we need to provide a function to `map()` that will be performed on each item of the array.
|
||||
|
||||
This function will take the original item as an argument, in our case we'll call it `meal`. Inside the `.map()` parentheses, insert an empty function that takes `meal` as a parameter, like:
|
||||
|
||||
```js
|
||||
function(meal){}
|
||||
```
|
||||
|
||||
Enter in the above function as an argument in between the parentheses of the `.map()` function.
|
||||
|
||||
</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(/map\(function\(\s*meal\)\{\}\)/) );
|
||||
```
|
||||
|
||||
</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();
|
||||
}
|
||||
</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(function(meal) {});
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,152 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44da7
|
||||
title: Part 14
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Inside the function body, insert `return meal.value`, since it is the value of the individual `cal-control` inputs that we want.
|
||||
|
||||
If you want, console log `total` to see what results you are getting.
|
||||
|
||||
</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(/\(function\(meal\)\{returnmeal\.value\;?\}\)/) );
|
||||
```
|
||||
|
||||
</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(function(meal) {});
|
||||
}
|
||||
</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(function(meal) {
|
||||
return meal.value;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,152 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44da8
|
||||
title: Part 15
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Since eventually we'll be adding all of the meal calories in the `total` array, explicitly convert `meal.value` into a number by wrapping it in the `Number()` function.
|
||||
|
||||
</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\)\;?/) );
|
||||
```
|
||||
|
||||
</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(function(meal) {
|
||||
return 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(function(meal) {
|
||||
return Number(meal.value);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,151 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44da9
|
||||
title: Part 16
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Now let's simplify the function by refactoring it to use arrow functions. As an example, `function(x) {return x*x}` can be refactored as`x => x*x`.
|
||||
|
||||
</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(/meal\=\>Number\(meal\.value\)/) );
|
||||
```
|
||||
|
||||
</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(function(meal) {
|
||||
return 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));
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,152 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44daa
|
||||
title: Part 17
|
||||
challengeType: 0
|
||||
isBeta: 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>
|
||||
@ -0,0 +1,160 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dab
|
||||
title: Part 18
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
The `reduce()` method takes a callback function with at least two arguments, an accumulator and a current value:
|
||||
|
||||
`function(accumulator, currentValue) { /* code to run */ }`
|
||||
|
||||
or using arrow functions:
|
||||
|
||||
`(accumulator, currentValue) => { /*code to run*/ }`
|
||||
|
||||
Insert the above callback function as an argument in the `.reduce()` method.
|
||||
|
||||
</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(/reduce\(\(accumulator\,currentValue\)\=\>\{\/\*codetorun\*\/\}\)/) );
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce();
|
||||
}
|
||||
</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((accumulator, currentValue) => {
|
||||
/*code to run*/
|
||||
});
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,162 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dac
|
||||
title: Part 19
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Provide the number zero as the initial value of the `reduce()` method by passing it as the second argument.
|
||||
|
||||
Here is an example of a `reduce()` method with an empty object as its initial value:
|
||||
|
||||
```js
|
||||
arr.reduce((accumulator, currentValue) => {
|
||||
/*code to run*/
|
||||
}, {});
|
||||
```
|
||||
|
||||
</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(/reduce\(\(accumulator\,currentValue\)\=\>\{\/\*codetorun\*\/\}\,0\)/) );
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => {
|
||||
/* code to run */
|
||||
});
|
||||
}
|
||||
</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((accumulator, currentValue) => {
|
||||
/*code to run*/
|
||||
}, 0);
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,170 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dad
|
||||
title: Part 20
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
We want to sum up all of the numbers in the `total` array.
|
||||
|
||||
As an example, let's says we have an array `[1,3,5]` named `arr` and we want to sum up all the numbers.
|
||||
|
||||
We can use the reduce function as follows
|
||||
`arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);`
|
||||
|
||||
At `arr[0]`, the function is `(0, 1) => 0 + 1`,
|
||||
since `arr[0] = 1 = currentValue`
|
||||
|
||||
Note that the `accumulator` starts at `0` because that is what we provide as the initial value argument. After running `0 + 1`, the accumulator is now `1`, which is passed to next invocation of the callback function at
|
||||
|
||||
arr[1], the function is `(1, 3) => 1 + 3`,
|
||||
|
||||
arr[2], the function is `(4, 5) => 4 + 5`, now the accumulator is `9` and we have gone through all of the items in `arr`, the reduce function will return `9`.
|
||||
|
||||
Replace the whole body of the callback function (`{/*code to run*\/}`) with `accumulator + currentValue`.
|
||||
|
||||
If you desire, you can now check your progress by adding `console.log(total)`, entering in values in the form, and then push the Calculate button. You will see that the console will log the sum of the inputs that you entered, this is awesome!
|
||||
|
||||
</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(/reduce\(\(accumulator\,currentValue\)\=\>accumulator\+currentValue\,0\)/) );
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => {
|
||||
/*code to run*/
|
||||
}, 0);
|
||||
}
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,158 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dae
|
||||
title: Part 21
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='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.
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: See description above for instructions.
|
||||
testString: assert(/const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)/.test(code));
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
}
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female');
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,156 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44daf
|
||||
title: Part 22
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Inspect the Female radio button again and notice that it has a `checked` attribute if it's checked: `<input type="radio" name="sex" id="female" value="F" checked>`
|
||||
|
||||
Check to see if the Female radio button is checked or not by chaining on the `.checked` attribute to `document.getElementById('female')`.
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: See description above for instructions.
|
||||
testString: assert(/const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked/.test(code));
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female');
|
||||
}
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked;
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,166 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44db0
|
||||
title: Part 23
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Use a ternary operator to assign the value of `maxCalories`. A ternary operator has the following syntax: `condition ? expressionTrue : expressionFalse`.
|
||||
|
||||
For example, `(5 - 3 === 4) ? "Yes" : "No"` does the same thing as the following if else statement:
|
||||
|
||||
```javascript
|
||||
if (5 - 3 === 4) {
|
||||
return 'Yes';
|
||||
} else {
|
||||
return 'No';
|
||||
}
|
||||
```
|
||||
|
||||
`document.getElementById('female').checked` will return either `true` if it is checked or `false` if it isn't. Use a ternary operator to return 2000 if it is is checked and 2500 if it is not.
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: See description above for instructions.
|
||||
testString: assert(/const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked\s*\?\s*2000\s*\:\s*2500/.test(code));
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked;
|
||||
}
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,158 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44db1
|
||||
title: Part 24
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Now that we have `total` and `maxCalories`, we need to find out the difference between them.
|
||||
|
||||
Create a variable named `difference` and set it equal to `total - maxCalories`
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: See description above for instructions.
|
||||
testString: assert(/const\s*difference\s*\=\s*total\s*\-\s*maxCalories?/.test(code));
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
}
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,166 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44db2
|
||||
title: Part 25
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
If `difference` is positive, the total calories the user ate is more than the `maxCalories` recommended, or a calories surplus -- otherwise, if `difference` is negative, the user has a calorie deficit.
|
||||
|
||||
To determine if this is a calorie surplus or deficit, create a variable named `surplusOrDeficit` to determine if the difference is positive (`difference > 0`).
|
||||
|
||||
If it is positive, `surplusOrDeficit` should be set equal to the string "Surplus", and "Deficit" if negative.
|
||||
|
||||
Use the same ternary syntax that you used to determine `maxCalories`.
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: See description above for instructions.
|
||||
testString: assert(/const\s*surplusOrDeficit\s*\=\s*difference\s*\>\s*0\s*\?\s*[\'\"\`]Surplus[\'\"\`]\s*\:\s*[\'\"\`]Deficit[\'\"\`]/.test(code));
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
}
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,168 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44db3
|
||||
title: Part 26
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
If you look near the bottom of the HTML page, notice that there is currently an empty `div` element: `<div id="output"></div>`.
|
||||
|
||||
We will be inserting output inside this `div`, telling the user if they are in a calorie surplus or deficit.
|
||||
|
||||
Create a variable named `output` and set it equal to this division element with the `id` of `output`.
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: See description above for instructions.
|
||||
testString: assert(/const\s*output\s*=\s*document\.getElementById\([\'\"\`]output[\'\"\`]\)/.test(code))
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
}
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,176 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44db4
|
||||
title: Part 27
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Now it's time to create the HTML elements that we will add inside of `output`.
|
||||
|
||||
To create an element, use `createElement()`. For example:
|
||||
|
||||
```js
|
||||
const myHeading1 = document.createElement('h1')
|
||||
```
|
||||
|
||||
Create an `h3` element and assign it to a variable named `result`.
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: See description above for instructions.
|
||||
testString: assert(/const\s*result\s*=\s*document\.createElement\([\'\"\`]h3[\'\"\`]\)/.test(code));
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
}
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,179 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44db5
|
||||
title: Part 28
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Next, we will create a text node that we will later append to the `result` element.
|
||||
|
||||
JavaScript has a function called `createTextNode()` to accomplish this. For example:
|
||||
|
||||
```js
|
||||
const myText = document.createTextNode("Hello world!")
|
||||
```
|
||||
|
||||
Create a variable named `resultText` and set it equal to a text node. Leave the string empty for now.
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: See description above for instructions.
|
||||
testString: assert(/const\s*resultText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test(code));
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
}
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode();
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,176 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44db6
|
||||
title: Part 29
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
We can now use the `difference` variable that we created above.
|
||||
|
||||
Insert the `difference` variable inside the parentheses of `.createTextNode()`
|
||||
|
||||
If you want to see what the text currently looks like, try `console.log(resultText)`.
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: See description above for instructions.
|
||||
testString: assert(/const\s*resultText\s*=\s*document\.createTextNode\(\s*difference\s*?\)/.test(code));
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode();
|
||||
}
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(difference);
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,176 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44db7
|
||||
title: Part 30
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Notice how if `total` is less than `maxCalories`, `difference` is a negative number.
|
||||
|
||||
We want to show the absolute value of the difference so it displays "300" rather than "-300".
|
||||
|
||||
Wrap the `difference` in a `Math.abs()` function.
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: See description above for instructions.
|
||||
testString: assert(/const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\)/.test(code));
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(difference);
|
||||
}
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(Math.abs(difference));
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,174 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44db8
|
||||
title: Part 31
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Inside the parentheses of `.createTextNode()`, add `+ ' Calorie '` after `Math.abs(difference))`.
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: See description above for instructions.
|
||||
testString: assert(/const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\)/.test(code));
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(Math.abs(difference));
|
||||
}
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(
|
||||
Math.abs(difference) + ' Calorie '
|
||||
);
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,178 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44db9
|
||||
title: Part 32
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Next we want to add the text from the `surplusOrDeficit` variable that we previously created.
|
||||
|
||||
Inside the parentheses of `.createTextNode()` add `+ surplusOrDeficit` after `Math.abs(difference) + ' Calorie '`.
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: See description above for instructions.
|
||||
testString: assert(/const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\+\s*surplusOrDeficit\s*\)/.test(code));
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(
|
||||
Math.abs(difference) + ' Calorie '
|
||||
);
|
||||
}
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(
|
||||
Math.abs(difference) + ' Calorie ' + surplusOrDeficit
|
||||
);
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,184 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dba
|
||||
title: Part 33
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
The data that we currently pass to `createTextNode()` is `Math.abs(difference) + ' Calorie ' + surplusOrDeficit`.
|
||||
|
||||
Some people consider this a little cumbersome and prefer to use template literals instead.
|
||||
|
||||
Template literals are enclosed in backticks (\`\`), and JavaScript expressions and variables can be embedded by enclosing them in `${}`.
|
||||
|
||||
For example, `` console.log(`Hello ${firstName}, today is ${Date.now()}`) ``is the same as writing `console.log('Hello ' + firstName + ', today is ' + Date.now())`.
|
||||
|
||||
Convert the data inside of `createTextNode()` to be a template literal.
|
||||
|
||||
</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(/document\.createTextNode\(\`\$\{Math\.abs\(difference\)\}Calorie\$\{surplusOrDeficit\}\`/) );
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(
|
||||
Math.abs(difference) + ' Calorie ' + surplusOrDeficit
|
||||
);
|
||||
}
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,182 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dbb
|
||||
title: Part 34
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Now you can append the `resultText` to the `result` with the `appendChild()` method, like this:
|
||||
|
||||
```js
|
||||
result.appendChild(resultText);
|
||||
```
|
||||
|
||||
</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(/result\.appendChild\(resultText\)/) );
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
}
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,183 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dbc
|
||||
title: Part 35
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Similarly, append the `result` to the `output` element with the `appendChild()` method.
|
||||
|
||||
Now if you enter in data and push the Calculate button, you will see the text added to the HTML document!
|
||||
|
||||
</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(/output\.appendChild\(result\)/) );
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
}
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,186 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dbd
|
||||
title: Part 36
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Next, let's create and add a horizontal rule (`hr`) element to the output.
|
||||
|
||||
Create an `hr` element and assign it to a variable named `line`.
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: See description above for instructions.
|
||||
testString: assert(/const\s*line\s*=\s*document\.createElement\([\'\"\`]hr[\'\"\`]\)/.test(code))
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
}
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,187 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dbe
|
||||
title: Part 37
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Add the `line` to the `output` element using the `appendChild()` method.
|
||||
|
||||
</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(/output\.appendChild\(line\)/) );
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
}
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,192 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dbf
|
||||
title: Part 38
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Let's create a few more HTML elements to add to the `output`.
|
||||
|
||||
Create an `h4` element and assign it to a variable named `recommended`.
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: See description above for instructions.
|
||||
testString: assert(/const\s*recommended\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test(code));
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
}
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,195 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dc0
|
||||
title: Part 39
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Create a text node and assign it to a variable named `recommendedText`.
|
||||
|
||||
This is similar to how your created the `resultText` element previously.
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: See description above for instructions.
|
||||
testString: assert(/const\s*recommendedText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test(code));
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
}
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode();
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,200 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dc1
|
||||
title: Part 40
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
We want the `recommendedText` to say "XX Calories Recommended" where "XX" is the `maxCalories` variable that was previously created.
|
||||
|
||||
Update text of `recommendedText` to use the `maxCalories` variable in a template literal along with the text "Calories Recommended".
|
||||
|
||||
This is similar to template literal syntax previously used to create `resultText`.
|
||||
|
||||
</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(/document\.createTextNode\(\`\$\{maxCalories\}RecommendedCalories\`/) );
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode();
|
||||
}
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,202 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dc2
|
||||
title: Part 41
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Append the `recommendedText` node to the `recommended` element.
|
||||
|
||||
This is similar to how the `resultText` is appended to `result` previously.
|
||||
|
||||
</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(/recommended\.appendChild\(recommendedText\)/) );
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
}
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,203 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dc3
|
||||
title: Part 42
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Append the `recommended` element to `output`.
|
||||
|
||||
</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(/output\.appendChild\(recommended\)/) );
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
}
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,208 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dc4
|
||||
title: Part 43
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Similar to the `recommended` element, we are going to create a `consumed` element that will display the amount of calories consumed.
|
||||
|
||||
Create an `h4` element and assign it to a variable named `consumed`.
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: See description above for instructions.
|
||||
testString: assert(/const\s*consumed\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test(code));
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
}
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,217 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dc5
|
||||
title: Part 44
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Another way that we can set the text of the `consumed` element is to set the `innerHTML` property.
|
||||
|
||||
For example:
|
||||
|
||||
```js
|
||||
consumed.innerHTML = `Hello world`;
|
||||
```
|
||||
|
||||
Set the inner HTML of `consumed` to "XX Consumed Calories", where "XX" is the `total` variable that was previously created. Use template literals.
|
||||
|
||||
</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(/consumed\.innerHTML\=\`\$\{total\}ConsumedCalories\`/) );
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
}
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,211 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dc6
|
||||
title: Part 45
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Append the `consumed` element to `output`.
|
||||
|
||||
</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(/output\.appendChild\(consumed\)/) );
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
}
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,220 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dc7
|
||||
title: Part 46
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Now it's time to add some styling which can be added directly as attributes or classes.
|
||||
|
||||
In our CSS file, we have a styling rule for any elements with the class name `green-text`.
|
||||
|
||||
On line **20**, right after creating the `result` element, set the `className` property of `result` to be equal to `'green-text'`.
|
||||
|
||||
Now if you submit the form again and inspect the `result` element, you will see it as `<h3 class="green-text">` and notice that the text is now green.
|
||||
|
||||
</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(/result\.className\=[\'\"\`]green-text[\'\"\`]/) );
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
//put your code here
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
}
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,222 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dc8
|
||||
title: Part 47
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
You can also add styling with the `setAttribute()` method. This method takes two arguments: the name of the attribute and the value that the attribute should be.
|
||||
|
||||
For example, if you want to set the `width` of an `input` element to 100px, you would write `input.setAttribute('width', '100px')`.
|
||||
|
||||
Set the `class` attribute of the `output` element equal to a class named `bordered-class`.
|
||||
|
||||
</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(/output\.setAttribute\([\'\"\`]class[\'\"\`]\,[\'\"\`]bordered-class[\'\"\`]\)/) );
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
//put your code here
|
||||
}
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,223 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dc9
|
||||
title: Part 48
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Another way to add styling is to use the `style` property directly, like `output.style.width = '300px'`.
|
||||
|
||||
Add a `backgroundColor` style to `output` and set it equal to `'#FFF9C4'`.
|
||||
|
||||
The `calculate()` function is now finished!
|
||||
|
||||
</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(/output\.style\.backgroundColor\=[\'\"\`]\#FFF9C4[\'\"\`]/) );
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
}
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,230 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dca
|
||||
title: Part 49
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
When the user clicks the "Add Entry" button, they should be provided with additional text inputs to enter in a food name and calorie amount. These will be included in the `calculate()` function.
|
||||
|
||||
In the HTML document, notice that the "Add Entry" button has the `id` attribute `add`:
|
||||
|
||||
```html
|
||||
<button type="button" class="btn-add" id="add">
|
||||
```
|
||||
|
||||
Get a reference to the `document` element with the `id` attribute `add`. This is similar to the reference to the `calorie-form` element that you wrote near the top of this document.
|
||||
|
||||
</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(/document\.getElementById\([\'\"\`]add[\'\"\`]\)/) );
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add');
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,230 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dcb
|
||||
title: Part 50
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
We want a function to run every time the user clicks the "Add Entry" button.
|
||||
|
||||
Chain the `onclick` property to the end of `document.getElementById('add')` and set it equal to an empty function:
|
||||
|
||||
```js
|
||||
function() {}
|
||||
```
|
||||
|
||||
</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(/document\.getElementById\([\'\"\`]add[\'\"\`]\)\.onclick\=function\(\)\{\}/) );
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add');
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {};
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,228 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dcc
|
||||
title: Part 51
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Inside the function, create an `input` document element and assign it to a variable named `foodInput`.
|
||||
|
||||
This is similar to how you created the `result` element previously.
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: See description above for instructions.
|
||||
testString: assert(/const\s*foodInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test(code));
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {};
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,229 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dcd
|
||||
title: Part 52
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Set the `placeholder` property of the `foodInput` equal to `'food name'`.
|
||||
|
||||
</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(/foodInput\.placeholder\=[\'\"\`]foodname[\'\"\`]/) );
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
};
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,235 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dce
|
||||
title: Part 53
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
We want to add the class name `food-control` to the `foodInput` element. We will reference this class name when we remove these inputs later on.
|
||||
|
||||
In addition to using the `setAttribute` method, we can also update the `classList` property to add a class name, like `myInput.classList.add('my-class)`.
|
||||
|
||||
Add the class name `food-control` to the `foodInput` element.
|
||||
|
||||
</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(/foodInput\.classList\.add\([\'\"\`]food\-control[\'\"\`]\)/) );
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
};
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,237 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dcf
|
||||
title: Part 54
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Notice that parent container of all of the inputs has an `id` of `entries`: `<div class="grid" id="entries">`.
|
||||
|
||||
Get a reference to the document element with the `id` attribute `entries` and append the `foodInput` element to it by chaining on the `.appendChild()` function.
|
||||
|
||||
This is similar to the other `appendChild()` methods that you have used previously.
|
||||
|
||||
</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(/document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(foodInput\)/) );
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
};
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,236 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dd0
|
||||
title: Part 55
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Create a variable named `calorieInput` and set it equal to another `input` document element. This is similar to how you created the `foodInput`.
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: See description above for instructions.
|
||||
testString: assert(/const\s*calorieInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test(code));
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
};
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,241 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dd1
|
||||
title: Part 56
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Use the `setAttribute()` method of `calorieInput` to set the `type` of this input to `number`.
|
||||
|
||||
This is similar to how to set the class of the `output` element previously.
|
||||
|
||||
</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(/calorieInput\.setAttribute\([\'\"\`]type[\'\"\`]\,[\'\"\`]number[\'\"\`]\)/) );
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
};
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,243 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dd2
|
||||
title: Part 57
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
The `calorieInput` element should only accept numbers that are 0 or above.
|
||||
|
||||
Set the `min` attribute of `calorieInput` to `0`.
|
||||
|
||||
</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(/calorieInput\.setAttribute\([\'\"\`]min[\'\"\`]\,[\'\"\`]0[\'\"\`]\)/) );
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
};
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,245 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dd3
|
||||
title: Part 58
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Add a class named `cal-control` to the `calorieInput` element. This is similar to how you added a class name to the `foodInput` element previously.
|
||||
|
||||
We are adding this class name because in the `calculate()` function you created previously, the `total` is calculated from the elements with the class name `cal-control`.
|
||||
|
||||
</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(/calorieInput\.classList\.add\([\'\"\`]cal\-control[\'\"\`]\)/) );
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
};
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,247 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dd4
|
||||
title: Part 59
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Later we will want to remove these extra `calorieInput` elements that we added. This will happen when the user pushes the "Clear" button.
|
||||
|
||||
To keep track of them, add the class name `extra-cal-control` to the `calorieInput` element.
|
||||
|
||||
</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(/calorieInput\.classList\.add\([\'\"\`]extra-cal\-control[\'\"\`]\)/) );
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
};
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
calorieInput.classList.add('extra-cal-control');
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,249 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dd5
|
||||
title: Part 60
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Add the `calorieInput` element to the element with the `id` of `entries` by using the `appendChild()` method.
|
||||
|
||||
The Add Entry functionality is now finished. You can test it by clicking the "Add Entry" button, entering in food names and their calories, and then clicking the "Calculate" button.
|
||||
|
||||
</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(/document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(calorieInput\)/) );
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
calorieInput.classList.add('extra-cal-control');
|
||||
};
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
calorieInput.classList.add('extra-cal-control');
|
||||
document.getElementById('entries').appendChild(calorieInput);
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,252 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dd6
|
||||
title: Part 61
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Next we need a way to reset the form back to its original state. To do this, we specify what to do when the user clicks the "Clear" button.
|
||||
|
||||
Get a reference to the `document` element with the `id` of `clear` and set its `onclick` property to equal to an empty function, `function(){}`.
|
||||
|
||||
</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(/document\.getElementById\([\'\"\`]clear[\'\"\`]\)\.onclick\=function\(\)\{\}/) );
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
calorieInput.classList.add('extra-cal-control');
|
||||
document.getElementById('entries').appendChild(calorieInput);
|
||||
};
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
calorieInput.classList.add('extra-cal-control');
|
||||
document.getElementById('entries').appendChild(calorieInput);
|
||||
};
|
||||
|
||||
document.getElementById('clear').onclick = function() {};
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,255 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dd7
|
||||
title: Part 62
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Inside the `function` body, instruct your code to call two other functions, `clearOutput()` and `clearForm()`. We will create these functions shortly.
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: See description above for instructions.
|
||||
testString: assert(/clearOutput\(\)/.test(code) && /clearForm\(\)/.test(code) )
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
calorieInput.classList.add('extra-cal-control');
|
||||
document.getElementById('entries').appendChild(calorieInput);
|
||||
};
|
||||
|
||||
document.getElementById('clear').onclick = function() {};
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
calorieInput.classList.add('extra-cal-control');
|
||||
document.getElementById('entries').appendChild(calorieInput);
|
||||
};
|
||||
|
||||
document.getElementById('clear').onclick = function() {
|
||||
clearOutput();
|
||||
clearForm();
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,266 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dd8
|
||||
title: Part 63
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Create a variable named `clearOutput` and set it equal to a blank arrow function:
|
||||
|
||||
```js
|
||||
const clearOutput = () => {}
|
||||
```
|
||||
|
||||
This is similar to `function clearOutput () {}`.
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: See description above for instructions.
|
||||
testString: assert( typeof clearOutput === "function" );
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
calorieInput.classList.add('extra-cal-control');
|
||||
document.getElementById('entries').appendChild(calorieInput);
|
||||
};
|
||||
|
||||
document.getElementById('clear').onclick = function() {
|
||||
clearOutput();
|
||||
clearForm();
|
||||
};
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
calorieInput.classList.add('extra-cal-control');
|
||||
document.getElementById('entries').appendChild(calorieInput);
|
||||
};
|
||||
|
||||
document.getElementById('clear').onclick = function() {
|
||||
clearOutput();
|
||||
clearForm();
|
||||
};
|
||||
|
||||
const clearOutput = () => {};
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,266 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dd9
|
||||
title: Part 64
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
We need to remove the contents inside of element with the `id` of `output`.
|
||||
|
||||
In the body of the `clearOutput()` function, set the `innerHTML` property of that element equal to an empty string, `''`.
|
||||
|
||||
</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(/document\.getElementById\([\'\"\`]output[\'\"\`]\)\.innerHTML\=[\'\"\`][\'\"\`]/) );
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
calorieInput.classList.add('extra-cal-control');
|
||||
document.getElementById('entries').appendChild(calorieInput);
|
||||
};
|
||||
|
||||
document.getElementById('clear').onclick = function() {
|
||||
clearOutput();
|
||||
clearForm();
|
||||
};
|
||||
|
||||
const clearOutput = () => {};
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
calorieInput.classList.add('extra-cal-control');
|
||||
document.getElementById('entries').appendChild(calorieInput);
|
||||
};
|
||||
|
||||
document.getElementById('clear').onclick = function() {
|
||||
clearOutput();
|
||||
clearForm();
|
||||
};
|
||||
|
||||
const clearOutput = () => {
|
||||
document.getElementById('output').innerHTML = '';
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,273 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dda
|
||||
title: Part 65
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Now notice that if you click the "Clear" button, the `output` element is empty, but it still has a border around it. This is because we previously added the `bordered-class` class to this element.
|
||||
|
||||
Remove the `bordered-class` class. For example:
|
||||
|
||||
```js
|
||||
document.getElementById('my-div').classList.remove('my-class')
|
||||
```
|
||||
|
||||
</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(/document\.getElementById\([\'\"\`]output[\'\"\`]\)\.classList\.remove\([\'\"\`]bordered-class[\'\"\`]\)/) );
|
||||
```
|
||||
|
||||
</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))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
calorieInput.classList.add('extra-cal-control');
|
||||
document.getElementById('entries').appendChild(calorieInput);
|
||||
};
|
||||
|
||||
document.getElementById('clear').onclick = function() {
|
||||
clearOutput();
|
||||
clearForm();
|
||||
};
|
||||
|
||||
const clearOutput = () => {
|
||||
document.getElementById('output').innerHTML = '';
|
||||
};
|
||||
</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((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
calorieInput.classList.add('extra-cal-control');
|
||||
document.getElementById('entries').appendChild(calorieInput);
|
||||
};
|
||||
|
||||
document.getElementById('clear').onclick = function() {
|
||||
clearOutput();
|
||||
clearForm();
|
||||
};
|
||||
|
||||
const clearOutput = () => {
|
||||
document.getElementById('output').innerHTML = '';
|
||||
document.getElementById('output').classList.remove('bordered-class');
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,272 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44ddb
|
||||
title: Part 66
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
The `clearOutput` function is called when the user clicks the "Clear" button. But it also needs to be run when the user clicks the "Calculate" button.
|
||||
|
||||
In the `calculate()` function, right after `event.preventDefault()`, call the `clearOutput` function.
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: See description above for instructions.
|
||||
testString: assert( calculate.toString().match(/clearOutput\(\)/) );
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.getElementById('calorie-form').onsubmit = calculate;
|
||||
|
||||
function calculate(e) {
|
||||
e.preventDefault();
|
||||
//put your code here
|
||||
|
||||
const total = Array.from(document.getElementsByClassName('cal-control'))
|
||||
.map(meal => Number(meal.value))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
calorieInput.classList.add('extra-cal-control');
|
||||
document.getElementById('entries').appendChild(calorieInput);
|
||||
};
|
||||
|
||||
document.getElementById('clear').onclick = function() {
|
||||
clearOutput();
|
||||
clearForm();
|
||||
};
|
||||
|
||||
const clearOutput = () => {
|
||||
document.getElementById('output').innerHTML = '';
|
||||
document.getElementById('output').classList.remove('bordered-class');
|
||||
};
|
||||
</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();
|
||||
clearOutput();
|
||||
|
||||
const total = Array.from(document.getElementsByClassName('cal-control'))
|
||||
.map(meal => Number(meal.value))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
calorieInput.classList.add('extra-cal-control');
|
||||
document.getElementById('entries').appendChild(calorieInput);
|
||||
};
|
||||
|
||||
document.getElementById('clear').onclick = function() {
|
||||
clearOutput();
|
||||
clearForm();
|
||||
};
|
||||
|
||||
const clearOutput = () => {
|
||||
document.getElementById('output').innerHTML = '';
|
||||
document.getElementById('output').classList.remove('bordered-class');
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,272 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44ddc
|
||||
title: Part 67
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Create a variable named `clearForm` and set it equal to a blank arrow function like you did with `clearOutput`.
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: See description above for instructions.
|
||||
testString: assert( typeof clearForm === "function")
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.getElementById('calorie-form').onsubmit = calculate;
|
||||
|
||||
function calculate(e) {
|
||||
e.preventDefault();
|
||||
clearOutput();
|
||||
|
||||
const total = Array.from(document.getElementsByClassName('cal-control'))
|
||||
.map(meal => Number(meal.value))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
calorieInput.classList.add('extra-cal-control');
|
||||
document.getElementById('entries').appendChild(calorieInput);
|
||||
};
|
||||
|
||||
document.getElementById('clear').onclick = function() {
|
||||
clearOutput();
|
||||
clearForm();
|
||||
};
|
||||
|
||||
const clearOutput = () => {
|
||||
document.getElementById('output').innerHTML = '';
|
||||
document.getElementById('output').classList.remove('bordered-class');
|
||||
};
|
||||
</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();
|
||||
clearOutput();
|
||||
|
||||
const total = Array.from(document.getElementsByClassName('cal-control'))
|
||||
.map(meal => Number(meal.value))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
calorieInput.classList.add('extra-cal-control');
|
||||
document.getElementById('entries').appendChild(calorieInput);
|
||||
};
|
||||
|
||||
document.getElementById('clear').onclick = function() {
|
||||
clearOutput();
|
||||
clearForm();
|
||||
};
|
||||
|
||||
const clearOutput = () => {
|
||||
document.getElementById('output').innerHTML = '';
|
||||
document.getElementById('output').classList.remove('bordered-class');
|
||||
};
|
||||
|
||||
const clearForm = () => {};
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,282 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44ddd
|
||||
title: Part 68
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
We need to remove all elements with the class name `food-control` that are added when the user clicks the "Add" button.
|
||||
|
||||
Inside the function body of `clearForm`, create a variable named `foodInputs` and set it equal to an array of elements with the class name `food-control`.
|
||||
|
||||
This is similar to how you declared the `total` variable previously in the `calculate` method.
|
||||
|
||||
</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(/const\s*foodInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]food\-control[\'\"\`]\)\)/) );
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.getElementById('calorie-form').onsubmit = calculate;
|
||||
|
||||
function calculate(e) {
|
||||
e.preventDefault();
|
||||
clearOutput();
|
||||
|
||||
const total = Array.from(document.getElementsByClassName('cal-control'))
|
||||
.map(meal => Number(meal.value))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
calorieInput.classList.add('extra-cal-control');
|
||||
document.getElementById('entries').appendChild(calorieInput);
|
||||
};
|
||||
|
||||
document.getElementById('clear').onclick = function() {
|
||||
clearOutput();
|
||||
clearForm();
|
||||
};
|
||||
|
||||
const clearOutput = () => {
|
||||
document.getElementById('output').innerHTML = '';
|
||||
document.getElementById('output').classList.remove('bordered-class');
|
||||
};
|
||||
|
||||
const clearForm = () => {};
|
||||
</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();
|
||||
clearOutput();
|
||||
|
||||
const total = Array.from(document.getElementsByClassName('cal-control'))
|
||||
.map(meal => Number(meal.value))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
calorieInput.classList.add('extra-cal-control');
|
||||
document.getElementById('entries').appendChild(calorieInput);
|
||||
};
|
||||
|
||||
document.getElementById('clear').onclick = function() {
|
||||
clearOutput();
|
||||
clearForm();
|
||||
};
|
||||
|
||||
const clearOutput = () => {
|
||||
document.getElementById('output').innerHTML = '';
|
||||
document.getElementById('output').classList.remove('bordered-class');
|
||||
};
|
||||
|
||||
const clearForm = () => {
|
||||
const foodInputs = Array.from(
|
||||
document.getElementsByClassName('food-control')
|
||||
);
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,286 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44dde
|
||||
title: Part 69
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
To remove the items `foodInputs` array, we will iterate through them by using the `forEach()` function.
|
||||
|
||||
Add `foodInputs.forEach()`.
|
||||
|
||||
</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(/foodInputs.forEach\(\)/) )
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.getElementById('calorie-form').onsubmit = calculate;
|
||||
|
||||
function calculate(e) {
|
||||
e.preventDefault();
|
||||
clearOutput();
|
||||
|
||||
const total = Array.from(document.getElementsByClassName('cal-control'))
|
||||
.map(meal => Number(meal.value))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
calorieInput.classList.add('extra-cal-control');
|
||||
document.getElementById('entries').appendChild(calorieInput);
|
||||
};
|
||||
|
||||
document.getElementById('clear').onclick = function() {
|
||||
clearOutput();
|
||||
clearForm();
|
||||
};
|
||||
|
||||
const clearOutput = () => {
|
||||
document.getElementById('output').innerHTML = '';
|
||||
document.getElementById('output').classList.remove('bordered-class');
|
||||
};
|
||||
|
||||
const clearForm = () => {
|
||||
const foodInputs = Array.from(
|
||||
document.getElementsByClassName('food-control')
|
||||
);
|
||||
};
|
||||
</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();
|
||||
clearOutput();
|
||||
|
||||
const total = Array.from(document.getElementsByClassName('cal-control'))
|
||||
.map(meal => Number(meal.value))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
calorieInput.classList.add('extra-cal-control');
|
||||
document.getElementById('entries').appendChild(calorieInput);
|
||||
};
|
||||
|
||||
document.getElementById('clear').onclick = function() {
|
||||
clearOutput();
|
||||
clearForm();
|
||||
};
|
||||
|
||||
const clearOutput = () => {
|
||||
document.getElementById('output').innerHTML = '';
|
||||
document.getElementById('output').classList.remove('bordered-class');
|
||||
};
|
||||
|
||||
const clearForm = () => {
|
||||
const foodInputs = Array.from(
|
||||
document.getElementsByClassName('food-control')
|
||||
);
|
||||
|
||||
foodInputs.forEach();
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,290 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44ddf
|
||||
title: Part 70
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
We need to provide a callback function in the parentheses of `forEach()`.
|
||||
|
||||
This function will take each input item, in our case we'll call it `input`, as an argument. Then inside the function body, we need to call the `remove()` method.
|
||||
|
||||
In between the parentheses of the `.forEach()` function, enter `input => input.remove()`.
|
||||
|
||||
</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(/foodInputs.forEach\(input=>input.remove\(\)\)/) )
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.getElementById('calorie-form').onsubmit = calculate;
|
||||
|
||||
function calculate(e) {
|
||||
e.preventDefault();
|
||||
clearOutput();
|
||||
|
||||
const total = Array.from(document.getElementsByClassName('cal-control'))
|
||||
.map(meal => Number(meal.value))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
calorieInput.classList.add('extra-cal-control');
|
||||
document.getElementById('entries').appendChild(calorieInput);
|
||||
};
|
||||
|
||||
document.getElementById('clear').onclick = function() {
|
||||
clearOutput();
|
||||
clearForm();
|
||||
};
|
||||
|
||||
const clearOutput = () => {
|
||||
document.getElementById('output').innerHTML = '';
|
||||
document.getElementById('output').classList.remove('bordered-class');
|
||||
};
|
||||
|
||||
const clearForm = () => {
|
||||
const foodInputs = Array.from(
|
||||
document.getElementsByClassName('food-control')
|
||||
);
|
||||
|
||||
foodInputs.forEach();
|
||||
};
|
||||
</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();
|
||||
clearOutput();
|
||||
|
||||
const total = Array.from(document.getElementsByClassName('cal-control'))
|
||||
.map(meal => Number(meal.value))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
calorieInput.classList.add('extra-cal-control');
|
||||
document.getElementById('entries').appendChild(calorieInput);
|
||||
};
|
||||
|
||||
document.getElementById('clear').onclick = function() {
|
||||
clearOutput();
|
||||
clearForm();
|
||||
};
|
||||
|
||||
const clearOutput = () => {
|
||||
document.getElementById('output').innerHTML = '';
|
||||
document.getElementById('output').classList.remove('bordered-class');
|
||||
};
|
||||
|
||||
const clearForm = () => {
|
||||
const foodInputs = Array.from(
|
||||
document.getElementsByClassName('food-control')
|
||||
);
|
||||
|
||||
foodInputs.forEach(input => input.remove());
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,294 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44de0
|
||||
title: Part 71
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
We also need to remove all elements with the class name `extra-cal-control` that are added when the user clicks the "Add" button.
|
||||
|
||||
Create a variable named `calInputs` and set it equal to an array of elements with the class name `extra-cal-control`.
|
||||
|
||||
This is similar to how you declared the `foodInputs` variable previously.
|
||||
|
||||
</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(/const\s*calInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]extra-cal-control[\'\"\`]\)\)/) );
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.getElementById('calorie-form').onsubmit = calculate;
|
||||
|
||||
function calculate(e) {
|
||||
e.preventDefault();
|
||||
clearOutput();
|
||||
|
||||
const total = Array.from(document.getElementsByClassName('cal-control'))
|
||||
.map(meal => Number(meal.value))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
calorieInput.classList.add('extra-cal-control');
|
||||
document.getElementById('entries').appendChild(calorieInput);
|
||||
};
|
||||
|
||||
document.getElementById('clear').onclick = function() {
|
||||
clearOutput();
|
||||
clearForm();
|
||||
};
|
||||
|
||||
const clearOutput = () => {
|
||||
document.getElementById('output').innerHTML = '';
|
||||
document.getElementById('output').classList.remove('bordered-class');
|
||||
};
|
||||
|
||||
const clearForm = () => {
|
||||
const foodInputs = Array.from(
|
||||
document.getElementsByClassName('food-control')
|
||||
);
|
||||
|
||||
foodInputs.forEach(input => input.remove());
|
||||
};
|
||||
</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();
|
||||
clearOutput();
|
||||
|
||||
const total = Array.from(document.getElementsByClassName('cal-control'))
|
||||
.map(meal => Number(meal.value))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
calorieInput.classList.add('extra-cal-control');
|
||||
document.getElementById('entries').appendChild(calorieInput);
|
||||
};
|
||||
|
||||
document.getElementById('clear').onclick = function() {
|
||||
clearOutput();
|
||||
clearForm();
|
||||
};
|
||||
|
||||
const clearOutput = () => {
|
||||
document.getElementById('output').innerHTML = '';
|
||||
document.getElementById('output').classList.remove('bordered-class');
|
||||
};
|
||||
|
||||
const clearForm = () => {
|
||||
const foodInputs = Array.from(
|
||||
document.getElementsByClassName('food-control')
|
||||
);
|
||||
|
||||
foodInputs.forEach(input => input.remove());
|
||||
|
||||
const calInputs = Array.from(
|
||||
document.getElementsByClassName('extra-cal-control')
|
||||
);
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,296 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44de1
|
||||
title: Part 72
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Similar to how you removed each `foodInputs` elements, use the `forEach()` function to remove each `calInputs` element.
|
||||
|
||||
</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(/calInputs.forEach\(input=>input.remove\(\)\)/) )
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.getElementById('calorie-form').onsubmit = calculate;
|
||||
|
||||
function calculate(e) {
|
||||
e.preventDefault();
|
||||
clearOutput();
|
||||
|
||||
const total = Array.from(document.getElementsByClassName('cal-control'))
|
||||
.map(meal => Number(meal.value))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
calorieInput.classList.add('extra-cal-control');
|
||||
document.getElementById('entries').appendChild(calorieInput);
|
||||
};
|
||||
|
||||
document.getElementById('clear').onclick = function() {
|
||||
clearOutput();
|
||||
clearForm();
|
||||
};
|
||||
|
||||
const clearOutput = () => {
|
||||
document.getElementById('output').innerHTML = '';
|
||||
document.getElementById('output').classList.remove('bordered-class');
|
||||
};
|
||||
|
||||
const clearForm = () => {
|
||||
const foodInputs = Array.from(
|
||||
document.getElementsByClassName('food-control')
|
||||
);
|
||||
|
||||
foodInputs.forEach(input => input.remove());
|
||||
|
||||
const calInputs = Array.from(
|
||||
document.getElementsByClassName('extra-cal-control')
|
||||
);
|
||||
};
|
||||
</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();
|
||||
clearOutput();
|
||||
|
||||
const total = Array.from(document.getElementsByClassName('cal-control'))
|
||||
.map(meal => Number(meal.value))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
calorieInput.classList.add('extra-cal-control');
|
||||
document.getElementById('entries').appendChild(calorieInput);
|
||||
};
|
||||
|
||||
document.getElementById('clear').onclick = function() {
|
||||
clearOutput();
|
||||
clearForm();
|
||||
};
|
||||
|
||||
const clearOutput = () => {
|
||||
document.getElementById('output').innerHTML = '';
|
||||
document.getElementById('output').classList.remove('bordered-class');
|
||||
};
|
||||
|
||||
const clearForm = () => {
|
||||
const foodInputs = Array.from(
|
||||
document.getElementsByClassName('food-control')
|
||||
);
|
||||
|
||||
foodInputs.forEach(input => input.remove());
|
||||
|
||||
const calInputs = Array.from(
|
||||
document.getElementsByClassName('extra-cal-control')
|
||||
);
|
||||
|
||||
calInputs.forEach(input => input.remove());
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,302 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44de2
|
||||
title: Part 73
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Finally, it's time to clear the other calories that may have been entered for Breakfast, Lunch, and Dinner. This can be achieved by calling the `reset()` method on the form.
|
||||
|
||||
Get a reference to the document element with the `id` of `calorie-form` and chain the `reset()` method to it.
|
||||
|
||||
</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(/document\.getElementById\([\'\"\`]calorie-form[\'\"\`]\).reset\(\)/) );
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.getElementById('calorie-form').onsubmit = calculate;
|
||||
|
||||
function calculate(e) {
|
||||
e.preventDefault();
|
||||
clearOutput();
|
||||
|
||||
const total = Array.from(document.getElementsByClassName('cal-control'))
|
||||
.map(meal => Number(meal.value))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
calorieInput.classList.add('extra-cal-control');
|
||||
document.getElementById('entries').appendChild(calorieInput);
|
||||
};
|
||||
|
||||
document.getElementById('clear').onclick = function() {
|
||||
clearOutput();
|
||||
clearForm();
|
||||
};
|
||||
|
||||
const clearOutput = () => {
|
||||
document.getElementById('output').innerHTML = '';
|
||||
document.getElementById('output').classList.remove('bordered-class');
|
||||
};
|
||||
|
||||
const clearForm = () => {
|
||||
const foodInputs = Array.from(
|
||||
document.getElementsByClassName('food-control')
|
||||
);
|
||||
|
||||
foodInputs.forEach(input => input.remove());
|
||||
|
||||
const calInputs = Array.from(
|
||||
document.getElementsByClassName('extra-cal-control')
|
||||
);
|
||||
|
||||
calInputs.forEach(input => input.remove());
|
||||
};
|
||||
</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();
|
||||
clearOutput();
|
||||
|
||||
const total = Array.from(document.getElementsByClassName('cal-control'))
|
||||
.map(meal => Number(meal.value))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
calorieInput.classList.add('extra-cal-control');
|
||||
document.getElementById('entries').appendChild(calorieInput);
|
||||
};
|
||||
|
||||
document.getElementById('clear').onclick = function() {
|
||||
clearOutput();
|
||||
clearForm();
|
||||
};
|
||||
|
||||
const clearOutput = () => {
|
||||
document.getElementById('output').innerHTML = '';
|
||||
document.getElementById('output').classList.remove('bordered-class');
|
||||
};
|
||||
|
||||
const clearForm = () => {
|
||||
const foodInputs = Array.from(
|
||||
document.getElementsByClassName('food-control')
|
||||
);
|
||||
|
||||
foodInputs.forEach(input => input.remove());
|
||||
|
||||
const calInputs = Array.from(
|
||||
document.getElementsByClassName('extra-cal-control')
|
||||
);
|
||||
|
||||
calInputs.forEach(input => input.remove());
|
||||
|
||||
document.getElementById('calorie-form').reset();
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,218 @@
|
||||
---
|
||||
id: 5ddb965c65d27e1512d44de3
|
||||
title: Part 74
|
||||
challengeType: 0
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
|
||||
Congratulations! Have fun playing with your completed calorie counter.
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
<section id='instructions'>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: See description above for instructions.
|
||||
testString: ''
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.getElementById('calorie-form').onsubmit = calculate;
|
||||
|
||||
function calculate(e) {
|
||||
e.preventDefault();
|
||||
clearOutput();
|
||||
|
||||
const total = Array.from(document.getElementsByClassName('cal-control'))
|
||||
.map(meal => Number(meal.value))
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
|
||||
|
||||
const difference = total - maxCalories;
|
||||
|
||||
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
|
||||
|
||||
const output = document.getElementById('output');
|
||||
|
||||
const result = document.createElement('h3');
|
||||
result.className = 'green-text';
|
||||
const resultText = document.createTextNode(
|
||||
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
|
||||
);
|
||||
|
||||
result.appendChild(resultText);
|
||||
output.appendChild(result);
|
||||
|
||||
const line = document.createElement('hr');
|
||||
output.appendChild(line);
|
||||
|
||||
const recommended = document.createElement('h4');
|
||||
const recommendedText = document.createTextNode(
|
||||
`${maxCalories} Recommended Calories`
|
||||
);
|
||||
|
||||
recommended.appendChild(recommendedText);
|
||||
output.appendChild(recommended);
|
||||
|
||||
const consumed = document.createElement('h4');
|
||||
consumed.innerHTML = `${total} Consumed Calories`;
|
||||
output.appendChild(consumed);
|
||||
|
||||
output.setAttribute('class', 'bordered-class');
|
||||
output.style.backgroundColor = '#FFF9C4';
|
||||
}
|
||||
|
||||
document.getElementById('add').onclick = function() {
|
||||
const foodInput = document.createElement('input');
|
||||
foodInput.placeholder = 'food name';
|
||||
foodInput.classList.add('food-control');
|
||||
document.getElementById('entries').appendChild(foodInput);
|
||||
|
||||
const calorieInput = document.createElement('input');
|
||||
calorieInput.setAttribute('type', 'number');
|
||||
calorieInput.setAttribute('min', '0');
|
||||
calorieInput.classList.add('cal-control');
|
||||
calorieInput.classList.add('extra-cal-control');
|
||||
document.getElementById('entries').appendChild(calorieInput);
|
||||
};
|
||||
|
||||
document.getElementById('clear').onclick = function() {
|
||||
clearOutput();
|
||||
clearForm();
|
||||
};
|
||||
|
||||
const clearOutput = () => {
|
||||
document.getElementById('output').innerHTML = '';
|
||||
document.getElementById('output').classList.remove('bordered-class');
|
||||
};
|
||||
|
||||
const clearForm = () => {
|
||||
const foodInputs = Array.from(
|
||||
document.getElementsByClassName('food-control')
|
||||
);
|
||||
|
||||
foodInputs.forEach(input => input.remove());
|
||||
|
||||
const calInputs = Array.from(
|
||||
document.getElementsByClassName('extra-cal-control')
|
||||
);
|
||||
|
||||
calInputs.forEach(input => input.remove());
|
||||
|
||||
document.getElementById('calorie-form').reset();
|
||||
};
|
||||
</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
|
||||
|
||||
<!-- Solution not necessary for the last step -->
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
Reference in New Issue
Block a user