diff --git a/Calorie_Counter/.git-hooks/pre-commit b/Calorie_Counter/.git-hooks/pre-commit
new file mode 100644
index 0000000..8b13e21
--- /dev/null
+++ b/Calorie_Counter/.git-hooks/pre-commit
@@ -0,0 +1,56 @@
+#!/usr/bin/env node
+
+const path = require("path");
+const { execSync } = require("child_process");
+
+const util = require("node:util");
+const exec = util.promisify(require("node:child_process").exec);
+
+const projectRoot = path.join(__dirname, "..");
+
+const scriptPath = path.join(
+ projectRoot,
+ "automation",
+ "ManagerREADMES",
+ "manager_readmes.js"
+);
+
+// const changedFiles = execSync('git diff --cached --name-only', { encoding: 'utf-8' }).trim().split(' ');
+// const diffedFiles = execSync('git diff --name-only' , { encoding: 'utf-8' }).trim().split(' ');
+// const stagedFiles = execSync('git diff --staged --name-only', { encoding: 'utf-8' }).trim().split(' ');
+// const newFiles = execSync('git ls-files --others --exclude-standard', { encoding: 'utf-8' }).trim().split(' ');
+const diffedFiles2 = execSync("git diff --name-only", { encoding: "utf-8" })
+ .trim()
+ .split("\n");
+const stagedFiles2 = execSync("git diff --staged --name-only", {
+ encoding: "utf-8",
+})
+ .trim()
+ .split("\n");
+const newFiles2 = execSync("git ls-files --others --exclude-standard", {
+ encoding: "utf-8",
+})
+ .trim()
+ .split("\n");
+
+// const isRelevantChange = changedFiles.some(file => ['styles.css', 'index.html', 'script.js'].includes(path.basename(file)));
+// const isRelevantDiff = diffedFiles .some(file => ['styles.css', 'index.html', 'script.js'].includes(path.basename(file)));
+// const isRelevantStaged = stagedFiles .some(file => ['styles.css', 'index.html', 'script.js'].includes(path.basename(file)));
+
+const relevantFiles = [...diffedFiles2, ...stagedFiles2, ...newFiles2].filter(
+ (file) =>
+ ["styles.css", "index.html", "script.js"].includes(path.basename(file))
+);
+
+
+(async () => {
+ if (relevantFiles.length > 0) {
+ require(scriptPath);
+ } else {
+ console.log("No relevant changes detected. Skipping script execution.");
+ }
+})();
+
+setTimeout(() => {
+ execSync("git add .", { stdio: "inherit" });
+}, 10000);
diff --git a/Calorie_Counter/.gitignore b/Calorie_Counter/.gitignore
new file mode 100644
index 0000000..0c41359
--- /dev/null
+++ b/Calorie_Counter/.gitignore
@@ -0,0 +1,7 @@
+node_modules/
+!*.html
+!*.png
+!**/*.svg
+
+
+
diff --git a/Calorie_Counter/.gitmodules b/Calorie_Counter/.gitmodules
new file mode 100644
index 0000000..3ef5993
--- /dev/null
+++ b/Calorie_Counter/.gitmodules
@@ -0,0 +1,5 @@
+[submodule "automation/ManagerREADMES"]
+ path = automation/ManagerREADMES
+ url = https://github.com/AndriiKot/Manager_Projects__freeCodeCamp.git
+ branch = ManagerCaloriesCounter
+
diff --git a/Calorie_Counter/LICENSE b/Calorie_Counter/LICENSE
new file mode 100644
index 0000000..f3b9d97
--- /dev/null
+++ b/Calorie_Counter/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 AndriiKot
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/Calorie_Counter/README.md b/Calorie_Counter/README.md
new file mode 100644
index 0000000..ed411bd
--- /dev/null
+++ b/Calorie_Counter/README.md
@@ -0,0 +1,369 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+preview
+
+
+ Full Preview
+
+ Initial View
+ Agter Adding Breakfast
+ After Adding Lunch
+ After Adding Dinner
+ After Adding Snacks
+ After Adding Exercise
+ After pressing the 'Calculate Remaining Calories' button
+ Full Preview
+ After pressing the 'Clear' button
+
+
+
+[back to top](#top)
+
+
+
+
+ JavaScript CSS HTML5 DOM
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+ output.classList.remove("hide");3
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (const item of list) {
+ const currVal = cleanInputString(item.value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll(".input-container"));
+ for(const container of inputContainers) {
+ container.innerHTML = '';
+ };
+ budgetNumberInput.value = '';
+ output.innerText = '';
+ output.classList.add('hide');
+};
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+clearButton.addEventListener("click", clearForm);
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
diff --git a/Calorie_Counter/automation/ManagerREADMES b/Calorie_Counter/automation/ManagerREADMES
new file mode 160000
index 0000000..ac4ae1a
--- /dev/null
+++ b/Calorie_Counter/automation/ManagerREADMES
@@ -0,0 +1 @@
+Subproject commit ac4ae1a072a6fe0103716cc9cb279c2a27c2016c
diff --git a/Calorie_Counter/images/icons/css.svg b/Calorie_Counter/images/icons/css.svg
new file mode 100644
index 0000000..79c47a9
--- /dev/null
+++ b/Calorie_Counter/images/icons/css.svg
@@ -0,0 +1 @@
+
+
+ Follow Links Steps
+
+
+
+
+
+preview
+
+
+ Full Preview
+
+ Initial View
+ Agter Adding Breakfast
+ After Adding Lunch
+ After Adding Dinner
+ After Adding Snacks
+ After Adding Exercise
+ After pressing the 'Calculate Remaining Calories' button
+ Full Preview
+ After pressing the 'Clear' button
+
+
+
+[back to top](#top)
+
+
+
+
+ JavaScript CSS HTML5 DOM
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+ output.classList.remove("hide");3
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (const item of list) {
+ const currVal = cleanInputString(item.value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll(".input-container"));
+ for(const container of inputContainers) {
+ container.innerHTML = '';
+ };
+ budgetNumberInput.value = '';
+ output.innerText = '';
+ output.classList.add('hide');
+};
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+clearButton.addEventListener("click", clearForm);
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
diff --git a/Calorie_Counter/steps/__00__title_/README.md b/Calorie_Counter/steps/__00__title_/README.md
new file mode 100644
index 0000000..de64b85
--- /dev/null
+++ b/Calorie_Counter/steps/__00__title_/README.md
@@ -0,0 +1,53 @@
+
+addEventListener() method, and more.
+
+#### preview
+
+
+
+### technologies
+
+
+
+
+ JavaScript
+ CSS
+ HTML
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+[back to top](#top)
diff --git a/Calorie_Counter/steps/__00__title_/title.txt b/Calorie_Counter/steps/__00__title_/title.txt
new file mode 100644
index 0000000..9c088d5
--- /dev/null
+++ b/Calorie_Counter/steps/__00__title_/title.txt
@@ -0,0 +1,15 @@
+Learn Form Validation by Building a Calorie Counter
+
+Sometimes when you're coding a web application,
+you'll need to be able to accept input from a user.
+In this calorie counter project,
+you'll learn how to validate user input,
+perform calculations based on that input,
+and dynamically update your interface to display the results.
+
+In this practice project,
+you'll learn basic regular expressions,
+template literals,
+the addEventListener() method, and more.
+
+
diff --git a/Calorie_Counter/steps/__01__step__/README.md b/Calorie_Counter/steps/__01__step__/README.md
new file mode 100644
index 0000000..630f3a0
--- /dev/null
+++ b/Calorie_Counter/steps/__01__step__/README.md
@@ -0,0 +1,187 @@
+
+
+ Description of the Task
+
+ Step 1
+
+ In this project, you'll learn to create a calorie counter form that enables users to input their daily calorie budget and the calorie counts of various meals. The form will then calculate and display whether the user is in a calorie deficit or surplus.
+
+
+ You have been provided with boilerplate CSS and HTML. However, you need to build your calorie counter form.
+
+
+ Feel free to explore the HTML and CSS, then add a form element and give it an id set to calorie-counter.
+
+
+
+#### preview
+
+
+
+### technologies
+
+
+
+
+ JavaScript
+ CSS
+ HTML
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+| [index.html](#indexhtml) | [styles.css](#stylescss) | [script.js](#scriptjs) |
+| ------------------------ | ------------------------ | ---------------------- |
+
+
+
+[Back to top](#top)
+
+### index.html
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+[Back to top](#top)
+
+### styles.css
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+```
+
+[Back to top](#top)
+
+### script.js
+
+```js
+'use strict';
+```
+
+[Back to top](#top)
diff --git a/Calorie_Counter/steps/__01__step__/index.html b/Calorie_Counter/steps/__01__step__/index.html
new file mode 100644
index 0000000..999b884
--- /dev/null
+++ b/Calorie_Counter/steps/__01__step__/index.html
@@ -0,0 +1,17 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__01__step__/script.js b/Calorie_Counter/steps/__01__step__/script.js
new file mode 100644
index 0000000..ad9a93a
--- /dev/null
+++ b/Calorie_Counter/steps/__01__step__/script.js
@@ -0,0 +1 @@
+'use strict';
diff --git a/Calorie_Counter/steps/__01__step__/styles.css b/Calorie_Counter/steps/__01__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__01__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__01__step__/title.txt b/Calorie_Counter/steps/__01__step__/title.txt
new file mode 100644
index 0000000..57103a0
--- /dev/null
+++ b/Calorie_Counter/steps/__01__step__/title.txt
@@ -0,0 +1,16 @@
+Step 1
+
+In this project, you'll learn
+to create a calorie counter
+form that enables users to input
+their daily calorie budget and
+the calorie counts of various meals.
+The form will then calculate and display
+whether the user is in a calorie deficit or surplus.
+
+You have been provided with boilerplate CSS and HTML.
+However, you need to build your calorie counter form.
+
+Feel free to explore the HTML and CSS,
+then add a form element and
+give it an id set to calorie-counter.
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__02__step__/README.md b/Calorie_Counter/steps/__02__step__/README.md
new file mode 100644
index 0000000..5903f52
--- /dev/null
+++ b/Calorie_Counter/steps/__02__step__/README.md
@@ -0,0 +1,199 @@
+
+
+
+ Description of the Task
+
+ Step 2
+
+
+In your form, users will be able to input a number which represents their daily calorie budget.
+Create a label element, give it a for attribute set to budget and the text Budget, then create an input element with the id set to budget.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+'use strict';
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__02__step__/index.html b/Calorie_Counter/steps/__02__step__/index.html
new file mode 100644
index 0000000..80f83cc
--- /dev/null
+++ b/Calorie_Counter/steps/__02__step__/index.html
@@ -0,0 +1,20 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__02__step__/script.js b/Calorie_Counter/steps/__02__step__/script.js
new file mode 100644
index 0000000..eb109ab
--- /dev/null
+++ b/Calorie_Counter/steps/__02__step__/script.js
@@ -0,0 +1,2 @@
+'use strict';
+
diff --git a/Calorie_Counter/steps/__02__step__/styles.css b/Calorie_Counter/steps/__02__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__02__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__02__step__/title.txt b/Calorie_Counter/steps/__02__step__/title.txt
new file mode 100644
index 0000000..87a84be
--- /dev/null
+++ b/Calorie_Counter/steps/__02__step__/title.txt
@@ -0,0 +1,11 @@
+Step 3
+
+Your input element needs some
+additional attributes. Give it a type set
+to number to only allow numeric inputs,
+a min attribute set to 0 to
+only allow positive numbers, and a placeholder
+set to Daily calorie budget.
+Finally, mark the
+input element as required.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__03__step__/README.md b/Calorie_Counter/steps/__03__step__/README.md
new file mode 100644
index 0000000..8c0549c
--- /dev/null
+++ b/Calorie_Counter/steps/__03__step__/README.md
@@ -0,0 +1,202 @@
+
+
+
+ Description of the Task
+
+ Step 3
+
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+'use strict';
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__03__step__/index.html b/Calorie_Counter/steps/__03__step__/index.html
new file mode 100644
index 0000000..2c81cc3
--- /dev/null
+++ b/Calorie_Counter/steps/__03__step__/index.html
@@ -0,0 +1,26 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__03__step__/script.js b/Calorie_Counter/steps/__03__step__/script.js
new file mode 100644
index 0000000..eb109ab
--- /dev/null
+++ b/Calorie_Counter/steps/__03__step__/script.js
@@ -0,0 +1,2 @@
+'use strict';
+
diff --git a/Calorie_Counter/steps/__03__step__/styles.css b/Calorie_Counter/steps/__03__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__03__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__03__step__/title.txt b/Calorie_Counter/steps/__03__step__/title.txt
new file mode 100644
index 0000000..40c1bf7
--- /dev/null
+++ b/Calorie_Counter/steps/__03__step__/title.txt
@@ -0,0 +1,10 @@
+Step 3
+
+Your input element needs some
+additional attributes. Give it a type set
+to number to only allow numeric inputs,
+a min attribute set to 0 to
+only allow positive numbers, and a placeholder
+set to Daily calorie budget.
+Finally, mark the
+input element as required.
diff --git a/Calorie_Counter/steps/__04__step__/README.md b/Calorie_Counter/steps/__04__step__/README.md
new file mode 100644
index 0000000..cfa0067
--- /dev/null
+++ b/Calorie_Counter/steps/__04__step__/README.md
@@ -0,0 +1,202 @@
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 4
+
+
+In your form, users should have the capability to add various meal types along with their calorie counts.
+Create a fieldset element with the id set to breakfast.
+Within that element, create a legend with the text Breakfast, and an empty div with the class set to input-container.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+ index.html
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+```
+
+[back to top](#top)
+
+
+
+
+
+ script.js
+
+
+```js
+"use strict";
+```
+
+[back to top](#top)
+
+
+
+
+
+ styles.css
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+```
+
+[back to top](#top)
+
+
diff --git a/Calorie_Counter/steps/__04__step__/index.html b/Calorie_Counter/steps/__04__step__/index.html
new file mode 100644
index 0000000..b463317
--- /dev/null
+++ b/Calorie_Counter/steps/__04__step__/index.html
@@ -0,0 +1,30 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
diff --git a/Calorie_Counter/steps/__04__step__/script.js b/Calorie_Counter/steps/__04__step__/script.js
new file mode 100644
index 0000000..eb109ab
--- /dev/null
+++ b/Calorie_Counter/steps/__04__step__/script.js
@@ -0,0 +1,2 @@
+'use strict';
+
diff --git a/Calorie_Counter/steps/__04__step__/styles.css b/Calorie_Counter/steps/__04__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__04__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__04__step__/title.txt b/Calorie_Counter/steps/__04__step__/title.txt
new file mode 100644
index 0000000..dffa72c
--- /dev/null
+++ b/Calorie_Counter/steps/__04__step__/title.txt
@@ -0,0 +1,12 @@
+Step 4
+
+In your form, users should
+have the capability to add various meal
+types along with their calorie counts.
+Create a
+fieldset element with the id set to
+breakfast.
+Within that element, create a legend with
+the text Breakfast, and an empty div
+with the class set to input-container.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__05__step__/README.md b/Calorie_Counter/steps/__05__step__/README.md
new file mode 100644
index 0000000..9098575
--- /dev/null
+++ b/Calorie_Counter/steps/__05__step__/README.md
@@ -0,0 +1,203 @@
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 5
+
+
+Next, create a fieldset element with the id set to lunch.
+Within that element, create a legend element with the text Lunch, and an empty div with the class set to input-container.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+ index.html
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+```
+
+[back to top](#top)
+
+
+
+
+
+ script.js
+
+
+```js
+"use strict";
+```
+
+[back to top](#top)
+
+
+
+
+
+ styles.css
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+```
+
+[back to top](#top)
+
+
diff --git a/Calorie_Counter/steps/__05__step__/index.html b/Calorie_Counter/steps/__05__step__/index.html
new file mode 100644
index 0000000..2293574
--- /dev/null
+++ b/Calorie_Counter/steps/__05__step__/index.html
@@ -0,0 +1,34 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
diff --git a/Calorie_Counter/steps/__05__step__/script.js b/Calorie_Counter/steps/__05__step__/script.js
new file mode 100644
index 0000000..eb109ab
--- /dev/null
+++ b/Calorie_Counter/steps/__05__step__/script.js
@@ -0,0 +1,2 @@
+'use strict';
+
diff --git a/Calorie_Counter/steps/__05__step__/styles.css b/Calorie_Counter/steps/__05__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__05__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__05__step__/title.txt b/Calorie_Counter/steps/__05__step__/title.txt
new file mode 100644
index 0000000..8abe627
--- /dev/null
+++ b/Calorie_Counter/steps/__05__step__/title.txt
@@ -0,0 +1,9 @@
+Step 5
+
+Next, create a fieldset element
+with the id set to lunch.
+Within that
+element, create a legend element with the
+text Lunch, and an empty div with
+the class set to input-container.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__06__step__/README.md b/Calorie_Counter/steps/__06__step__/README.md
new file mode 100644
index 0000000..25f380e
--- /dev/null
+++ b/Calorie_Counter/steps/__06__step__/README.md
@@ -0,0 +1,229 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 6
+
+Continuing the pattern, create a fieldset for dinner with the same nested elements.
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+'use strict';
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__06__step__/index.html b/Calorie_Counter/steps/__06__step__/index.html
new file mode 100644
index 0000000..51046c0
--- /dev/null
+++ b/Calorie_Counter/steps/__06__step__/index.html
@@ -0,0 +1,38 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
diff --git a/Calorie_Counter/steps/__06__step__/script.js b/Calorie_Counter/steps/__06__step__/script.js
new file mode 100644
index 0000000..eb109ab
--- /dev/null
+++ b/Calorie_Counter/steps/__06__step__/script.js
@@ -0,0 +1,2 @@
+'use strict';
+
diff --git a/Calorie_Counter/steps/__06__step__/styles.css b/Calorie_Counter/steps/__06__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__06__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__06__step__/title.txt b/Calorie_Counter/steps/__06__step__/title.txt
new file mode 100644
index 0000000..56b311d
--- /dev/null
+++ b/Calorie_Counter/steps/__06__step__/title.txt
@@ -0,0 +1,4 @@
+Step 6
+Continuing the pattern, create a
+fieldset for dinner with the same nested
+elements.
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__07__step__/README.md b/Calorie_Counter/steps/__07__step__/README.md
new file mode 100644
index 0000000..2034e3c
--- /dev/null
+++ b/Calorie_Counter/steps/__07__step__/README.md
@@ -0,0 +1,237 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 7
+
+You need two more of these fieldset code blocks – one for snacks and one for exercise.
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+'use strict';
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__07__step__/index.html b/Calorie_Counter/steps/__07__step__/index.html
new file mode 100644
index 0000000..922a085
--- /dev/null
+++ b/Calorie_Counter/steps/__07__step__/index.html
@@ -0,0 +1,46 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
diff --git a/Calorie_Counter/steps/__07__step__/script.js b/Calorie_Counter/steps/__07__step__/script.js
new file mode 100644
index 0000000..eb109ab
--- /dev/null
+++ b/Calorie_Counter/steps/__07__step__/script.js
@@ -0,0 +1,2 @@
+'use strict';
+
diff --git a/Calorie_Counter/steps/__07__step__/styles.css b/Calorie_Counter/steps/__07__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__07__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__07__step__/title.txt b/Calorie_Counter/steps/__07__step__/title.txt
new file mode 100644
index 0000000..7d6c32c
--- /dev/null
+++ b/Calorie_Counter/steps/__07__step__/title.txt
@@ -0,0 +1,4 @@
+Step 7
+You need two more of
+these fieldset code blocks – one for
+snacks and one for exercise.
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__08__step__/README.md b/Calorie_Counter/steps/__08__step__/README.md
new file mode 100644
index 0000000..0c69176
--- /dev/null
+++ b/Calorie_Counter/steps/__08__step__/README.md
@@ -0,0 +1,243 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 8
+
+
+When users want to select a meal type to input their calorie counts, they should be presented with a dropdown menu and a button to add the meal type.
+Start by creating a div element and assign it a class attribute with the value controls. Then, nest a span element inside this div.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+'use strict';
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__08__step__/index.html b/Calorie_Counter/steps/__08__step__/index.html
new file mode 100644
index 0000000..2110171
--- /dev/null
+++ b/Calorie_Counter/steps/__08__step__/index.html
@@ -0,0 +1,49 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
diff --git a/Calorie_Counter/steps/__08__step__/script.js b/Calorie_Counter/steps/__08__step__/script.js
new file mode 100644
index 0000000..eb109ab
--- /dev/null
+++ b/Calorie_Counter/steps/__08__step__/script.js
@@ -0,0 +1,2 @@
+'use strict';
+
diff --git a/Calorie_Counter/steps/__08__step__/styles.css b/Calorie_Counter/steps/__08__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__08__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__08__step__/title.txt b/Calorie_Counter/steps/__08__step__/title.txt
new file mode 100644
index 0000000..80638cb
--- /dev/null
+++ b/Calorie_Counter/steps/__08__step__/title.txt
@@ -0,0 +1,12 @@
+Step 8
+
+When users want to select
+a meal type to input their calorie
+counts, they should be presented with a
+dropdown menu and a button to add
+the meal type.
+Start by creating a div
+element and assign it a class attribute
+with the value controls. Then, nest a
+span element inside this div.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__09__step__/README.md b/Calorie_Counter/steps/__09__step__/README.md
new file mode 100644
index 0000000..417e05c
--- /dev/null
+++ b/Calorie_Counter/steps/__09__step__/README.md
@@ -0,0 +1,247 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 9
+
+
+In your span element, create a label element for an entry-dropdown and give it the text Add food or exercise:. Then create a select element with the id set to entry-dropdown and a name set to options. Below that, add a button element with the id set to add-entry and the text Add Entry.
+Give your button element a type attribute set to button to prevent automatic form submission.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+'use strict';
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__09__step__/index.html b/Calorie_Counter/steps/__09__step__/index.html
new file mode 100644
index 0000000..5e92df8
--- /dev/null
+++ b/Calorie_Counter/steps/__09__step__/index.html
@@ -0,0 +1,53 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
diff --git a/Calorie_Counter/steps/__09__step__/script.js b/Calorie_Counter/steps/__09__step__/script.js
new file mode 100644
index 0000000..eb109ab
--- /dev/null
+++ b/Calorie_Counter/steps/__09__step__/script.js
@@ -0,0 +1,2 @@
+'use strict';
+
diff --git a/Calorie_Counter/steps/__09__step__/styles.css b/Calorie_Counter/steps/__09__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__09__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__09__step__/title.txt b/Calorie_Counter/steps/__09__step__/title.txt
new file mode 100644
index 0000000..b0ea8a7
--- /dev/null
+++ b/Calorie_Counter/steps/__09__step__/title.txt
@@ -0,0 +1,14 @@
+Step 9
+
+In your span element, create
+a label element for an entry-dropdown and
+give it the text Add food or
+exercise:. Then create a select element with
+the id set to entry-dropdown and a
+name set to options. Below that, add
+a button element with the id set
+to add-entry and the text Add Entry.
+Give
+your button element a type attribute set
+to button to prevent automatic form submission.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__10__step__/README.md b/Calorie_Counter/steps/__10__step__/README.md
new file mode 100644
index 0000000..cd4df28
--- /dev/null
+++ b/Calorie_Counter/steps/__10__step__/README.md
@@ -0,0 +1,253 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 10
+
+
+Your select menu needs options for each of the food and exercise fieldset elements you created in the previous steps. Use the option element to create a new option for each fieldset. The value attribute of each option should be the id of the fieldset, and the text of each option should be the text of the legend.
+Set the Breakfast option as the selected option.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+'use strict';
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__10__step__/index.html b/Calorie_Counter/steps/__10__step__/index.html
new file mode 100644
index 0000000..8be461e
--- /dev/null
+++ b/Calorie_Counter/steps/__10__step__/index.html
@@ -0,0 +1,59 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
diff --git a/Calorie_Counter/steps/__10__step__/script.js b/Calorie_Counter/steps/__10__step__/script.js
new file mode 100644
index 0000000..eb109ab
--- /dev/null
+++ b/Calorie_Counter/steps/__10__step__/script.js
@@ -0,0 +1,2 @@
+'use strict';
+
diff --git a/Calorie_Counter/steps/__10__step__/styles.css b/Calorie_Counter/steps/__10__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__10__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__10__step__/title.txt b/Calorie_Counter/steps/__10__step__/title.txt
new file mode 100644
index 0000000..8a3196c
--- /dev/null
+++ b/Calorie_Counter/steps/__10__step__/title.txt
@@ -0,0 +1,14 @@
+Step 10
+
+Your select menu needs options
+for each of the food and exercise
+fieldset elements you created in the previous
+steps. Use the option element to create
+a new option for each fieldset. The
+value attribute of each option should be
+the id of the fieldset, and the
+text of each option should be the
+text of the legend.
+Set the Breakfast option
+as the selected option.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__11__step__/README.md b/Calorie_Counter/steps/__11__step__/README.md
new file mode 100644
index 0000000..c112fba
--- /dev/null
+++ b/Calorie_Counter/steps/__11__step__/README.md
@@ -0,0 +1,257 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 11
+
+
+Create another div element. Within it, nest a button to submit the form. This button should have the text Calculate Remaining Calories.
+Then add a button with the id set to clear to clear the form (don't forget to give it a type attribute that prevents it from submitting the form). This button needs the text Clear.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+'use strict';
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__11__step__/index.html b/Calorie_Counter/steps/__11__step__/index.html
new file mode 100644
index 0000000..152b84f
--- /dev/null
+++ b/Calorie_Counter/steps/__11__step__/index.html
@@ -0,0 +1,63 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
diff --git a/Calorie_Counter/steps/__11__step__/script.js b/Calorie_Counter/steps/__11__step__/script.js
new file mode 100644
index 0000000..eb109ab
--- /dev/null
+++ b/Calorie_Counter/steps/__11__step__/script.js
@@ -0,0 +1,2 @@
+'use strict';
+
diff --git a/Calorie_Counter/steps/__11__step__/styles.css b/Calorie_Counter/steps/__11__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__11__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__11__step__/title.txt b/Calorie_Counter/steps/__11__step__/title.txt
new file mode 100644
index 0000000..42eff8f
--- /dev/null
+++ b/Calorie_Counter/steps/__11__step__/title.txt
@@ -0,0 +1,13 @@
+Step 11
+
+Create another div element. Within
+it, nest a button to submit the
+form. This button should have the text
+Calculate Remaining Calories.
+Then add a button with
+the id set to clear to clear
+the form (don't forget to give it
+a type attribute that prevents it from
+submitting the form). This button needs the
+text Clear.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__12__step__/README.md b/Calorie_Counter/steps/__12__step__/README.md
new file mode 100644
index 0000000..c87cd80
--- /dev/null
+++ b/Calorie_Counter/steps/__12__step__/README.md
@@ -0,0 +1,255 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 12
+
+Your form needs somewhere to display the results. Add an empty div element and give it an id of output and the class values of output and hide.
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+'use strict';
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__12__step__/index.html b/Calorie_Counter/steps/__12__step__/index.html
new file mode 100644
index 0000000..0a5ad98
--- /dev/null
+++ b/Calorie_Counter/steps/__12__step__/index.html
@@ -0,0 +1,64 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
diff --git a/Calorie_Counter/steps/__12__step__/script.js b/Calorie_Counter/steps/__12__step__/script.js
new file mode 100644
index 0000000..eb109ab
--- /dev/null
+++ b/Calorie_Counter/steps/__12__step__/script.js
@@ -0,0 +1,2 @@
+'use strict';
+
diff --git a/Calorie_Counter/steps/__12__step__/styles.css b/Calorie_Counter/steps/__12__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__12__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__12__step__/title.txt b/Calorie_Counter/steps/__12__step__/title.txt
new file mode 100644
index 0000000..b399784
--- /dev/null
+++ b/Calorie_Counter/steps/__12__step__/title.txt
@@ -0,0 +1,6 @@
+Step 12
+Your form needs somewhere to
+display the results. Add an empty div
+element and give it an id of
+output and the class values of output
+and hide.
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__13__step__/README.md b/Calorie_Counter/steps/__13__step__/README.md
new file mode 100644
index 0000000..75c6a4e
--- /dev/null
+++ b/Calorie_Counter/steps/__13__step__/README.md
@@ -0,0 +1,256 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 13
+
+Finally, you need to link your JavaScript file to your HTML. Create a script element to do so.
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+'use strict';
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__13__step__/index.html b/Calorie_Counter/steps/__13__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__13__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__13__step__/script.js b/Calorie_Counter/steps/__13__step__/script.js
new file mode 100644
index 0000000..eb109ab
--- /dev/null
+++ b/Calorie_Counter/steps/__13__step__/script.js
@@ -0,0 +1,2 @@
+'use strict';
+
diff --git a/Calorie_Counter/steps/__13__step__/styles.css b/Calorie_Counter/steps/__13__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__13__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__13__step__/title.txt b/Calorie_Counter/steps/__13__step__/title.txt
new file mode 100644
index 0000000..44d70b5
--- /dev/null
+++ b/Calorie_Counter/steps/__13__step__/title.txt
@@ -0,0 +1,4 @@
+Step 13
+Finally, you need to link
+your JavaScript file to your HTML. Create
+a script element to do so.
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__14__step__/README.md b/Calorie_Counter/steps/__14__step__/README.md
new file mode 100644
index 0000000..3a00849
--- /dev/null
+++ b/Calorie_Counter/steps/__14__step__/README.md
@@ -0,0 +1,265 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 14
+
+
+It is time to start writing the script that makes your form work.
+To access an HTML element with a given id name, you can use the getElementById()
+Example Code < h1id = " title" > </ h1> Example Code const mainTitleElement = document. getElementById ( 'title' ) ;
+Begin by getting the form element (using the id) and storing it in a variable called calorieCounter.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+'use strict';
+
+const calorieCounter = document.getElementById('calorie-counter');
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__14__step__/index.html b/Calorie_Counter/steps/__14__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__14__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__14__step__/script.js b/Calorie_Counter/steps/__14__step__/script.js
new file mode 100644
index 0000000..a2bd5ad
--- /dev/null
+++ b/Calorie_Counter/steps/__14__step__/script.js
@@ -0,0 +1,3 @@
+'use strict';
+
+const calorieCounter = document.getElementById('calorie-counter');
diff --git a/Calorie_Counter/steps/__14__step__/styles.css b/Calorie_Counter/steps/__14__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__14__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__14__step__/title.txt b/Calorie_Counter/steps/__14__step__/title.txt
new file mode 100644
index 0000000..0ee796f
--- /dev/null
+++ b/Calorie_Counter/steps/__14__step__/title.txt
@@ -0,0 +1,18 @@
+Step 14
+
+It is time to start
+writing the script that makes your form
+work.
+To access an HTML element with a
+given id name, you can use the
+getElementById() method. Here's an example of how
+to use this method:
+Example Code<h1 id="title">Main title</h1>
+
+Example
+Codeconst mainTitleElement = document.getElementById('title');
+
+Begin by getting the
+form element (using the id) and storing
+it in a variable called calorieCounter.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__15__step__/README.md b/Calorie_Counter/steps/__15__step__/README.md
new file mode 100644
index 0000000..16cc2f0
--- /dev/null
+++ b/Calorie_Counter/steps/__15__step__/README.md
@@ -0,0 +1,261 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 15
+
+
+Get your #budget element and assign it to budgetNumberInput, and your #entry-dropdown element and assign it to entryDropdown.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__15__step__/index.html b/Calorie_Counter/steps/__15__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__15__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__15__step__/script.js b/Calorie_Counter/steps/__15__step__/script.js
new file mode 100644
index 0000000..7acc51a
--- /dev/null
+++ b/Calorie_Counter/steps/__15__step__/script.js
@@ -0,0 +1,5 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
diff --git a/Calorie_Counter/steps/__15__step__/styles.css b/Calorie_Counter/steps/__15__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__15__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__15__step__/title.txt b/Calorie_Counter/steps/__15__step__/title.txt
new file mode 100644
index 0000000..afb43eb
--- /dev/null
+++ b/Calorie_Counter/steps/__15__step__/title.txt
@@ -0,0 +1,6 @@
+Step 15
+
+Get your #budget element and
+assign it to budgetNumberInput, and your #entry-dropdown
+element and assign it to entryDropdown.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__16__step__/README.md b/Calorie_Counter/steps/__16__step__/README.md
new file mode 100644
index 0000000..14fbaf2
--- /dev/null
+++ b/Calorie_Counter/steps/__16__step__/README.md
@@ -0,0 +1,264 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 16
+
+
+Following the same pattern, assign your #add-entry element to addEntryButton, your #clear element to clearButton, and your #output element to output.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__16__step__/index.html b/Calorie_Counter/steps/__16__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__16__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__16__step__/script.js b/Calorie_Counter/steps/__16__step__/script.js
new file mode 100644
index 0000000..6d6c1dc
--- /dev/null
+++ b/Calorie_Counter/steps/__16__step__/script.js
@@ -0,0 +1,8 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
diff --git a/Calorie_Counter/steps/__16__step__/styles.css b/Calorie_Counter/steps/__16__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__16__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__16__step__/title.txt b/Calorie_Counter/steps/__16__step__/title.txt
new file mode 100644
index 0000000..1727244
--- /dev/null
+++ b/Calorie_Counter/steps/__16__step__/title.txt
@@ -0,0 +1,7 @@
+Step 16
+
+Following the same pattern, assign
+your #add-entry element to addEntryButton, your #clear
+element to clearButton, and your #output element
+to output.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__17__step__/README.md b/Calorie_Counter/steps/__17__step__/README.md
new file mode 100644
index 0000000..5b7c55b
--- /dev/null
+++ b/Calorie_Counter/steps/__17__step__/README.md
@@ -0,0 +1,272 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 17
+
+
+In programming, prefixing a variable with is or has is a common practice to signify that the variable represents a boolean value.
+Here are a few examples:
+Example Code let isRunning = true ;
+let hasCompleted = false ;
+Declare a variable named isError using let and initialize it with false, allowing for its reassignment later.
+Later on in the project, you will update the value of isError if the user provides an invalid input.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+
+let isError = false;
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__17__step__/index.html b/Calorie_Counter/steps/__17__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__17__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__17__step__/script.js b/Calorie_Counter/steps/__17__step__/script.js
new file mode 100644
index 0000000..59fc8d2
--- /dev/null
+++ b/Calorie_Counter/steps/__17__step__/script.js
@@ -0,0 +1,10 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+
+let isError = false;
diff --git a/Calorie_Counter/steps/__17__step__/styles.css b/Calorie_Counter/steps/__17__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__17__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__17__step__/title.txt b/Calorie_Counter/steps/__17__step__/title.txt
new file mode 100644
index 0000000..6d806f7
--- /dev/null
+++ b/Calorie_Counter/steps/__17__step__/title.txt
@@ -0,0 +1,19 @@
+Step 17
+
+In programming, prefixing a variable
+with is or has is a common
+practice to signify that the variable represents
+a boolean value.
+Here are a few examples:
+Example
+Codelet isRunning = true;
+let hasCompleted = false;
+
+Declare
+a variable named isError using let and
+initialize it with false, allowing for its
+reassignment later.
+Later on in the project, you
+will update the value of isError if
+the user provides an invalid input.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__18__step__/README.md b/Calorie_Counter/steps/__18__step__/README.md
new file mode 100644
index 0000000..77ec504
--- /dev/null
+++ b/Calorie_Counter/steps/__18__step__/README.md
@@ -0,0 +1,271 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 18
+
+
+To match specific characters in a string, you can use Regular Expressions or "regex" for short.
+Regex in JavaScript is indicated by a pattern wrapped in forward slashes. The following example will match the string literal "hello":
+Example Code const regex = / hello / ;
+Declare a regex variable and assign it the value from the example above. In future steps, you will update this regex pattern to match specific characters needed for the calorie counter.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {};
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__18__step__/index.html b/Calorie_Counter/steps/__18__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__18__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__18__step__/script.js b/Calorie_Counter/steps/__18__step__/script.js
new file mode 100644
index 0000000..8bdf433
--- /dev/null
+++ b/Calorie_Counter/steps/__18__step__/script.js
@@ -0,0 +1,11 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {};
diff --git a/Calorie_Counter/steps/__18__step__/styles.css b/Calorie_Counter/steps/__18__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__18__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__18__step__/title.txt b/Calorie_Counter/steps/__18__step__/title.txt
new file mode 100644
index 0000000..b640210
--- /dev/null
+++ b/Calorie_Counter/steps/__18__step__/title.txt
@@ -0,0 +1,7 @@
+
+To match specific characters in a string, you can use Regular Expressions or "regex" for short.
+Regex in JavaScript is indicated by a pattern wrapped in forward slashes. The following example will match the string literal "hello":
+Example Code const regex = / hello / ;
+Declare a regex variable and assign it the value from the example above. In future steps, you will update this regex pattern to match specific characters needed for the calorie counter.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__19__step__/README.md b/Calorie_Counter/steps/__19__step__/README.md
new file mode 100644
index 0000000..d548836
--- /dev/null
+++ b/Calorie_Counter/steps/__19__step__/README.md
@@ -0,0 +1,273 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 19
+
+
+To match specific characters in a string, you can use Regular Expressions or "regex" for short.
+Regex in JavaScript is indicated by a pattern wrapped in forward slashes. The following example will match the string literal "hello":
+Example Code const regex = / hello / ;
+Declare a regex variable and assign it the value from the example above. In future steps, you will update this regex pattern to match specific characters needed for the calorie counter.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /hello/;
+};
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__19__step__/index.html b/Calorie_Counter/steps/__19__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__19__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__19__step__/script.js b/Calorie_Counter/steps/__19__step__/script.js
new file mode 100644
index 0000000..a5d57e5
--- /dev/null
+++ b/Calorie_Counter/steps/__19__step__/script.js
@@ -0,0 +1,13 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /hello/;
+};
diff --git a/Calorie_Counter/steps/__19__step__/styles.css b/Calorie_Counter/steps/__19__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__19__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__19__step__/title.txt b/Calorie_Counter/steps/__19__step__/title.txt
new file mode 100644
index 0000000..faad819
--- /dev/null
+++ b/Calorie_Counter/steps/__19__step__/title.txt
@@ -0,0 +1,18 @@
+Step 19
+
+To match specific characters in
+a string, you can use Regular Expressions
+or "regex" for short.
+Regex in JavaScript is
+indicated by a pattern wrapped in forward
+slashes. The following example will match the
+string literal "hello":
+Example Codeconst regex = /hello/;
+
+Declare
+a regex variable and assign it the
+value from the example above. In future
+steps, you will update this regex pattern
+to match specific characters needed for the
+calorie counter.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__20__step__/README.md b/Calorie_Counter/steps/__20__step__/README.md
new file mode 100644
index 0000000..f17d2d4
--- /dev/null
+++ b/Calorie_Counter/steps/__20__step__/README.md
@@ -0,0 +1,270 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 20
+
+
+The current pattern will match the exact text "hello", which is not the desired behavior. Instead, you want to search for +, -, or spaces. Replace the pattern in your regex variable with \+- to match plus and minus characters.
+Note that you need to use the backslash \ character to escape the + symbol because it has a special meaning in regular expressions.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /\+-/;
+};
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__20__step__/index.html b/Calorie_Counter/steps/__20__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__20__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__20__step__/script.js b/Calorie_Counter/steps/__20__step__/script.js
new file mode 100644
index 0000000..4fa9382
--- /dev/null
+++ b/Calorie_Counter/steps/__20__step__/script.js
@@ -0,0 +1,13 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /\+-/;
+};
diff --git a/Calorie_Counter/steps/__20__step__/styles.css b/Calorie_Counter/steps/__20__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__20__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__20__step__/title.txt b/Calorie_Counter/steps/__20__step__/title.txt
new file mode 100644
index 0000000..25fae73
--- /dev/null
+++ b/Calorie_Counter/steps/__20__step__/title.txt
@@ -0,0 +1,14 @@
+Step 20
+
+The current pattern will match
+the exact text "hello", which is not
+the desired behavior. Instead, you want to
+search for +, -, or spaces. Replace
+the pattern in your regex variable with
+\+- to match plus and minus characters.
+Note
+that you need to use the backslash
+\ character to escape the + symbol
+because it has a special meaning in
+regular expressions.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__21__step__/README.md b/Calorie_Counter/steps/__21__step__/README.md
new file mode 100644
index 0000000..b821d06
--- /dev/null
+++ b/Calorie_Counter/steps/__21__step__/README.md
@@ -0,0 +1,269 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 21
+
+
+In regex, shorthand character classes allow you to match specific characters without having to write those characters in your pattern. Shorthand character classes are preceded with a backslash (\). The character class \s will match any whitespace character. Add this to your regex pattern.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /\+-\s/;
+};
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__21__step__/index.html b/Calorie_Counter/steps/__21__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__21__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__21__step__/script.js b/Calorie_Counter/steps/__21__step__/script.js
new file mode 100644
index 0000000..3b8ec1f
--- /dev/null
+++ b/Calorie_Counter/steps/__21__step__/script.js
@@ -0,0 +1,13 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /\+-\s/;
+};
diff --git a/Calorie_Counter/steps/__21__step__/styles.css b/Calorie_Counter/steps/__21__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__21__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__21__step__/title.txt b/Calorie_Counter/steps/__21__step__/title.txt
new file mode 100644
index 0000000..8e83a1d
--- /dev/null
+++ b/Calorie_Counter/steps/__21__step__/title.txt
@@ -0,0 +1,10 @@
+Step 21
+
+In regex, shorthand character classes
+allow you to match specific characters without
+having to write those characters in your
+pattern. Shorthand character classes are preceded with
+a backslash (\). The character class \s
+will match any whitespace character. Add this
+to your regex pattern.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__22__step__/README.md b/Calorie_Counter/steps/__22__step__/README.md
new file mode 100644
index 0000000..b003ed1
--- /dev/null
+++ b/Calorie_Counter/steps/__22__step__/README.md
@@ -0,0 +1,273 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 22
+
+
+Your current pattern won't work just yet. /+-\s/ looks for +, -, and a space in order . This would match +- hello but would not match +hello.
+To tell the pattern to match each of these characters individually, you need to turn them into a character class. This is done by wrapping the characters you want to match in brackets. For example, this pattern will match the characters h, e, l, or o:
+Example Code const regex = / [helo] / ;
+Turn your +-\s pattern into a character class. Note that you no longer need to escape the + character, because you are using a character class.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/;
+};
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__22__step__/index.html b/Calorie_Counter/steps/__22__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__22__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__22__step__/script.js b/Calorie_Counter/steps/__22__step__/script.js
new file mode 100644
index 0000000..ffe6bea
--- /dev/null
+++ b/Calorie_Counter/steps/__22__step__/script.js
@@ -0,0 +1,13 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/;
+};
diff --git a/Calorie_Counter/steps/__22__step__/styles.css b/Calorie_Counter/steps/__22__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__22__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__22__step__/title.txt b/Calorie_Counter/steps/__22__step__/title.txt
new file mode 100644
index 0000000..77da5fe
--- /dev/null
+++ b/Calorie_Counter/steps/__22__step__/title.txt
@@ -0,0 +1,22 @@
+Step 22
+
+Your current pattern won't work
+just yet. /+-\s/ looks for +, -,
+and a space in order. This would
+match +- hello but would not match
++hello.
+To tell the pattern to match each
+of these characters individually, you need to
+turn them into a character class. This
+is done by wrapping the characters you
+want to match in brackets. For example,
+this pattern will match the characters h,
+e, l, or o:
+Example Codeconst regex =
+/[helo]/;
+
+Turn your +-\s pattern into a character
+class. Note that you no longer need
+to escape the + character, because you
+are using a character class.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__23__step__/README.md b/Calorie_Counter/steps/__23__step__/README.md
new file mode 100644
index 0000000..59247b2
--- /dev/null
+++ b/Calorie_Counter/steps/__23__step__/README.md
@@ -0,0 +1,272 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 23
+
+
+Regex can also take specific flags to alter the pattern matching behavior. Flags are added after the closing /. The g flag, which stands for "global", will tell the pattern to continue looking after it has found a match. Here is an example:
+Example Code const helloRegex = / hello / g ;
+Add the g flag to your regex pattern.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+};
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__23__step__/index.html b/Calorie_Counter/steps/__23__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__23__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__23__step__/script.js b/Calorie_Counter/steps/__23__step__/script.js
new file mode 100644
index 0000000..7d974c6
--- /dev/null
+++ b/Calorie_Counter/steps/__23__step__/script.js
@@ -0,0 +1,13 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+};
diff --git a/Calorie_Counter/steps/__23__step__/styles.css b/Calorie_Counter/steps/__23__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__23__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__23__step__/title.txt b/Calorie_Counter/steps/__23__step__/title.txt
new file mode 100644
index 0000000..c6c941b
--- /dev/null
+++ b/Calorie_Counter/steps/__23__step__/title.txt
@@ -0,0 +1,14 @@
+Step 23
+
+Regex can also take specific
+flags to alter the pattern matching behavior.
+Flags are added after the closing /.
+The g flag, which stands for "global",
+will tell the pattern to continue looking
+after it has found a match. Here
+is an example:
+Example Codeconst helloRegex = /hello/g;
+
+Add
+the g flag to your regex pattern.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__24__step__/README.md b/Calorie_Counter/steps/__24__step__/README.md
new file mode 100644
index 0000000..6c21635
--- /dev/null
+++ b/Calorie_Counter/steps/__24__step__/README.md
@@ -0,0 +1,275 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 24
+
+
+JavaScript provides a .replace() method that enables you to replace characters in a string with another string. This method accepts two arguments. The first argument is the character sequence to be replaced, which can be either a string or a regex pattern. The second argument is the string that replaces the matched sequence.
+Since strings are immutable, the replace method returns a new string with the replaced characters.
+In this example, the replace method is used to replace all instances of the letter l with the number 1 in the string hello.
+Example Code "hello" . replace ( / l / g , "1" ) ;
+Use your regex to replace all instances of +, -, and a space in str with an empty string. Return this value.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+};
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__24__step__/index.html b/Calorie_Counter/steps/__24__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__24__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__24__step__/script.js b/Calorie_Counter/steps/__24__step__/script.js
new file mode 100644
index 0000000..563925c
--- /dev/null
+++ b/Calorie_Counter/steps/__24__step__/script.js
@@ -0,0 +1,14 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+};
diff --git a/Calorie_Counter/steps/__24__step__/styles.css b/Calorie_Counter/steps/__24__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__24__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__24__step__/title.txt b/Calorie_Counter/steps/__24__step__/title.txt
new file mode 100644
index 0000000..0635325
--- /dev/null
+++ b/Calorie_Counter/steps/__24__step__/title.txt
@@ -0,0 +1,25 @@
+Step 24
+
+JavaScript provides a .replace() method
+that enables you to replace characters in
+a string with another string. This method
+accepts two arguments. The first argument is
+the character sequence to be replaced, which
+can be either a string or a
+regex pattern. The second argument is the
+string that replaces the matched sequence.
+Since strings
+are immutable, the replace method returns a
+new string with the replaced characters.
+In this
+example, the replace method is used to
+replace all instances of the letter l
+with the number 1 in the string
+hello.
+Example Code"hello".replace(/l/g, "1");
+
+Use your regex to replace
+all instances of +, -, and a
+space in str with an empty string.
+Return this value.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__25__step__/README.md b/Calorie_Counter/steps/__25__step__/README.md
new file mode 100644
index 0000000..0425548
--- /dev/null
+++ b/Calorie_Counter/steps/__25__step__/README.md
@@ -0,0 +1,272 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 25
+
+
+Now it is time to test out your cleanInputString function.
+Inside your cleanInputString function, add a console.log() statement with two arguments. The first argument should be the string "original string: " and the second argument should be the str parameter.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ console.log("original string: ", str);
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+};
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__25__step__/index.html b/Calorie_Counter/steps/__25__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__25__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__25__step__/script.js b/Calorie_Counter/steps/__25__step__/script.js
new file mode 100644
index 0000000..6338eaa
--- /dev/null
+++ b/Calorie_Counter/steps/__25__step__/script.js
@@ -0,0 +1,15 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ console.log("original string: ", str);
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+};
diff --git a/Calorie_Counter/steps/__25__step__/styles.css b/Calorie_Counter/steps/__25__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__25__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__25__step__/title.txt b/Calorie_Counter/steps/__25__step__/title.txt
new file mode 100644
index 0000000..0bf076c
--- /dev/null
+++ b/Calorie_Counter/steps/__25__step__/title.txt
@@ -0,0 +1,10 @@
+Step 25
+
+Now it is time to
+test out your cleanInputString function.
+Inside your cleanInputString
+function, add a console.log() statement with two
+arguments. The first argument should be the
+string "original string: " and the second
+argument should be the str parameter.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__26__step__/README.md b/Calorie_Counter/steps/__26__step__/README.md
new file mode 100644
index 0000000..30ef578
--- /dev/null
+++ b/Calorie_Counter/steps/__26__step__/README.md
@@ -0,0 +1,274 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 26
+
+
+To see the results from the cleanInputString function, you will need to add a console.log() statement. Inside that console statement, call the cleanInputString function with the string value of "+-99" as an argument.
+Open up the console and you should see the original string followed by the cleaned string value with the +- removed.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ console.log("original string: ", str);
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+console.log(cleanInputString("+-99"));
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__26__step__/index.html b/Calorie_Counter/steps/__26__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__26__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__26__step__/script.js b/Calorie_Counter/steps/__26__step__/script.js
new file mode 100644
index 0000000..4a8c6cc
--- /dev/null
+++ b/Calorie_Counter/steps/__26__step__/script.js
@@ -0,0 +1,17 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ console.log("original string: ", str);
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+console.log(cleanInputString("+-99"));
diff --git a/Calorie_Counter/steps/__26__step__/styles.css b/Calorie_Counter/steps/__26__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__26__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__26__step__/title.txt b/Calorie_Counter/steps/__26__step__/title.txt
new file mode 100644
index 0000000..6a9f9e1
--- /dev/null
+++ b/Calorie_Counter/steps/__26__step__/title.txt
@@ -0,0 +1,12 @@
+Step 26
+
+To see the results from
+the cleanInputString function, you will need to
+add a console.log() statement. Inside that console
+statement, call the cleanInputString function with the
+string value of "+-99" as an argument.
+Open
+up the console and you should see
+the original string followed by the cleaned
+string value with the +- removed.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__27__step__/README.md b/Calorie_Counter/steps/__27__step__/README.md
new file mode 100644
index 0000000..73695b1
--- /dev/null
+++ b/Calorie_Counter/steps/__27__step__/README.md
@@ -0,0 +1,270 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 27
+
+
+Once you have finished testing your cleanInputString function, you can remove both of your console statements.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__27__step__/index.html b/Calorie_Counter/steps/__27__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__27__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__27__step__/script.js b/Calorie_Counter/steps/__27__step__/script.js
new file mode 100644
index 0000000..1f5633a
--- /dev/null
+++ b/Calorie_Counter/steps/__27__step__/script.js
@@ -0,0 +1,14 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
diff --git a/Calorie_Counter/steps/__27__step__/styles.css b/Calorie_Counter/steps/__27__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__27__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__27__step__/title.txt b/Calorie_Counter/steps/__27__step__/title.txt
new file mode 100644
index 0000000..f17e9f8
--- /dev/null
+++ b/Calorie_Counter/steps/__27__step__/title.txt
@@ -0,0 +1,6 @@
+Step 27
+
+Once you have finished testing
+your cleanInputString function, you can remove both
+of your console statements.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__28__step__/README.md b/Calorie_Counter/steps/__28__step__/README.md
new file mode 100644
index 0000000..0cc1592
--- /dev/null
+++ b/Calorie_Counter/steps/__28__step__/README.md
@@ -0,0 +1,274 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 28
+
+
+In HTML, number inputs allow for exponential notation (such as 1e10). You need to filter those out.
+Start by creating a function called isInvalidInput – it should take a single str parameter.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput(str) => {
+
+};
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__28__step__/index.html b/Calorie_Counter/steps/__28__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__28__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__28__step__/script.js b/Calorie_Counter/steps/__28__step__/script.js
new file mode 100644
index 0000000..ce92140
--- /dev/null
+++ b/Calorie_Counter/steps/__28__step__/script.js
@@ -0,0 +1,18 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput(str) => {
+
+};
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__28__step__/styles.css b/Calorie_Counter/steps/__28__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__28__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__28__step__/title.txt b/Calorie_Counter/steps/__28__step__/title.txt
new file mode 100644
index 0000000..2b24504
--- /dev/null
+++ b/Calorie_Counter/steps/__28__step__/title.txt
@@ -0,0 +1,9 @@
+Step 28
+
+In HTML, number inputs allow
+for exponential notation (such as 1e10). You
+need to filter those out.
+Start by creating
+a function called isInvalidInput – it should
+take a single str parameter.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__29__step__/README.md b/Calorie_Counter/steps/__29__step__/README.md
new file mode 100644
index 0000000..af06c2a
--- /dev/null
+++ b/Calorie_Counter/steps/__29__step__/README.md
@@ -0,0 +1,273 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 29
+
+
+Declare a regex variable, and assign it a regex that matches the character e.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /e/;
+};
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__29__step__/index.html b/Calorie_Counter/steps/__29__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__29__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__29__step__/script.js b/Calorie_Counter/steps/__29__step__/script.js
new file mode 100644
index 0000000..bd1a360
--- /dev/null
+++ b/Calorie_Counter/steps/__29__step__/script.js
@@ -0,0 +1,18 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /e/;
+};
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__29__step__/styles.css b/Calorie_Counter/steps/__29__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__29__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__29__step__/title.txt b/Calorie_Counter/steps/__29__step__/title.txt
new file mode 100644
index 0000000..d4ed408
--- /dev/null
+++ b/Calorie_Counter/steps/__29__step__/title.txt
@@ -0,0 +1,6 @@
+Step 29
+
+Declare a regex variable, and
+assign it a regex that matches the
+character e.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__30__step__/README.md b/Calorie_Counter/steps/__30__step__/README.md
new file mode 100644
index 0000000..7026473
--- /dev/null
+++ b/Calorie_Counter/steps/__30__step__/README.md
@@ -0,0 +1,277 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 30
+
+
+The e in a number input can also be an uppercase E. Regex has a flag for this, however – the i flag, which stands for "insensitive".
+Example Code / Hello / i The regex above would match hello, Hello, HELLO, and even hElLo because of the i flag. This flag makes your pattern case-insensitive.
+Add the i flag to your regex pattern.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /e/i;
+};
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__30__step__/index.html b/Calorie_Counter/steps/__30__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__30__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__30__step__/script.js b/Calorie_Counter/steps/__30__step__/script.js
new file mode 100644
index 0000000..37aaa6a
--- /dev/null
+++ b/Calorie_Counter/steps/__30__step__/script.js
@@ -0,0 +1,18 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /e/i;
+};
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__30__step__/styles.css b/Calorie_Counter/steps/__30__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__30__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__30__step__/title.txt b/Calorie_Counter/steps/__30__step__/title.txt
new file mode 100644
index 0000000..7368259
--- /dev/null
+++ b/Calorie_Counter/steps/__30__step__/title.txt
@@ -0,0 +1,16 @@
+Step 30
+
+The e in a number
+input can also be an uppercase E.
+Regex has a flag for this, however
+– the i flag, which stands for
+"insensitive".
+Example Code/Hello/i
+
+The regex above would match hello,
+Hello, HELLO, and even hElLo because of
+the i flag. This flag makes your
+pattern case-insensitive.
+Add the i flag to your
+regex pattern.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__31__step__/README.md b/Calorie_Counter/steps/__31__step__/README.md
new file mode 100644
index 0000000..65363a3
--- /dev/null
+++ b/Calorie_Counter/steps/__31__step__/README.md
@@ -0,0 +1,274 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 31
+
+
+Number inputs only allow the e to occur between two digits. To match any number, you can use the character class [0-9]. This will match any digit between 0 and 9.
+Add this character class before and after e in your pattern.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /[0-9]e[0-9]/i;
+};
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__31__step__/index.html b/Calorie_Counter/steps/__31__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__31__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__31__step__/script.js b/Calorie_Counter/steps/__31__step__/script.js
new file mode 100644
index 0000000..4e17eac
--- /dev/null
+++ b/Calorie_Counter/steps/__31__step__/script.js
@@ -0,0 +1,18 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /[0-9]e[0-9]/i;
+};
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__31__step__/styles.css b/Calorie_Counter/steps/__31__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__31__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__31__step__/title.txt b/Calorie_Counter/steps/__31__step__/title.txt
new file mode 100644
index 0000000..c462893
--- /dev/null
+++ b/Calorie_Counter/steps/__31__step__/title.txt
@@ -0,0 +1,11 @@
+Step 31
+
+Number inputs only allow the
+e to occur between two digits. To
+match any number, you can use the
+character class [0-9]. This will match any
+digit between 0 and 9.
+Add this character
+class before and after e in your
+pattern.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__32__step__/README.md b/Calorie_Counter/steps/__32__step__/README.md
new file mode 100644
index 0000000..1e8c310
--- /dev/null
+++ b/Calorie_Counter/steps/__32__step__/README.md
@@ -0,0 +1,273 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 32
+
+
+The + modifier in a regex allows you to match a pattern that occurs one or more times. To match your digit pattern one or more times, add a plus after each of the digit character classes. For example: [0-9]+.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /[0-9]+e[0-9]+/i;
+};
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__32__step__/index.html b/Calorie_Counter/steps/__32__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__32__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__32__step__/script.js b/Calorie_Counter/steps/__32__step__/script.js
new file mode 100644
index 0000000..db2abea
--- /dev/null
+++ b/Calorie_Counter/steps/__32__step__/script.js
@@ -0,0 +1,18 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /[0-9]+e[0-9]+/i;
+};
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__32__step__/styles.css b/Calorie_Counter/steps/__32__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__32__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__32__step__/title.txt b/Calorie_Counter/steps/__32__step__/title.txt
new file mode 100644
index 0000000..3caa465
--- /dev/null
+++ b/Calorie_Counter/steps/__32__step__/title.txt
@@ -0,0 +1,9 @@
+Step 32
+
+The + modifier in a
+regex allows you to match a pattern
+that occurs one or more times. To
+match your digit pattern one or more
+times, add a plus after each of
+the digit character classes. For example: [0-9]+.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__33__step__/README.md b/Calorie_Counter/steps/__33__step__/README.md
new file mode 100644
index 0000000..97ea3d7
--- /dev/null
+++ b/Calorie_Counter/steps/__33__step__/README.md
@@ -0,0 +1,273 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 33
+
+
+There is a shorthand character class to match any digit: \d. Replace your [0-9] character classes with this shorthand.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+};
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__33__step__/index.html b/Calorie_Counter/steps/__33__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__33__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__33__step__/script.js b/Calorie_Counter/steps/__33__step__/script.js
new file mode 100644
index 0000000..0cfc5ad
--- /dev/null
+++ b/Calorie_Counter/steps/__33__step__/script.js
@@ -0,0 +1,18 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+};
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__33__step__/styles.css b/Calorie_Counter/steps/__33__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__33__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__33__step__/title.txt b/Calorie_Counter/steps/__33__step__/title.txt
new file mode 100644
index 0000000..3e847d4
--- /dev/null
+++ b/Calorie_Counter/steps/__33__step__/title.txt
@@ -0,0 +1,6 @@
+Step 33
+
+There is a shorthand character
+class to match any digit: \d. Replace
+your [0-9] character classes with this shorthand.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__34__step__/README.md b/Calorie_Counter/steps/__34__step__/README.md
new file mode 100644
index 0000000..1d42486
--- /dev/null
+++ b/Calorie_Counter/steps/__34__step__/README.md
@@ -0,0 +1,279 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 34
+
+
+Strings have a .match() method, which takes a regex argument. .match() will return an array of match results – containing either the first match, or all matches if the global flag is used.
+Example Code const str = 'example string' ;
+const regex = / example / ;
+const result = str. match ( regex) ;
+Return the result of calling the .match() method on str and passing your regex variable as the argument. You'll use this match result later on.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__34__step__/index.html b/Calorie_Counter/steps/__34__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__34__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__34__step__/script.js b/Calorie_Counter/steps/__34__step__/script.js
new file mode 100644
index 0000000..7e7ff88
--- /dev/null
+++ b/Calorie_Counter/steps/__34__step__/script.js
@@ -0,0 +1,19 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__34__step__/styles.css b/Calorie_Counter/steps/__34__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__34__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__34__step__/title.txt b/Calorie_Counter/steps/__34__step__/title.txt
new file mode 100644
index 0000000..3227c7e
--- /dev/null
+++ b/Calorie_Counter/steps/__34__step__/title.txt
@@ -0,0 +1,19 @@
+Step 34
+
+Strings have a .match() method,
+which takes a regex argument. .match() will
+return an array of match results –
+containing either the first match, or all
+matches if the global flag is used.
+Example
+Codeconst str = 'example string';
+const regex =
+/example/;
+const result = str.match(regex); // Returns ['example']
+
+Return
+the result of calling the .match() method
+on str and passing your regex variable
+as the argument. You'll use this match
+result later on.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__35__step__/README.md b/Calorie_Counter/steps/__35__step__/README.md
new file mode 100644
index 0000000..8205913
--- /dev/null
+++ b/Calorie_Counter/steps/__35__step__/README.md
@@ -0,0 +1,279 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 35
+
+
+Now it is time to test your isInvalidInput function. For this test, you want to check if the function can detect scientific notation like 1e3 or 10e2. While this is a valid way to represent numbers, it is not a valid input for your calorie counter project.
+Below your isInvalidInput function, add a console statement. Inside that console statement, call the isInvalidInput function with an argument of "1e3".
+Open up the console to see the result. In the next step, you will learn more about what that result means.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+console.log(isInvalidInput('1e3'));
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__35__step__/index.html b/Calorie_Counter/steps/__35__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__35__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__35__step__/script.js b/Calorie_Counter/steps/__35__step__/script.js
new file mode 100644
index 0000000..f6095eb
--- /dev/null
+++ b/Calorie_Counter/steps/__35__step__/script.js
@@ -0,0 +1,21 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+console.log(isInvalidInput('1e3'));
diff --git a/Calorie_Counter/steps/__35__step__/styles.css b/Calorie_Counter/steps/__35__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__35__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__35__step__/title.txt b/Calorie_Counter/steps/__35__step__/title.txt
new file mode 100644
index 0000000..2a1a74a
--- /dev/null
+++ b/Calorie_Counter/steps/__35__step__/title.txt
@@ -0,0 +1,18 @@
+Step 35
+
+Now it is time to
+test your isInvalidInput function. For this test,
+you want to check if the function
+can detect scientific notation like 1e3 or
+10e2. While this is a valid way
+to represent numbers, it is not a
+valid input for your calorie counter project.
+Below
+your isInvalidInput function, add a console statement.
+Inside that console statement, call the isInvalidInput
+function with an argument of "1e3".
+Open up
+the console to see the result. In
+the next step, you will learn more
+about what that result means.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__36__step__/README.md b/Calorie_Counter/steps/__36__step__/README.md
new file mode 100644
index 0000000..24a44aa
--- /dev/null
+++ b/Calorie_Counter/steps/__36__step__/README.md
@@ -0,0 +1,289 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 36
+
+
+When you open the console, you should see this result:
+Example Code [ '1e3' , index : 0 , input : '1e3' , groups : undefined ]
+The match method returns an array with any matches found in the string.
+Here is a complete breakdown of that information:
+
+"1e3" is the matched value against the /\d+e\d+/i regex.index: 0 is the index of the matched value in the string.input: '1e3' is the original string that was matched.groups: undefined are the matched groups, which are not used in this case. You will learn more about groups in a later project.
+Now it is time to test for a valid input. Update your console statement to the following: console.log(isInvalidInput("10")).
+Open up the console to see the result. You will learn more about what this result means in the next step.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+console.log(isInvalidInput('10'));
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__36__step__/index.html b/Calorie_Counter/steps/__36__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__36__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__36__step__/script.js b/Calorie_Counter/steps/__36__step__/script.js
new file mode 100644
index 0000000..1888229
--- /dev/null
+++ b/Calorie_Counter/steps/__36__step__/script.js
@@ -0,0 +1,21 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+console.log(isInvalidInput('10'));
diff --git a/Calorie_Counter/steps/__36__step__/styles.css b/Calorie_Counter/steps/__36__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__36__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__36__step__/title.txt b/Calorie_Counter/steps/__36__step__/title.txt
new file mode 100644
index 0000000..2f0b1f3
--- /dev/null
+++ b/Calorie_Counter/steps/__36__step__/title.txt
@@ -0,0 +1,33 @@
+Step 36
+
+When you open the console,
+you should see this result:
+Example Code[ '1e3',
+index: 0, input: '1e3', groups: undefined ]
+
+The
+match method returns an array with any
+matches found in the string.
+Here is a
+complete breakdown of that information:
+
+"1e3" is the
+matched value against the /\d+e\d+/i regex.
+index: 0
+is the index of the matched value
+in the string.
+input: '1e3' is the original
+string that was matched.
+groups: undefined are the
+matched groups, which are not used in
+this case. You will learn more about
+groups in a later project.
+
+Now it is
+time to test for a valid input.
+Update your console statement to the following:
+console.log(isInvalidInput("10")).
+Open up the console to see the
+result. You will learn more about what
+this result means in the next step.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__37__step__/README.md b/Calorie_Counter/steps/__37__step__/README.md
new file mode 100644
index 0000000..7cd2314
--- /dev/null
+++ b/Calorie_Counter/steps/__37__step__/README.md
@@ -0,0 +1,279 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 37
+
+
+When you open the console, you should see the result of null. The match method returns null when no match is found. In this case, the isInvalidInput function should return null when the input is a valid number without any scientific notation.
+null in JavaScript is a special primitive that represents the intentional absence of a value. In a boolean context, null is considered falsy which evaluates to false in a conditional statement.
+Now that you have finished testing your isInvalidInput function, you can remove the console.log statement.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+console.log(isInvalidInput('10'));
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__37__step__/index.html b/Calorie_Counter/steps/__37__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__37__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__37__step__/script.js b/Calorie_Counter/steps/__37__step__/script.js
new file mode 100644
index 0000000..1888229
--- /dev/null
+++ b/Calorie_Counter/steps/__37__step__/script.js
@@ -0,0 +1,21 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+console.log(isInvalidInput('10'));
diff --git a/Calorie_Counter/steps/__37__step__/styles.css b/Calorie_Counter/steps/__37__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__37__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__37__step__/title.txt b/Calorie_Counter/steps/__37__step__/title.txt
new file mode 100644
index 0000000..65d419b
--- /dev/null
+++ b/Calorie_Counter/steps/__37__step__/title.txt
@@ -0,0 +1,18 @@
+Step 37
+
+When you open the console,
+you should see the result of null.
+The match method returns null when no
+match is found. In this case, the
+isInvalidInput function should return null when the
+input is a valid number without any
+scientific notation.
+null in JavaScript is a special
+primitive that represents the intentional absence of
+a value. In a boolean context, null
+is considered falsy which evaluates to false
+in a conditional statement.
+Now that you have
+finished testing your isInvalidInput function, you can
+remove the console.log statement.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__38__step__/README.md b/Calorie_Counter/steps/__38__step__/README.md
new file mode 100644
index 0000000..758255b
--- /dev/null
+++ b/Calorie_Counter/steps/__38__step__/README.md
@@ -0,0 +1,280 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 38
+
+
+Now you need to retrieve the value of entryDropdown.value to get the currently selected option from the dropdown.
+Print entryDropdown.value to the console to see its value.
+Since entryDropdown.value is in a static context (outside of an event listener), it only shows the value at the moment the code runs. This means it won't automatically update as the user interacts with the dropdown.
+It will capture the initial value (in this case, "breakfast") and won't reflect any changes the user makes afterward.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+console.log(entryDropdown.value);
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__38__step__/index.html b/Calorie_Counter/steps/__38__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__38__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__38__step__/script.js b/Calorie_Counter/steps/__38__step__/script.js
new file mode 100644
index 0000000..cf77533
--- /dev/null
+++ b/Calorie_Counter/steps/__38__step__/script.js
@@ -0,0 +1,21 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+console.log(entryDropdown.value);
diff --git a/Calorie_Counter/steps/__38__step__/styles.css b/Calorie_Counter/steps/__38__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__38__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__38__step__/title.txt b/Calorie_Counter/steps/__38__step__/title.txt
new file mode 100644
index 0000000..6fbe6e2
--- /dev/null
+++ b/Calorie_Counter/steps/__38__step__/title.txt
@@ -0,0 +1,18 @@
+Step 38
+
+Now you need to retrieve
+the value of entryDropdown.value to get the
+currently selected option from the dropdown.
+Print entryDropdown.value
+to the console to see its value.
+Since
+entryDropdown.value is in a static context (outside
+of an event listener), it only shows
+the value at the moment the code
+runs. This means it won't automatically update
+as the user interacts with the dropdown.
+It
+will capture the initial value (in this
+case, "breakfast") and won't reflect any changes
+the user makes afterward.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__39__step__/README.md b/Calorie_Counter/steps/__39__step__/README.md
new file mode 100644
index 0000000..5bf69a7
--- /dev/null
+++ b/Calorie_Counter/steps/__39__step__/README.md
@@ -0,0 +1,279 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 39
+
+
+Now that you have finished testing the value of entryDropdown.value, you can remove the console.log statement.
+Your next step is to allow users to add entries to the calorie counter. Declare an empty function addEntry. This function should not take any parameters.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+};
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__39__step__/index.html b/Calorie_Counter/steps/__39__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__39__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__39__step__/script.js b/Calorie_Counter/steps/__39__step__/script.js
new file mode 100644
index 0000000..7a6ef94
--- /dev/null
+++ b/Calorie_Counter/steps/__39__step__/script.js
@@ -0,0 +1,22 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+};
diff --git a/Calorie_Counter/steps/__39__step__/styles.css b/Calorie_Counter/steps/__39__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__39__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__39__step__/title.txt b/Calorie_Counter/steps/__39__step__/title.txt
new file mode 100644
index 0000000..1a8825e
--- /dev/null
+++ b/Calorie_Counter/steps/__39__step__/title.txt
@@ -0,0 +1,11 @@
+Step 39
+
+Now that you have finished
+testing the value of entryDropdown.value, you can
+remove the console.log statement.
+Your next step is
+to allow users to add entries to
+the calorie counter. Declare an empty function
+addEntry. This function should not take any
+parameters.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__40__step__/README.md b/Calorie_Counter/steps/__40__step__/README.md
new file mode 100644
index 0000000..bf28220
--- /dev/null
+++ b/Calorie_Counter/steps/__40__step__/README.md
@@ -0,0 +1,281 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 40
+
+
+You'll need to know which category the entry goes in. Thankfully, you added a dropdown for the user to select a category.
+Remember that you queried that dropdown earlier in your JavaScript and assigned it to the entryDropdown variable. You can use the value property to get the value of the selected option.
+Use concatenation to add a # to the beginning of the value property of entryDropdown, and assign that result to a targetId variable.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetId = "#" + entryDropdown.value;
+};
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__40__step__/index.html b/Calorie_Counter/steps/__40__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__40__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__40__step__/script.js b/Calorie_Counter/steps/__40__step__/script.js
new file mode 100644
index 0000000..8ef35d5
--- /dev/null
+++ b/Calorie_Counter/steps/__40__step__/script.js
@@ -0,0 +1,23 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetId = "#" + entryDropdown.value;
+};
diff --git a/Calorie_Counter/steps/__40__step__/styles.css b/Calorie_Counter/steps/__40__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__40__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__40__step__/title.txt b/Calorie_Counter/steps/__40__step__/title.txt
new file mode 100644
index 0000000..72f478a
--- /dev/null
+++ b/Calorie_Counter/steps/__40__step__/title.txt
@@ -0,0 +1,16 @@
+Step 40
+
+You'll need to know which
+category the entry goes in. Thankfully, you
+added a dropdown for the user to
+select a category.
+Remember that you queried that
+dropdown earlier in your JavaScript and assigned
+it to the entryDropdown variable. You can
+use the value property to get the
+value of the selected option.
+Use concatenation to
+add a # to the beginning of
+the value property of entryDropdown, and assign
+that result to a targetId variable.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__41__step__/README.md b/Calorie_Counter/steps/__41__step__/README.md
new file mode 100644
index 0000000..ac9d477
--- /dev/null
+++ b/Calorie_Counter/steps/__41__step__/README.md
@@ -0,0 +1,280 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 41
+
+
+Now you need to target the .input-container element within the element that has your targetId. Declare a new targetInputContainer variable, and assign it the value of document.querySelector(). Use concatenation to separate targetId and '.input-container' with a space, and pass that string to querySelector().
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetId = "#" + entryDropdown.value;
+ const targetInputContainer = document.querySelector(targetId + ' .input-container');
+};
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__41__step__/index.html b/Calorie_Counter/steps/__41__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__41__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__41__step__/script.js b/Calorie_Counter/steps/__41__step__/script.js
new file mode 100644
index 0000000..b65e5a2
--- /dev/null
+++ b/Calorie_Counter/steps/__41__step__/script.js
@@ -0,0 +1,24 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetId = "#" + entryDropdown.value;
+ const targetInputContainer = document.querySelector(targetId + ' .input-container');
+};
diff --git a/Calorie_Counter/steps/__41__step__/styles.css b/Calorie_Counter/steps/__41__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__41__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__41__step__/title.txt b/Calorie_Counter/steps/__41__step__/title.txt
new file mode 100644
index 0000000..bb5c38e
--- /dev/null
+++ b/Calorie_Counter/steps/__41__step__/title.txt
@@ -0,0 +1,10 @@
+Step 41
+
+Now you need to target
+the .input-container element within the element that
+has your targetId. Declare a new targetInputContainer
+variable, and assign it the value of
+document.querySelector(). Use concatenation to separate targetId and
+'.input-container' with a space, and pass that
+string to querySelector().
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__42__step__/README.md b/Calorie_Counter/steps/__42__step__/README.md
new file mode 100644
index 0000000..33c2abc
--- /dev/null
+++ b/Calorie_Counter/steps/__42__step__/README.md
@@ -0,0 +1,287 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 42
+
+
+JavaScript has a feature called template literals , which allow you to interpolate variables directly within a string. Template literals are denoted with backticks ``, as opposed to single or double quotes. Variables can be passed in to a template literal by surrounding the variable with ${} – the value of the variable will be inserted into the string.
+For example:
+Example Code const name = "Naomi" ;
+const templateLiteral = ` Hello, my name is ${ name} ~! ` ;
+console. log ( templateLiteral) ;
+The console will show the string "Hello, my name is Naomi~!".
+Replace your concatenated string in the querySelector with a template literal – be sure to keep the space between your targetId variable and .input-container.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetId = "#" + entryDropdown.value;
+ const targetInputContainer = document.querySelector(`${targetId} .input-container`);
+};
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__42__step__/index.html b/Calorie_Counter/steps/__42__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__42__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__42__step__/script.js b/Calorie_Counter/steps/__42__step__/script.js
new file mode 100644
index 0000000..db82ed8
--- /dev/null
+++ b/Calorie_Counter/steps/__42__step__/script.js
@@ -0,0 +1,24 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetId = "#" + entryDropdown.value;
+ const targetInputContainer = document.querySelector(`${targetId} .input-container`);
+};
diff --git a/Calorie_Counter/steps/__42__step__/styles.css b/Calorie_Counter/steps/__42__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__42__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__42__step__/title.txt b/Calorie_Counter/steps/__42__step__/title.txt
new file mode 100644
index 0000000..7a0b46d
--- /dev/null
+++ b/Calorie_Counter/steps/__42__step__/title.txt
@@ -0,0 +1,25 @@
+Step 42
+
+JavaScript has a feature called
+template literals, which allow you to interpolate
+variables directly within a string. Template literals
+are denoted with backticks ``, as opposed
+to single or double quotes. Variables can
+be passed in to a template literal
+by surrounding the variable with ${} –
+the value of the variable will be
+inserted into the string.
+For example:
+Example Codeconst name
+= "Naomi";
+const templateLiteral = `Hello, my name
+is ${name}~!`;
+console.log(templateLiteral);
+
+The console will show the string
+"Hello, my name is Naomi~!".
+Replace your concatenated
+string in the querySelector with a template
+literal – be sure to keep the
+space between your targetId variable and .input-container.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__43__step__/README.md b/Calorie_Counter/steps/__43__step__/README.md
new file mode 100644
index 0000000..ab767d0
--- /dev/null
+++ b/Calorie_Counter/steps/__43__step__/README.md
@@ -0,0 +1,279 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 43
+
+
+Thanks to template literals, you actually don't need the targetId variable at all. Remove that variable, and update your template literal to replace targetId with entryDropdown.value – remember to add # before that, in the string.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+};
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__43__step__/index.html b/Calorie_Counter/steps/__43__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__43__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__43__step__/script.js b/Calorie_Counter/steps/__43__step__/script.js
new file mode 100644
index 0000000..bcdedc8
--- /dev/null
+++ b/Calorie_Counter/steps/__43__step__/script.js
@@ -0,0 +1,23 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+};
diff --git a/Calorie_Counter/steps/__43__step__/styles.css b/Calorie_Counter/steps/__43__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__43__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__43__step__/title.txt b/Calorie_Counter/steps/__43__step__/title.txt
new file mode 100644
index 0000000..0554f1a
--- /dev/null
+++ b/Calorie_Counter/steps/__43__step__/title.txt
@@ -0,0 +1,9 @@
+Step 43
+
+Thanks to template literals, you
+actually don't need the targetId variable at
+all. Remove that variable, and update your
+template literal to replace targetId with entryDropdown.value
+– remember to add # before that,
+in the string.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__44__step__/README.md b/Calorie_Counter/steps/__44__step__/README.md
new file mode 100644
index 0000000..52ce0cf
--- /dev/null
+++ b/Calorie_Counter/steps/__44__step__/README.md
@@ -0,0 +1,282 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 44
+
+
+You will want to number the entries a user adds. To get all of the number inputs, you can use the querySelectorAll() method.
+The querySelectorAll() method returns a NodeList of all the elements that match the selector. A NodeList is an array-like object, so you can access the elements using bracket notation.
+Declare an entryNumber variable and give it the value of targetInputContainer.querySelectorAll(). You do not need to pass an argument to the query selector yet.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll();
+};
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__44__step__/index.html b/Calorie_Counter/steps/__44__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__44__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__44__step__/script.js b/Calorie_Counter/steps/__44__step__/script.js
new file mode 100644
index 0000000..84ddde8
--- /dev/null
+++ b/Calorie_Counter/steps/__44__step__/script.js
@@ -0,0 +1,24 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll();
+};
diff --git a/Calorie_Counter/steps/__44__step__/styles.css b/Calorie_Counter/steps/__44__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__44__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__44__step__/title.txt b/Calorie_Counter/steps/__44__step__/title.txt
new file mode 100644
index 0000000..c025ffa
--- /dev/null
+++ b/Calorie_Counter/steps/__44__step__/title.txt
@@ -0,0 +1,16 @@
+Step 44
+
+You will want to number
+the entries a user adds. To get
+all of the number inputs, you can
+use the querySelectorAll() method.
+The querySelectorAll() method returns
+a NodeList of all the elements that
+match the selector. A NodeList is an
+array-like object, so you can access the
+elements using bracket notation.
+Declare an entryNumber variable
+and give it the value of targetInputContainer.querySelectorAll().
+You do not need to pass an
+argument to the query selector yet.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__45__step__/README.md b/Calorie_Counter/steps/__45__step__/README.md
new file mode 100644
index 0000000..afaf77e
--- /dev/null
+++ b/Calorie_Counter/steps/__45__step__/README.md
@@ -0,0 +1,282 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 45
+
+
+Each entry will have a text input for the entry's name, and a number input for the calories. To get a count of the number of entries, you can query by text inputs.
+Pass the string input[type="text"] to the querySelectorAll() method. Remember that if you use single quotes for your string, you must also use double quotes within it (or vice-versa).
+This will return a NodeList of all the text inputs in the form. You can then access the length property of the NodeList to get the number of entries. Do this on the same line.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+};
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__45__step__/index.html b/Calorie_Counter/steps/__45__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__45__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__45__step__/script.js b/Calorie_Counter/steps/__45__step__/script.js
new file mode 100644
index 0000000..51b5b1a
--- /dev/null
+++ b/Calorie_Counter/steps/__45__step__/script.js
@@ -0,0 +1,24 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+};
diff --git a/Calorie_Counter/steps/__45__step__/styles.css b/Calorie_Counter/steps/__45__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__45__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__45__step__/title.txt b/Calorie_Counter/steps/__45__step__/title.txt
new file mode 100644
index 0000000..3028cc1
--- /dev/null
+++ b/Calorie_Counter/steps/__45__step__/title.txt
@@ -0,0 +1,19 @@
+Step 45
+
+Each entry will have a
+text input for the entry's name, and
+a number input for the calories. To
+get a count of the number of
+entries, you can query by text inputs.
+Pass
+the string input[type="text"] to the querySelectorAll() method.
+Remember that if you use single quotes
+for your string, you must also use
+double quotes within it (or vice-versa).
+This will
+return a NodeList of all the text
+inputs in the form. You can then
+access the length property of the NodeList
+to get the number of entries. Do
+this on the same line.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__46__step__/README.md b/Calorie_Counter/steps/__46__step__/README.md
new file mode 100644
index 0000000..30f3121
--- /dev/null
+++ b/Calorie_Counter/steps/__46__step__/README.md
@@ -0,0 +1,281 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 46
+
+
+Now you need to build your dynamic HTML string to add to the webpage. Declare a new HTMLString variable, and assign it an empty template literal string.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ let HTMLString = ``;
+};
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__46__step__/index.html b/Calorie_Counter/steps/__46__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__46__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__46__step__/script.js b/Calorie_Counter/steps/__46__step__/script.js
new file mode 100644
index 0000000..a6a8b97
--- /dev/null
+++ b/Calorie_Counter/steps/__46__step__/script.js
@@ -0,0 +1,25 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ let HTMLString = ``;
+};
diff --git a/Calorie_Counter/steps/__46__step__/styles.css b/Calorie_Counter/steps/__46__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__46__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__46__step__/title.txt b/Calorie_Counter/steps/__46__step__/title.txt
new file mode 100644
index 0000000..4789028
--- /dev/null
+++ b/Calorie_Counter/steps/__46__step__/title.txt
@@ -0,0 +1,8 @@
+Step 46
+
+Now you need to build
+your dynamic HTML string to add to
+the webpage. Declare a new HTMLString variable,
+and assign it an empty template literal
+string.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__47__step__/README.md b/Calorie_Counter/steps/__47__step__/README.md
new file mode 100644
index 0000000..24ebd21
--- /dev/null
+++ b/Calorie_Counter/steps/__47__step__/README.md
@@ -0,0 +1,281 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 47
+
+
+Inside your template literal, create a label element and give it the text Entry # Name. Using your template literal syntax, replace # with the value of entryNumber.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ let HTMLString = `Entry ${entryNumber} Name `;
+};
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__47__step__/index.html b/Calorie_Counter/steps/__47__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__47__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__47__step__/script.js b/Calorie_Counter/steps/__47__step__/script.js
new file mode 100644
index 0000000..a9267bf
--- /dev/null
+++ b/Calorie_Counter/steps/__47__step__/script.js
@@ -0,0 +1,25 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ let HTMLString = `Entry ${entryNumber} Name `;
+};
diff --git a/Calorie_Counter/steps/__47__step__/styles.css b/Calorie_Counter/steps/__47__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__47__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__47__step__/title.txt b/Calorie_Counter/steps/__47__step__/title.txt
new file mode 100644
index 0000000..ea279a4
--- /dev/null
+++ b/Calorie_Counter/steps/__47__step__/title.txt
@@ -0,0 +1,8 @@
+Step 47
+
+Inside your template literal, create
+a label element and give it the
+text Entry # Name. Using your template
+literal syntax, replace # with the value
+of entryNumber.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__48__step__/README.md b/Calorie_Counter/steps/__48__step__/README.md
new file mode 100644
index 0000000..7d2a015
--- /dev/null
+++ b/Calorie_Counter/steps/__48__step__/README.md
@@ -0,0 +1,283 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 48
+
+
+Give your label element a for attribute with the value X-#-name, where X is the value of the entryDropdown element and # is the value of entryNumber. Remember that HTML attributes should be wrapped in double quotes.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ let HTMLString = `
+ Entry ${entryNumber} Name
+ `;
+};
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__48__step__/index.html b/Calorie_Counter/steps/__48__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__48__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__48__step__/script.js b/Calorie_Counter/steps/__48__step__/script.js
new file mode 100644
index 0000000..341ff46
--- /dev/null
+++ b/Calorie_Counter/steps/__48__step__/script.js
@@ -0,0 +1,27 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ let HTMLString = `
+ Entry ${entryNumber} Name
+ `;
+};
diff --git a/Calorie_Counter/steps/__48__step__/styles.css b/Calorie_Counter/steps/__48__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__48__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__48__step__/title.txt b/Calorie_Counter/steps/__48__step__/title.txt
new file mode 100644
index 0000000..9f7c39a
--- /dev/null
+++ b/Calorie_Counter/steps/__48__step__/title.txt
@@ -0,0 +1,9 @@
+Step 48
+
+Give your label element a
+for attribute with the value X-#-name, where
+X is the value of the entryDropdown
+element and # is the value of
+entryNumber. Remember that HTML attributes should be
+wrapped in double quotes.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__49__step__/README.md b/Calorie_Counter/steps/__49__step__/README.md
new file mode 100644
index 0000000..41ad617
--- /dev/null
+++ b/Calorie_Counter/steps/__49__step__/README.md
@@ -0,0 +1,284 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 49
+
+
+After your label element, and on a new line in your template string, create an input element. Give it a type attribute set to text, a placeholder attribute set to Name, and an id attribute that matches the for attribute of your label element.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ let HTMLString = `
+ Entry ${entryNumber} Name
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__49__step__/index.html b/Calorie_Counter/steps/__49__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__49__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__49__step__/script.js b/Calorie_Counter/steps/__49__step__/script.js
new file mode 100644
index 0000000..8d8a0e4
--- /dev/null
+++ b/Calorie_Counter/steps/__49__step__/script.js
@@ -0,0 +1,28 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ let HTMLString = `
+ Entry ${entryNumber} Name
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 50
+
+
+Create another label element (on a new line) at the end of your HTMLString. This label should have the text Entry # Calories, using your template literal syntax to replace # with the value of entryNumber, and the for attribute set to X-#-calories, where X is the value of entryDropdown and # is the value of entryNumber.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ let HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ `;
+};
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__50__step__/index.html b/Calorie_Counter/steps/__50__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__50__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__50__step__/script.js b/Calorie_Counter/steps/__50__step__/script.js
new file mode 100644
index 0000000..36514fb
--- /dev/null
+++ b/Calorie_Counter/steps/__50__step__/script.js
@@ -0,0 +1,29 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ let HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ `;
+};
diff --git a/Calorie_Counter/steps/__50__step__/styles.css b/Calorie_Counter/steps/__50__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__50__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__50__step__/title.txt b/Calorie_Counter/steps/__50__step__/title.txt
new file mode 100644
index 0000000..8478e69
--- /dev/null
+++ b/Calorie_Counter/steps/__50__step__/title.txt
@@ -0,0 +1,12 @@
+Step 50
+
+Create another label element (on
+a new line) at the end of
+your HTMLString. This label should have the
+text Entry # Calories, using your template
+literal syntax to replace # with the
+value of entryNumber, and the for attribute
+set to X-#-calories, where X is the
+value of entryDropdown and # is the
+value of entryNumber.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__51__step__/README.md b/Calorie_Counter/steps/__51__step__/README.md
new file mode 100644
index 0000000..cab8dcf
--- /dev/null
+++ b/Calorie_Counter/steps/__51__step__/README.md
@@ -0,0 +1,286 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 51
+
+
+Finally, on a new line after your second label, create another input element. Give this one a type attribute set to number, a min attribute set to 0 (to ensure negative calories cannot be added), a placeholder attribute set to Calories, and an id attribute that matches the for attribute of your second label element.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ let HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__51__step__/index.html b/Calorie_Counter/steps/__51__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__51__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__51__step__/script.js b/Calorie_Counter/steps/__51__step__/script.js
new file mode 100644
index 0000000..7b3e0ec
--- /dev/null
+++ b/Calorie_Counter/steps/__51__step__/script.js
@@ -0,0 +1,30 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ let HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 52
+
+
+To see your new HTML content for the targetInputContainer, you will need to use the innerHTML property.
+The innerHTML property sets or returns the HTML content inside an element.
+Here is a form element with a label and input element nested inside.
+Example Code < formid = " form" > < labelfor = " first-name" > </ label> < inputid = " first-name" type = " text" > </ form> If you want to add another label and input element inside the form, then you can use the innerHTML property as shown below:
+Example Code const formElement = document. getElementById ( "form" ) ;
+const formContent = `
+ <label for="last-name">Last name</label>
+ <input id="last-name" type="text">
+ ` ;
+formElement. innerHTML += formContent;
+Use the addition assignment operator += to append your HTMLString variable to targetInputContainer.innerHTML.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__52__step__/index.html b/Calorie_Counter/steps/__52__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__52__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__52__step__/script.js b/Calorie_Counter/steps/__52__step__/script.js
new file mode 100644
index 0000000..2a4a162
--- /dev/null
+++ b/Calorie_Counter/steps/__52__step__/script.js
@@ -0,0 +1,31 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 53
+
+
+In the Role Playing Game project, you learned how to set a button's behavior by editing its onclick property. You can also edit an element's behavior by adding an event listener.
+The following example uses the addEventListener method to add a click event to a button. When the button is clicked, the printName function is called.
+Example Code < buttonclass = " btn" > </ button> Example Code const button = document. querySelector ( '.btn' ) ;
+function printName ( ) {
+ console. log ( "Jessica" ) ;
+}
+button. addEventListener ( 'click' , printName) ;
+The addEventListener method takes two arguments. The first is the event to listen to. (Ex. 'click') The second is the callback function, or the function that runs when the event is triggered.
+Call the .addEventListener() method on the addEntryButton. Pass in the string "click" for the first argument and the addEntry function for the second argument.
+Note that you should not call addEntry, but pass the variable (or function reference ) directly.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__53__step__/index.html b/Calorie_Counter/steps/__53__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__53__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__53__step__/script.js b/Calorie_Counter/steps/__53__step__/script.js
new file mode 100644
index 0000000..d15877e
--- /dev/null
+++ b/Calorie_Counter/steps/__53__step__/script.js
@@ -0,0 +1,34 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 54
+
+
+Try adding a couple of entries to the Breakfast category, and you may notice some bugs! The first thing we need to fix is the entry counts – the first entry should have a count of 1, not 0.
+This bug occurs because you are querying for input[type="text"] elements before adding the new entry to the page. To fix this, update your entryNumber variable to be the value of the length of the query plus 1. Add this on your declaration line, not in your template strings.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__54__step__/index.html b/Calorie_Counter/steps/__54__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__54__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__54__step__/script.js b/Calorie_Counter/steps/__54__step__/script.js
new file mode 100644
index 0000000..02710bf
--- /dev/null
+++ b/Calorie_Counter/steps/__54__step__/script.js
@@ -0,0 +1,34 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 55
+
+
+Your other bug occurs if you add a Breakfast entry, fill it in, then add a second Breakfast entry. You'll see that the values you added disappeared.
+This is because you are updating innerHTML directly, which does not preserve your input content. Change your innerHTML assignment to use the insertAdjacentHTML() method of targetInputContainer instead. Do not pass any arguments yet.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__55__step__/index.html b/Calorie_Counter/steps/__55__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__55__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__55__step__/script.js b/Calorie_Counter/steps/__55__step__/script.js
new file mode 100644
index 0000000..a25667e
--- /dev/null
+++ b/Calorie_Counter/steps/__55__step__/script.js
@@ -0,0 +1,34 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 56
+
+
+The insertAdjacentHtml method takes two arguments. The first argument is a string that specifies the position of the inserted element. The second argument is a string containing the HTML to be inserted.
+For the first argument, pass the string "beforeend" to insert the new element as the last child of targetInputContainer.
+For the second argument, pass your HTMLString variable.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__56__step__/index.html b/Calorie_Counter/steps/__56__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__56__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__56__step__/script.js b/Calorie_Counter/steps/__56__step__/script.js
new file mode 100644
index 0000000..7644aea
--- /dev/null
+++ b/Calorie_Counter/steps/__56__step__/script.js
@@ -0,0 +1,34 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 57
+
+
+Great! Now you can add entries without losing your previous inputs.
+Your next step is to write a function that will get the calorie counts from the user's entries.
+Declare a getCaloriesFromInputs function, and give it a parameter called list.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__57__step__/index.html b/Calorie_Counter/steps/__57__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__57__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__57__step__/script.js b/Calorie_Counter/steps/__57__step__/script.js
new file mode 100644
index 0000000..3aef829
--- /dev/null
+++ b/Calorie_Counter/steps/__57__step__/script.js
@@ -0,0 +1,36 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 58
+
+
+In your new function, declare a calories variable and assign it the value 0. Use let to declare it, since you will be reassigning it later.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__58__step__/index.html b/Calorie_Counter/steps/__58__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__58__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__58__step__/script.js b/Calorie_Counter/steps/__58__step__/script.js
new file mode 100644
index 0000000..8f28571
--- /dev/null
+++ b/Calorie_Counter/steps/__58__step__/script.js
@@ -0,0 +1,38 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 59
+
+
+The list parameter is going to be the result of a query selector, which will return a NodeList. A NodeList is a list of elements like an array. It contains the elements that match the query selector. You will need to loop through these elements in the list.
+In previous steps, you learned how to loop through an array using a for loop. You can also use a for...of loop to loop through an array and a NodeList.
+A for...of loop is used to iterate over elements in an iterable object like an array. The variable declared in the loop represents the current element being iterated over.
+Example Code for ( const element of elementArray) {
+ console. log ( element) ;
+}
+Create a for...of loop that loops through the list. For the loop's variable name, use const to declare a variable called item.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__59__step__/index.html b/Calorie_Counter/steps/__59__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__59__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__59__step__/script.js b/Calorie_Counter/steps/__59__step__/script.js
new file mode 100644
index 0000000..6028113
--- /dev/null
+++ b/Calorie_Counter/steps/__59__step__/script.js
@@ -0,0 +1,39 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 60
+
+
+The NodeList values you will pass to list will consist of input elements. So you will want to look at the value attribute of each element.
+Assign item.value to a const variable called currVal.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__60__step__/index.html b/Calorie_Counter/steps/__60__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__60__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__60__step__/script.js b/Calorie_Counter/steps/__60__step__/script.js
new file mode 100644
index 0000000..90841c5
--- /dev/null
+++ b/Calorie_Counter/steps/__60__step__/script.js
@@ -0,0 +1,41 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 61
+
+
+Remember that you wrote a function earlier to clean the user's input? You'll need to use that function here.
+Update your currVal declaration to be the result of calling cleanInputString with item.value.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__61__step__/index.html b/Calorie_Counter/steps/__61__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__61__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__61__step__/script.js b/Calorie_Counter/steps/__61__step__/script.js
new file mode 100644
index 0000000..db08772
--- /dev/null
+++ b/Calorie_Counter/steps/__61__step__/script.js
@@ -0,0 +1,41 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 62
+
+
+You also need to confirm the input is valid. Declare an invalidInputMatch variable, and assign it the result of calling your isInvalidInput function with currVal as the argument.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__62__step__/index.html b/Calorie_Counter/steps/__62__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__62__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__62__step__/script.js b/Calorie_Counter/steps/__62__step__/script.js
new file mode 100644
index 0000000..de88b91
--- /dev/null
+++ b/Calorie_Counter/steps/__62__step__/script.js
@@ -0,0 +1,42 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 63
+
+
+Remember that your isInvalidInput function returns String.match, which is an array of matches or null if no matches are found.
+In JavaScript, values can either be truthy or falsy . A value is truthy if it evaluates to true when converted to a Boolean. A value is falsy if it evaluates to false when converted to a Boolean. null is an example of a falsy value.
+You need to check if invalidInputMatch is truthy – you can do this by passing the variable directly to your if condition (without a comparison operator). Here's an example of checking the truthiness of helloWorld.
+Example Code if ( helloWorld) {
+
+}
+Add an if statement that checks if invalidInputMatch is truthy.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__63__step__/index.html b/Calorie_Counter/steps/__63__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__63__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__63__step__/script.js b/Calorie_Counter/steps/__63__step__/script.js
new file mode 100644
index 0000000..d2cbe97
--- /dev/null
+++ b/Calorie_Counter/steps/__63__step__/script.js
@@ -0,0 +1,45 @@
+"use strict";
+
+const calorieCounter = document.getElementById("calorie-counter");
+const budgetNumberInput = document.getElementById("budget");
+const entryDropdown = document.getElementById("entry-dropdown");
+const addEntryButton = document.getElementById("add-entry");
+const clearButton = document.getElementById("clear");
+const output = document.getElementById("output");
+let isError = false;
+
+const cleanInputString = (str) => {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, "");
+};
+
+const isInvalidInput = (str) => {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+};
+
+const addEntry = () => {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 64
+
+
+Browsers have a built in alert() function, which you can use to display a pop-up message to the user. The message to display is passed as the argument to the alert() function.
+Using a template literal, in your if block, call the alert() function to tell the user "Invalid Input: ", followed by the first value in the invalidInputMatch array.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__64__step__/index.html b/Calorie_Counter/steps/__64__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__64__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__64__step__/script.js b/Calorie_Counter/steps/__64__step__/script.js
new file mode 100644
index 0000000..b7c90ab
--- /dev/null
+++ b/Calorie_Counter/steps/__64__step__/script.js
@@ -0,0 +1,48 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 65
+
+
+In programming, null is meant to represent the absence of a value. In this case, if the user enters an invalid input, you want to alert them and then return null to indicate that the function has failed.
+Still within your if block, set isError to true and return null.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__65__step__/index.html b/Calorie_Counter/steps/__65__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__65__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__65__step__/script.js b/Calorie_Counter/steps/__65__step__/script.js
new file mode 100644
index 0000000..7d703b4
--- /dev/null
+++ b/Calorie_Counter/steps/__65__step__/script.js
@@ -0,0 +1,50 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 66
+
+
+Remember that return ends the execution of a function. After your if block, you need to handle the logic for when the input is valid. Because your if statement returns a value, you do not need an else statement.
+Use the addition assignment operator to add currVal to your calories total. You'll need to use the Number constructor to convert currVal to a number.
+The Number constructor is a function that converts a value to a number. If the value cannot be converted, it returns NaN which stands for "Not a Number".
+Here is an example:
+Example Code Number ( '10' ) ;
+Number ( 'abc' ) ;
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__66__step__/index.html b/Calorie_Counter/steps/__66__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__66__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__66__step__/script.js b/Calorie_Counter/steps/__66__step__/script.js
new file mode 100644
index 0000000..c9cfc5e
--- /dev/null
+++ b/Calorie_Counter/steps/__66__step__/script.js
@@ -0,0 +1,51 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 67
+
+
+After your for loop has completed, return the calories value.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__67__step__/index.html b/Calorie_Counter/steps/__67__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__67__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__67__step__/script.js b/Calorie_Counter/steps/__67__step__/script.js
new file mode 100644
index 0000000..1fd3373
--- /dev/null
+++ b/Calorie_Counter/steps/__67__step__/script.js
@@ -0,0 +1,52 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 68
+
+
+Now it's time to start putting it all together. Declare an empty calculateCalories function, which takes a parameter named e. This function will be another event listener, so the first argument passed will be the browser event – e is a common name for this parameter.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__68__step__/index.html b/Calorie_Counter/steps/__68__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__68__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__68__step__/script.js b/Calorie_Counter/steps/__68__step__/script.js
new file mode 100644
index 0000000..be584f0
--- /dev/null
+++ b/Calorie_Counter/steps/__68__step__/script.js
@@ -0,0 +1,55 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 69
+
+
+You will be attaching this function to the submit event of the form. The submit event is triggered when the form is submitted. The default action of the submit event is to reload the page. You need to prevent this default action using the preventDefault() method of your e parameter.
+Add a line to your calculateCalories function that calls the preventDefault() method on the e parameter. Then, reset your global error flag isError to false.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__69__step__/index.html b/Calorie_Counter/steps/__69__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__69__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__69__step__/script.js b/Calorie_Counter/steps/__69__step__/script.js
new file mode 100644
index 0000000..e595be4
--- /dev/null
+++ b/Calorie_Counter/steps/__69__step__/script.js
@@ -0,0 +1,57 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 70
+
+
+Your function needs to get the values from the entries the user has added.
+Declare a breakfastNumberInputs variable, and give it the value of calling document.querySelectorAll() with the selector #breakfast input[type='number']. This will return any number inputs that are in the #breakfast element.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__70__step__/index.html b/Calorie_Counter/steps/__70__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__70__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__70__step__/script.js b/Calorie_Counter/steps/__70__step__/script.js
new file mode 100644
index 0000000..a563cda
--- /dev/null
+++ b/Calorie_Counter/steps/__70__step__/script.js
@@ -0,0 +1,58 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 71
+
+
+Using that same syntax, query your number inputs in the #lunch element and assign them to lunchNumberInputs.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__71__step__/index.html b/Calorie_Counter/steps/__71__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__71__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__71__step__/script.js b/Calorie_Counter/steps/__71__step__/script.js
new file mode 100644
index 0000000..de13425
--- /dev/null
+++ b/Calorie_Counter/steps/__71__step__/script.js
@@ -0,0 +1,59 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 72
+
+
+Following the same pattern, query for your number inputs in the #dinner, #snacks, and #exercise elements. Assign them to variables following the naming scheme of the previous two.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5 DOM
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__72__step__/index.html b/Calorie_Counter/steps/__72__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__72__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__72__step__/script.js b/Calorie_Counter/steps/__72__step__/script.js
new file mode 100644
index 0000000..9b66a91
--- /dev/null
+++ b/Calorie_Counter/steps/__72__step__/script.js
@@ -0,0 +1,62 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 73
+
+
+Now that you have your lists of elements, you can pass them to your getCaloriesFromInputs function to extract the calorie total.
+Declare a breakfastCalories variable, and assign it the result of calling getCaloriesFromInputs with breakfastNumberInputs as the argument.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5 DOM
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__73__step__/index.html b/Calorie_Counter/steps/__73__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__73__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__73__step__/script.js b/Calorie_Counter/steps/__73__step__/script.js
new file mode 100644
index 0000000..a798f6c
--- /dev/null
+++ b/Calorie_Counter/steps/__73__step__/script.js
@@ -0,0 +1,64 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 74
+
+
+Now declare a lunchCalories variable, and give it the value of calling getCaloriesFromInputs with your lunchNumberInputs.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5 DOM
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__74__step__/index.html b/Calorie_Counter/steps/__74__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__74__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__74__step__/script.js b/Calorie_Counter/steps/__74__step__/script.js
new file mode 100644
index 0000000..48abace
--- /dev/null
+++ b/Calorie_Counter/steps/__74__step__/script.js
@@ -0,0 +1,65 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 75
+
+
+Following this same pattern, declare variables for the number inputs in the #dinner, #snacks, and #exercise elements. Assign them the appropriate getCaloriesFromInputs calls.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5 DOM
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__75__step__/index.html b/Calorie_Counter/steps/__75__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__75__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__75__step__/script.js b/Calorie_Counter/steps/__75__step__/script.js
new file mode 100644
index 0000000..f136feb
--- /dev/null
+++ b/Calorie_Counter/steps/__75__step__/script.js
@@ -0,0 +1,68 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 76
+
+
+You also need to get the value of your #budget input. You already queried this at the top of your code, and set it to the budgetNumberInput variable. However, you used getElementById, which returns an Element, not a NodeList.
+A NodeList is an array-like object, which means you can iterate through it and it shares some common methods with an array. For your getCaloriesFromInputs function, an array will work for the argument just as well as a NodeList does.
+Declare a budgetCalories variable and set it to the result of calling getCaloriesFromInputs – pass an array containing your budgetNumberInput as the argument.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5 DOM
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__76__step__/index.html b/Calorie_Counter/steps/__76__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__76__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__76__step__/script.js b/Calorie_Counter/steps/__76__step__/script.js
new file mode 100644
index 0000000..1f62f86
--- /dev/null
+++ b/Calorie_Counter/steps/__76__step__/script.js
@@ -0,0 +1,71 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 77
+
+
+Your getCaloriesFromInputs function will set the global error flag isError to true if an invalid input is detected. Add an if statement to your calculateCalories function that checks the truthiness of your global error flag, and if it is truthy then use return to end the function execution.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5 DOM
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__77__step__/index.html b/Calorie_Counter/steps/__77__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__77__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__77__step__/script.js b/Calorie_Counter/steps/__77__step__/script.js
new file mode 100644
index 0000000..3792223
--- /dev/null
+++ b/Calorie_Counter/steps/__77__step__/script.js
@@ -0,0 +1,72 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 78
+
+
+It is time to start preparing your calculations. Start by declaring a consumedCalories variable, and assign it the sum of breakfastCalories, lunchCalories, dinnerCalories, and snacksCalories (note that order matters for the tests). Be sure to do this after your if statement.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5 DOM
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__78__step__/index.html b/Calorie_Counter/steps/__78__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__78__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__78__step__/script.js b/Calorie_Counter/steps/__78__step__/script.js
new file mode 100644
index 0000000..4ab4053
--- /dev/null
+++ b/Calorie_Counter/steps/__78__step__/script.js
@@ -0,0 +1,73 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 79
+
+
+Now declare a remainingCalories variable, and give it the value of subtracting consumedCalories from budgetCalories and adding exerciseCalories.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5 DOM
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__79__step__/index.html b/Calorie_Counter/steps/__79__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__79__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__79__step__/script.js b/Calorie_Counter/steps/__79__step__/script.js
new file mode 100644
index 0000000..d255cdc
--- /dev/null
+++ b/Calorie_Counter/steps/__79__step__/script.js
@@ -0,0 +1,74 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 80
+
+
+You need to know if the user is in a caloric surplus or deficit. A caloric surplus is when you consume more calories than you burn, and a caloric deficit is when you burn more calories than you consume. Burning as many calories as you consume is called maintenance, and can be thought of as a surplus or deficit of 0, depending on your goals.
+Declare a surplusOrDeficit variable. Then use a ternary operator to set surplusOrDeficit to the string "Surplus" or "Deficit" depending on whether remainingCalories is less than 0. If it is less than 0, then surplusOrDeficit should be "Surplus". Otherwise, it should be "Deficit".
+
+
+
+preview
+
+
+ JavaScript CSS HTML5 DOM
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__80__step__/index.html b/Calorie_Counter/steps/__80__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__80__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__80__step__/script.js b/Calorie_Counter/steps/__80__step__/script.js
new file mode 100644
index 0000000..1b11d61
--- /dev/null
+++ b/Calorie_Counter/steps/__80__step__/script.js
@@ -0,0 +1,80 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 81
+
+
+You need to construct the HTML string that will be displayed in the output element. Start by assigning an empty template literal to the innerHTML property of the output element on a new line at the end of the function.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5 DOM
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__81__step__/index.html b/Calorie_Counter/steps/__81__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__81__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__81__step__/script.js b/Calorie_Counter/steps/__81__step__/script.js
new file mode 100644
index 0000000..d853397
--- /dev/null
+++ b/Calorie_Counter/steps/__81__step__/script.js
@@ -0,0 +1,79 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 82
+
+
+When you need to lower case a string, you can use the toLowerCase() method. This method returns the calling string value converted to lower case.
+Example Code const firstName = 'JESSICA' ;
+console. log ( firstName. toLowerCase ( ) ) ;
+Your output.innerHTML string will need a span element. Create that, and give it a class attribute set to the surplusOrDeficit variable. Your surplusOrDeficit variable should be converted to lower case using the toLowerCase() method.
+Do not give your span any text yet.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5 DOM
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__82__step__/index.html b/Calorie_Counter/steps/__82__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__82__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__82__step__/script.js b/Calorie_Counter/steps/__82__step__/script.js
new file mode 100644
index 0000000..8545d80
--- /dev/null
+++ b/Calorie_Counter/steps/__82__step__/script.js
@@ -0,0 +1,79 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 83
+
+
+Give your span the text remainingCalories Calorie surplusOrDeficit, using interpolation to replace remainingCalories and surplusOrDeficit with the appropriate variables.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5 DOM
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${remainingCalories} Calorie ${surplusOrDeficit}
+ `;
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (const item of list) {
+ const currVal = cleanInputString(item.value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__83__step__/index.html b/Calorie_Counter/steps/__83__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__83__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__83__step__/script.js b/Calorie_Counter/steps/__83__step__/script.js
new file mode 100644
index 0000000..8f2da2f
--- /dev/null
+++ b/Calorie_Counter/steps/__83__step__/script.js
@@ -0,0 +1,81 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${remainingCalories} Calorie ${surplusOrDeficit}
+ `;
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (const item of list) {
+ const currVal = cleanInputString(item.value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
diff --git a/Calorie_Counter/steps/__83__step__/styles.css b/Calorie_Counter/steps/__83__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__83__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__83__step__/title.txt b/Calorie_Counter/steps/__83__step__/title.txt
new file mode 100644
index 0000000..b8309ac
--- /dev/null
+++ b/Calorie_Counter/steps/__83__step__/title.txt
@@ -0,0 +1,6 @@
+Step 83
+
+Give your span the text
+remainingCalories Calorie surplusOrDeficit, using interpolation to replace
+remainingCalories and surplusOrDeficit with the appropriate variables.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__84__step__/README.md b/Calorie_Counter/steps/__84__step__/README.md
new file mode 100644
index 0000000..fcdaef4
--- /dev/null
+++ b/Calorie_Counter/steps/__84__step__/README.md
@@ -0,0 +1,341 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 84
+
+
+When the user has a calorie surplus, the remainingCalories value will be negative. You don't want to display a negative number in the result string.
+Math.abs() is a built-in JavaScript method that will return the absolute value of a number.
+Example Code const num = - 5 ;
+Math. abs ( num) ;
+In your span text, wrap your remainingCalories reference in Math.abs() to ensure that the value is positive.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5 DOM
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ `;
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (const item of list) {
+ const currVal = cleanInputString(item.value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__84__step__/index.html b/Calorie_Counter/steps/__84__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__84__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__84__step__/script.js b/Calorie_Counter/steps/__84__step__/script.js
new file mode 100644
index 0000000..394a1e1
--- /dev/null
+++ b/Calorie_Counter/steps/__84__step__/script.js
@@ -0,0 +1,81 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ `;
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (const item of list) {
+ const currVal = cleanInputString(item.value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__84__step__/styles.css b/Calorie_Counter/steps/__84__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__84__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__84__step__/title.txt b/Calorie_Counter/steps/__84__step__/title.txt
new file mode 100644
index 0000000..5432d06
--- /dev/null
+++ b/Calorie_Counter/steps/__84__step__/title.txt
@@ -0,0 +1,17 @@
+Step 84
+
+When the user has a
+calorie surplus, the remainingCalories value will be
+negative. You don't want to display a
+negative number in the result string.
+Math.abs() is
+a built-in JavaScript method that will return
+the absolute value of a number.
+Example Codeconst
+num = -5;
+Math.abs(num); // 5
+
+In your span
+text, wrap your remainingCalories reference in Math.abs()
+to ensure that the value is positive.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__85__step__/README.md b/Calorie_Counter/steps/__85__step__/README.md
new file mode 100644
index 0000000..87451d9
--- /dev/null
+++ b/Calorie_Counter/steps/__85__step__/README.md
@@ -0,0 +1,337 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 85
+
+
+After your span element, add an hr element to create a horizontal line.
+To keep your code clean and readable, you should add this on a new line in the template literal.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5 DOM
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__85__step__/index.html b/Calorie_Counter/steps/__85__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__85__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__85__step__/script.js b/Calorie_Counter/steps/__85__step__/script.js
new file mode 100644
index 0000000..d39b141
--- /dev/null
+++ b/Calorie_Counter/steps/__85__step__/script.js
@@ -0,0 +1,81 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 86
+
+
+Now create a p element with the text budgetCalories Calories Budgeted, using interpolation to replace budgetCalories with the appropriate variable.
+This should come after your hr element.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5 DOM
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
`;
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (const item of list) {
+ const currVal = cleanInputString(item.value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__86__step__/index.html b/Calorie_Counter/steps/__86__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__86__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__86__step__/script.js b/Calorie_Counter/steps/__86__step__/script.js
new file mode 100644
index 0000000..7c8ccab
--- /dev/null
+++ b/Calorie_Counter/steps/__86__step__/script.js
@@ -0,0 +1,82 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
`;
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (const item of list) {
+ const currVal = cleanInputString(item.value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__86__step__/styles.css b/Calorie_Counter/steps/__86__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__86__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__86__step__/title.txt b/Calorie_Counter/steps/__86__step__/title.txt
new file mode 100644
index 0000000..40f955e
--- /dev/null
+++ b/Calorie_Counter/steps/__86__step__/title.txt
@@ -0,0 +1,8 @@
+Step 86
+
+Now create a p element
+with the text budgetCalories Calories Budgeted, using
+interpolation to replace budgetCalories with the appropriate
+variable.
+This should come after your hr element.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__87__step__/README.md b/Calorie_Counter/steps/__87__step__/README.md
new file mode 100644
index 0000000..f9df32e
--- /dev/null
+++ b/Calorie_Counter/steps/__87__step__/README.md
@@ -0,0 +1,342 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 87
+
+
+Using the same interpolation syntax, add a second p element with the text consumedCalories Calories Consumed and a third with the text exerciseCalories Calories Burned. Remember to replace your consumedCalories and exerciseCalories variables with the appropriate values.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5 DOM
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (const item of list) {
+ const currVal = cleanInputString(item.value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__87__step__/index.html b/Calorie_Counter/steps/__87__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__87__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__87__step__/script.js b/Calorie_Counter/steps/__87__step__/script.js
new file mode 100644
index 0000000..8c2acf1
--- /dev/null
+++ b/Calorie_Counter/steps/__87__step__/script.js
@@ -0,0 +1,86 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (const item of list) {
+ const currVal = cleanInputString(item.value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
diff --git a/Calorie_Counter/steps/__87__step__/styles.css b/Calorie_Counter/steps/__87__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__87__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__87__step__/title.txt b/Calorie_Counter/steps/__87__step__/title.txt
new file mode 100644
index 0000000..38691c0
--- /dev/null
+++ b/Calorie_Counter/steps/__87__step__/title.txt
@@ -0,0 +1,9 @@
+Step 87
+
+Using the same interpolation syntax,
+add a second p element with the
+text consumedCalories Calories Consumed and a third
+with the text exerciseCalories Calories Burned. Remember
+to replace your consumedCalories and exerciseCalories variables
+with the appropriate values.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__88__step__/README.md b/Calorie_Counter/steps/__88__step__/README.md
new file mode 100644
index 0000000..97d6ecf
--- /dev/null
+++ b/Calorie_Counter/steps/__88__step__/README.md
@@ -0,0 +1,347 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 88
+
+
+Finally, you need to make the #output element visible so the user can see your text. Your output variable is an Element, which has a classList property. This property has a .remove() method, which accepts a string representing the class to remove from the element.
+Example Code const paragraphElement = document. getElementById ( 'paragraph' ) ;
+paragraphElement. classList. remove ( 'hide' ) ;
+Use the .remove() method of the output variable's classList property to remove the hide class. Don't forget to place the word hide inside quotes.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5 DOM
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+ output.classList.remove("hide");3
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (const item of list) {
+ const currVal = cleanInputString(item.value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__88__step__/index.html b/Calorie_Counter/steps/__88__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__88__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__88__step__/script.js b/Calorie_Counter/steps/__88__step__/script.js
new file mode 100644
index 0000000..8e7af13
--- /dev/null
+++ b/Calorie_Counter/steps/__88__step__/script.js
@@ -0,0 +1,87 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+ output.classList.remove("hide");3
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (const item of list) {
+ const currVal = cleanInputString(item.value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
diff --git a/Calorie_Counter/steps/__88__step__/styles.css b/Calorie_Counter/steps/__88__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__88__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__88__step__/title.txt b/Calorie_Counter/steps/__88__step__/title.txt
new file mode 100644
index 0000000..1237cf7
--- /dev/null
+++ b/Calorie_Counter/steps/__88__step__/title.txt
@@ -0,0 +1,18 @@
+Step 88
+
+Finally, you need to make
+the #output element visible so the user
+can see your text. Your output variable
+is an Element, which has a classList
+property. This property has a .remove() method,
+which accepts a string representing the class
+to remove from the element.
+Example Codeconst paragraphElement
+= document.getElementById('paragraph');
+paragraphElement.classList.remove('hide');
+
+Use the .remove() method of the
+output variable's classList property to remove the
+hide class. Don't forget to place the
+word hide inside quotes.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__89__step__/README.md b/Calorie_Counter/steps/__89__step__/README.md
new file mode 100644
index 0000000..2bc7761
--- /dev/null
+++ b/Calorie_Counter/steps/__89__step__/README.md
@@ -0,0 +1,346 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 89
+
+
+If you click on your Calculate Remaining Calories button, you'll see that nothing happens. You still need to mount the event listener.
+Add an event listener to your calorieCounter element. The event type should be submit, and the callback function should be calculateCalories.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5 DOM
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+ output.classList.remove("hide");3
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (const item of list) {
+ const currVal = cleanInputString(item.value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__89__step__/index.html b/Calorie_Counter/steps/__89__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__89__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__89__step__/script.js b/Calorie_Counter/steps/__89__step__/script.js
new file mode 100644
index 0000000..7d69966
--- /dev/null
+++ b/Calorie_Counter/steps/__89__step__/script.js
@@ -0,0 +1,89 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+ output.classList.remove("hide");3
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (const item of list) {
+ const currVal = cleanInputString(item.value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+
diff --git a/Calorie_Counter/steps/__89__step__/styles.css b/Calorie_Counter/steps/__89__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__89__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__89__step__/title.txt b/Calorie_Counter/steps/__89__step__/title.txt
new file mode 100644
index 0000000..f2a3471
--- /dev/null
+++ b/Calorie_Counter/steps/__89__step__/title.txt
@@ -0,0 +1,11 @@
+Step 89
+
+If you click on your
+Calculate Remaining Calories button, you'll see that
+nothing happens. You still need to mount
+the event listener.
+Add an event listener to
+your calorieCounter element. The event type should
+be submit, and the callback function should
+be calculateCalories.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__90__step__/README.md b/Calorie_Counter/steps/__90__step__/README.md
new file mode 100644
index 0000000..eda2791
--- /dev/null
+++ b/Calorie_Counter/steps/__90__step__/README.md
@@ -0,0 +1,347 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 90
+
+
+Your final feature to add is the ability for a user to clear the form. Start by declaring an empty function called clearForm – it should not take any arguments.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5 DOM
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+ output.classList.remove("hide");3
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (const item of list) {
+ const currVal = cleanInputString(item.value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {};
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__90__step__/index.html b/Calorie_Counter/steps/__90__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__90__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__90__step__/script.js b/Calorie_Counter/steps/__90__step__/script.js
new file mode 100644
index 0000000..63d35a6
--- /dev/null
+++ b/Calorie_Counter/steps/__90__step__/script.js
@@ -0,0 +1,91 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+ output.classList.remove("hide");3
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (const item of list) {
+ const currVal = cleanInputString(item.value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {};
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+
diff --git a/Calorie_Counter/steps/__90__step__/styles.css b/Calorie_Counter/steps/__90__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__90__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__90__step__/title.txt b/Calorie_Counter/steps/__90__step__/title.txt
new file mode 100644
index 0000000..e379666
--- /dev/null
+++ b/Calorie_Counter/steps/__90__step__/title.txt
@@ -0,0 +1,8 @@
+Step 90
+
+Your final feature to add
+is the ability for a user to
+clear the form. Start by declaring an
+empty function called clearForm – it should
+not take any arguments.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__91__step__/README.md b/Calorie_Counter/steps/__91__step__/README.md
new file mode 100644
index 0000000..6e86f34
--- /dev/null
+++ b/Calorie_Counter/steps/__91__step__/README.md
@@ -0,0 +1,349 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 91
+
+
+You need to get all of the input containers. Declare an inputContainers variable, and assign it to the value of querying the document for all elements with the class input-container.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5 DOM
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+ output.classList.remove("hide");3
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (const item of list) {
+ const currVal = cleanInputString(item.value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = document.querySelectorAll(".input-container");
+};
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__91__step__/index.html b/Calorie_Counter/steps/__91__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__91__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__91__step__/script.js b/Calorie_Counter/steps/__91__step__/script.js
new file mode 100644
index 0000000..bdd4686
--- /dev/null
+++ b/Calorie_Counter/steps/__91__step__/script.js
@@ -0,0 +1,93 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+ output.classList.remove("hide");3
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (const item of list) {
+ const currVal = cleanInputString(item.value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = document.querySelectorAll(".input-container");
+};
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+
diff --git a/Calorie_Counter/steps/__91__step__/styles.css b/Calorie_Counter/steps/__91__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__91__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__91__step__/title.txt b/Calorie_Counter/steps/__91__step__/title.txt
new file mode 100644
index 0000000..9238822
--- /dev/null
+++ b/Calorie_Counter/steps/__91__step__/title.txt
@@ -0,0 +1,8 @@
+Step 91
+
+You need to get all
+of the input containers. Declare an inputContainers
+variable, and assign it to the value
+of querying the document for all elements
+with the class input-container.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__92__step__/README.md b/Calorie_Counter/steps/__92__step__/README.md
new file mode 100644
index 0000000..c7bce1a
--- /dev/null
+++ b/Calorie_Counter/steps/__92__step__/README.md
@@ -0,0 +1,361 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 92
+
+
+Remember that document.querySelectorAll returns a NodeList, which is array-like but is not an array. However, the Array object has a .from() method that accepts an array-like and returns an array. This is helpful when you want access to more robust array methods, which you will learn about in a future project.
+The following example takes a NodeList of li elements and converts it to an array of li elements:
+Example Code < ul> < li> </ li> < li> </ li> < li> </ li> </ ul> Example Code const listItemsArray = Array. from ( document. querySelectorAll ( 'li' ) ) ;
+
+console. log ( listItemsArray) ;
+Wrap your inputContainers query selector in Array.from(). Do this on the same line as your declaration.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5 DOM
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+ output.classList.remove("hide");3
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (const item of list) {
+ const currVal = cleanInputString(item.value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll(".input-container"));
+};
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__92__step__/index.html b/Calorie_Counter/steps/__92__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__92__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__92__step__/script.js b/Calorie_Counter/steps/__92__step__/script.js
new file mode 100644
index 0000000..f357189
--- /dev/null
+++ b/Calorie_Counter/steps/__92__step__/script.js
@@ -0,0 +1,93 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+ output.classList.remove("hide");3
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (const item of list) {
+ const currVal = cleanInputString(item.value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll(".input-container"));
+};
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+
diff --git a/Calorie_Counter/steps/__92__step__/styles.css b/Calorie_Counter/steps/__92__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__92__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__92__step__/title.txt b/Calorie_Counter/steps/__92__step__/title.txt
new file mode 100644
index 0000000..2bbdfce
--- /dev/null
+++ b/Calorie_Counter/steps/__92__step__/title.txt
@@ -0,0 +1,30 @@
+Step 92
+
+Remember that document.querySelectorAll returns a
+NodeList, which is array-like but is not
+an array. However, the Array object has
+a .from() method that accepts an array-like
+and returns an array. This is helpful
+when you want access to more robust
+array methods, which you will learn about
+in a future project.
+The following example takes
+a NodeList of li elements and converts
+it to an array of li elements:
+Example
+Code<ul>
+ <li>List 1</li>
+ <li>List 2</li>
+
+ <li>List 3</li>
+</ul>
+
+Example Codeconst listItemsArray = Array.from(document.querySelectorAll('li'));
+
+console.log(listItemsArray);
+//Output: (3) [li, li, li]
+
+Wrap your inputContainers
+query selector in Array.from(). Do this on
+the same line as your declaration.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__93__step__/README.md b/Calorie_Counter/steps/__93__step__/README.md
new file mode 100644
index 0000000..c9da86f
--- /dev/null
+++ b/Calorie_Counter/steps/__93__step__/README.md
@@ -0,0 +1,353 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 93
+
+
+It is time for another loop. Create a for...of loop with a variable called container to iterate through the inputContainers array.
+Inside the loop, set the innerHTML property of the container to an empty string. This will clear all of the contents of that input container.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5 DOM
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+ output.classList.remove("hide");3
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (const item of list) {
+ const currVal = cleanInputString(item.value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll(".input-container"));
+ for(const container of inputContainers) {
+ container.innerHTML = '';
+ };
+};
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__93__step__/index.html b/Calorie_Counter/steps/__93__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__93__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__93__step__/script.js b/Calorie_Counter/steps/__93__step__/script.js
new file mode 100644
index 0000000..36bb931
--- /dev/null
+++ b/Calorie_Counter/steps/__93__step__/script.js
@@ -0,0 +1,96 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+ output.classList.remove("hide");3
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (const item of list) {
+ const currVal = cleanInputString(item.value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll(".input-container"));
+ for(const container of inputContainers) {
+ container.innerHTML = '';
+ };
+};
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+
diff --git a/Calorie_Counter/steps/__93__step__/styles.css b/Calorie_Counter/steps/__93__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__93__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__93__step__/title.txt b/Calorie_Counter/steps/__93__step__/title.txt
new file mode 100644
index 0000000..f3e2d0f
--- /dev/null
+++ b/Calorie_Counter/steps/__93__step__/title.txt
@@ -0,0 +1,11 @@
+Step 93
+
+It is time for another
+loop. Create a for...of loop with a
+variable called container to iterate through the
+inputContainers array.
+Inside the loop, set the innerHTML
+property of the container to an empty
+string. This will clear all of the
+contents of that input container.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__94__step__/README.md b/Calorie_Counter/steps/__94__step__/README.md
new file mode 100644
index 0000000..26f6d87
--- /dev/null
+++ b/Calorie_Counter/steps/__94__step__/README.md
@@ -0,0 +1,353 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 94
+
+
+After your loop completes, you need to clear the budgetNumberInput. Set the value property of budgetNumberInput to an empty string.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5 DOM
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+ output.classList.remove("hide");3
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (const item of list) {
+ const currVal = cleanInputString(item.value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll(".input-container"));
+ for(const container of inputContainers) {
+ container.innerHTML = '';
+ };
+ budgetNumberInput.value = '';
+};
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__94__step__/index.html b/Calorie_Counter/steps/__94__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__94__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__94__step__/script.js b/Calorie_Counter/steps/__94__step__/script.js
new file mode 100644
index 0000000..e9893e3
--- /dev/null
+++ b/Calorie_Counter/steps/__94__step__/script.js
@@ -0,0 +1,97 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+ output.classList.remove("hide");3
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (const item of list) {
+ const currVal = cleanInputString(item.value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll(".input-container"));
+ for(const container of inputContainers) {
+ container.innerHTML = '';
+ };
+ budgetNumberInput.value = '';
+};
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+
diff --git a/Calorie_Counter/steps/__94__step__/styles.css b/Calorie_Counter/steps/__94__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__94__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__94__step__/title.txt b/Calorie_Counter/steps/__94__step__/title.txt
new file mode 100644
index 0000000..a3ff854
--- /dev/null
+++ b/Calorie_Counter/steps/__94__step__/title.txt
@@ -0,0 +1,7 @@
+Step 94
+
+After your loop completes, you
+need to clear the budgetNumberInput. Set the
+value property of budgetNumberInput to an empty
+string.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__95__step__/README.md b/Calorie_Counter/steps/__95__step__/README.md
new file mode 100644
index 0000000..4e7ecb6
--- /dev/null
+++ b/Calorie_Counter/steps/__95__step__/README.md
@@ -0,0 +1,355 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 95
+
+
+You also need to clear the output element's text. You can do this by setting the innerText property to an empty string.
+The difference between innerText and innerHTML is that innerText will not render HTML elements, but will display the tags and content as raw text.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5 DOM
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+ output.classList.remove("hide");3
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (const item of list) {
+ const currVal = cleanInputString(item.value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll(".input-container"));
+ for(const container of inputContainers) {
+ container.innerHTML = '';
+ };
+ budgetNumberInput.value = '';
+ output.innerText = '';
+};
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__95__step__/index.html b/Calorie_Counter/steps/__95__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__95__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__95__step__/script.js b/Calorie_Counter/steps/__95__step__/script.js
new file mode 100644
index 0000000..1329619
--- /dev/null
+++ b/Calorie_Counter/steps/__95__step__/script.js
@@ -0,0 +1,98 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+ output.classList.remove("hide");3
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (const item of list) {
+ const currVal = cleanInputString(item.value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll(".input-container"));
+ for(const container of inputContainers) {
+ container.innerHTML = '';
+ };
+ budgetNumberInput.value = '';
+ output.innerText = '';
+};
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+
diff --git a/Calorie_Counter/steps/__95__step__/styles.css b/Calorie_Counter/steps/__95__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__95__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__95__step__/title.txt b/Calorie_Counter/steps/__95__step__/title.txt
new file mode 100644
index 0000000..7e00646
--- /dev/null
+++ b/Calorie_Counter/steps/__95__step__/title.txt
@@ -0,0 +1,11 @@
+Step 95
+
+You also need to clear
+the output element's text. You can do
+this by setting the innerText property to
+an empty string.
+The difference between innerText and
+innerHTML is that innerText will not render
+HTML elements, but will display the tags
+and content as raw text.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__96__step__/README.md b/Calorie_Counter/steps/__96__step__/README.md
new file mode 100644
index 0000000..d554e2e
--- /dev/null
+++ b/Calorie_Counter/steps/__96__step__/README.md
@@ -0,0 +1,356 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 96
+
+
+To finish off this function, you need to restore the hide class to the output element. The classList property has an .add() method which is the opposite of the .remove() method. It accepts a string representing the class to add to the element.
+Add the hide class to your output.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5 DOM
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+ output.classList.remove("hide");3
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (const item of list) {
+ const currVal = cleanInputString(item.value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll(".input-container"));
+ for(const container of inputContainers) {
+ container.innerHTML = '';
+ };
+ budgetNumberInput.value = '';
+ output.innerText = '';
+ output.classList.add('hide');
+};
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__96__step__/index.html b/Calorie_Counter/steps/__96__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__96__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__96__step__/script.js b/Calorie_Counter/steps/__96__step__/script.js
new file mode 100644
index 0000000..1489818
--- /dev/null
+++ b/Calorie_Counter/steps/__96__step__/script.js
@@ -0,0 +1,99 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+ output.classList.remove("hide");3
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (const item of list) {
+ const currVal = cleanInputString(item.value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll(".input-container"));
+ for(const container of inputContainers) {
+ container.innerHTML = '';
+ };
+ budgetNumberInput.value = '';
+ output.innerText = '';
+ output.classList.add('hide');
+};
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+
diff --git a/Calorie_Counter/steps/__96__step__/styles.css b/Calorie_Counter/steps/__96__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__96__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__96__step__/title.txt b/Calorie_Counter/steps/__96__step__/title.txt
new file mode 100644
index 0000000..72a2054
--- /dev/null
+++ b/Calorie_Counter/steps/__96__step__/title.txt
@@ -0,0 +1,12 @@
+Step 96
+
+To finish off this function,
+you need to restore the hide class
+to the output element. The classList property
+has an .add() method which is the
+opposite of the .remove() method. It accepts
+a string representing the class to add
+to the element.
+Add the hide class to
+your output.
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__97__step__/README.md b/Calorie_Counter/steps/__97__step__/README.md
new file mode 100644
index 0000000..83944ad
--- /dev/null
+++ b/Calorie_Counter/steps/__97__step__/README.md
@@ -0,0 +1,357 @@
+
+
+
+ Follow Links Steps
+
+
+
+
+
+
+
+
+ Description of the Task
+
+ Step 97
+
+
+To complete this project, add an event listener to the clearButton button. When the button is clicked, it should call the clearForm function.
+Congratulations! Your project is complete.
+
+
+
+preview
+
+
+ JavaScript CSS HTML5 DOM
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+ index.html
+
+
+
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ script.js
+
+
+
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+ output.classList.remove("hide");3
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (const item of list) {
+ const currVal = cleanInputString(item.value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll(".input-container"));
+ for(const container of inputContainers) {
+ container.innerHTML = '';
+ };
+ budgetNumberInput.value = '';
+ output.innerText = '';
+ output.classList.add('hide');
+};
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+clearButton.addEventListener("click", clearForm);
+
+
+```
+
+
+
+[back to top](#top)
+
+
+
+
+
+
+ styles.css
+
+
+
+
+```css
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
+
+```
+
+
+
+[back to top](#top)
+
+
+
\ No newline at end of file
diff --git a/Calorie_Counter/steps/__97__step__/index.html b/Calorie_Counter/steps/__97__step__/index.html
new file mode 100644
index 0000000..eccd2eb
--- /dev/null
+++ b/Calorie_Counter/steps/__97__step__/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
diff --git a/Calorie_Counter/steps/__97__step__/script.js b/Calorie_Counter/steps/__97__step__/script.js
new file mode 100644
index 0000000..98283d2
--- /dev/null
+++ b/Calorie_Counter/steps/__97__step__/script.js
@@ -0,0 +1,100 @@
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+ output.classList.remove("hide");3
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (const item of list) {
+ const currVal = cleanInputString(item.value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll(".input-container"));
+ for(const container of inputContainers) {
+ container.innerHTML = '';
+ };
+ budgetNumberInput.value = '';
+ output.innerText = '';
+ output.classList.add('hide');
+};
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+clearButton.addEventListener("click", clearForm);
+
diff --git a/Calorie_Counter/steps/__97__step__/styles.css b/Calorie_Counter/steps/__97__step__/styles.css
new file mode 100644
index 0000000..fa42007
--- /dev/null
+++ b/Calorie_Counter/steps/__97__step__/styles.css
@@ -0,0 +1,87 @@
+:root {
+ --light-grey: #f5f6f7;
+ --dark-blue: #0a0a23;
+ --fcc-blue: #1b1b32;
+ --light-yellow: #fecc4c;
+ --dark-yellow: #feac32;
+ --light-pink: #ffadad;
+ --dark-red: #850000;
+ --light-green: #acd157;
+}
+
+body {
+ font-family: "Lato", Helvetica, Arial, sans-serif;
+ font-size: 18px;
+ background-color: var(--fcc-blue);
+ color: var(--light-grey);
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ cursor: pointer;
+ text-decoration: none;
+ background-color: var(--light-yellow);
+ border: 2px solid var(--dark-yellow);
+}
+
+button,
+input,
+select {
+ min-height: 24px;
+ color: var(--dark-blue);
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid var(--light-grey);
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: var(--light-pink);
+}
+
+.deficit {
+ color: var(--light-green);
+}
diff --git a/Calorie_Counter/steps/__97__step__/title.txt b/Calorie_Counter/steps/__97__step__/title.txt
new file mode 100644
index 0000000..efbf75a
--- /dev/null
+++ b/Calorie_Counter/steps/__97__step__/title.txt
@@ -0,0 +1,9 @@
+Step 97
+
+To complete this project, add
+an event listener to the clearButton button.
+When the button is clicked, it should
+call the clearForm function.
+Congratulations! Your project is
+complete.
+
\ No newline at end of file
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..f3b9d97
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 AndriiKot
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/README.md b/README.md
index b7f3839..de76c2d 100644
--- a/README.md
+++ b/README.md
@@ -17,11 +17,15 @@ with local storage, and how to fetch data using an API.
### List of App
- #### [Pyramid Generator](https://github.com/AndriiKot/JS__Pyramid_Generator__FreeCodeCamp)
+
- #### [Gradebook App](https://github.com/AndriiKot/JS__Gradebook_App__FreeCodeCamp)
+
- #### [Role Playing Game](https://github.com/AndriiKot/JS__Role_Playing_Game__FreeCodeCamp)
- #### [Random Background Color Changer](https://github.com/AndriiKot/JS__Random_Background_Color_Changer__freeCodeCamp)
+- #### [Calorie Counter](https://github.com/AndriiKot/VanillaJS__Calorie_Counter__freeCodeCamp)
+
[back to list](#list-of-app)
[back to top](#top)
diff --git a/Random_Background_Color_Changer/README.md b/Random_Background_Color_Changer/README.md
index 685fa49..2f6825f 100644
--- a/Random_Background_Color_Changer/README.md
+++ b/Random_Background_Color_Changer/README.md
@@ -6,9 +6,179 @@ Debugging is the process of going through your code, finding any issues, and fix
In this project, you will help CamperBot build a random background color changer and help them find and fix errors.
+
+
+ Description of the Tasks
+
+
+
+ Step 1
+
+
+ CamperBot is trying to build out a random background color changer. But they keep running into issues and need your help to debug the code
+
+
+ CamperBot has already added the HTML and CSS for the project. But they are confused as to why none of the styles and content is showing up on the page.
+
+
+ When they open up the console they see this message:
+
+
+
+ Example Code
+
+ SyntaxError: unknown: Unexpected token, expected "," (5:2)
+
+
+ Syntax errors are thrown when the JavaScript engine encounters something it can't interpret. In this case, it looks like CamperBot has syntax errors in the darkColorsArr array.
+
+
+ Fix the syntax errors in the darkColorsArr array and you should see the content and styles show up on the page.
+
+
+
+
+ Step 2
+
+
+ Now, CamperBot is trying to create a function that will return a random index from the darkColorsArr. But they have run into the following error message:
+
+
+
+ Example Code
+
+ Uncaught ReferenceError: math is not defined
+
+
+ A ReferenceError is thrown when a non-existent variable is referenced. In this case, it looks like CamperBot is trying to use math but JavaScript doesn't have a math object.
+
+
+ Fix CamperBot's error in the math.random() line and open up the console again.
+
+
+
+
+ Step 3
+
+
+ Now that the ReferenceError is resolved, the console is displaying the correct results for a random number between 0 and 9. But CamperBot was not expecting to see decimal numbers like these:
+
+
+
+ Example Code
+
+ 0.0158828998797710952.1145962861976416.040964780197666
+
+ Update the console statement to print a whole number between 0 and 9.
+
+
+ Remember that you worked with a method in the Role Playing Game that rounds a number down to the nearest whole number.
+
+
+
+
+ Step 4
+
+
+ CamperBot is finished with building out the
+ getRandomIndex function and it is working as expected. But now they are running into this issue
+ when trying to create a reference to the body element in the DOM:
+
+
+ Uncaught TypeError: document.queryselector is not a function
+
+
+ A TypeError means that the code is trying to perform
+ an operation on a value that is not of the expected type.
+
+
+ Fix the TypeError by updating the document.queryselector
+ method to the correct method name that selects an element from the DOM.
+
+
+
+
+ Step 5
+
+
+ CamperBot has created a new variable called bgHexCodeSpanElement to store the reference to the span element with the id of bg-hex-code. However, when they try to log that variable to the console, they get null.
+
+
+ null is a special value in JavaScript that represents the absence of a value. This can happen when you try to access a property of an object that doesn't exist
+ In this case, CamperBot is not passing in the correct selector to the document.querySelector method
+
+
+ Fix the document.querySelector("bg-hex-code") line so that it correctly selects the element with the id of bg-hex-code.
+
+
+
+
+ Step 6
+
+
+ CamperBot has now created a function called changeBackgroundColor that changes the background color of the page to a random color from the darkColorsArr array. The function also displays the hex code for that new color.
+
+
+ When they try to test out this function, they notice that the background color is not changing and the text shows the following:
+
+
+
+ Example Code
+
+ Hex Code: undefined
+
+
+ undefined is showing up here because the color variable is not being set correctly.
+
+
+ Fix the error in the darkColorsArr[getRandomIndex] line so that the color variable is set to a random color from the darkColorsArr array.
+
+
+
+
+ Step 7
+
+
+ CamperBot is trying to create a new variable called btn to store the reference to the button element with the id of click-btn
+
+
+ However, when they try to log the button element to the console, they see that the button element is null.
+
+
+ Open up the index.html to see the correct id name for that button element.
+
+
+ Then fix the error for the document.querySelector("#click-btn"); line.
+
+
+
+
+ Step 8
+
+
+ CamperBot has finished building out their random background color changer. However, when they click the button, the background color does not change.
+
+
+ It looks like they are trying to use the onclick property but they are using it incorrectly. The onclick property should be assigned a function reference.
+
+
+ Fix the error in the btn.onclick = changeBackgroundColor; line.
+
+
+ Remember that you worked with the onclick property in the Role playing game project. Look back at the final solution to see how onclick was properly used.
+
+
+ Once you fix that final bug, the random background color changer will be complete!
+
+
+
+
#### preview
-
+
| [index.html](#indexhtml) | [styles.css](#stylescss) | [script.js](#scriptjs) |
| ------------------------ | ------------------------ | ---------------------- |
@@ -136,6 +306,24 @@ const darkColorsArr = [
"#2C3E50",
"#800020",
];
+
+function getRandomIndex() {
+ const randomIndex = Math.floor(darkColorsArr.length * Math.random());
+ return randomIndex;
+}
+
+const body = document.querySelector("body");
+const bgHexCodeSpanElement = document.querySelector("#bg-hex-code");
+
+function changeBackgroundColor() {
+ const color = darkColorsArr[getRandomIndex()];
+
+ bgHexCodeSpanElement.innerText = color;
+ body.style.backgroundColor = color;
+}
+const btn = document.querySelector("#btn");
+
+btn.onclick = changeBackgroundColor;
```
[back to top](#top)
diff --git a/Random_Background_Color_Changer/end-product/.gitkeep b/Random_Background_Color_Changer/end-product/.gitkeep
deleted file mode 100644
index 8b13789..0000000
--- a/Random_Background_Color_Changer/end-product/.gitkeep
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/Random_Background_Color_Changer/end-product/README.md b/Random_Background_Color_Changer/end-product/README.md
new file mode 100644
index 0000000..1e00b76
--- /dev/null
+++ b/Random_Background_Color_Changer/end-product/README.md
@@ -0,0 +1,182 @@
+
+
+ Description of the task
+
+ Step 8
+
+ CamperBot has finished building out their random background color changer. However, when they click the button, the background color does not change.
+
+
+ It looks like they are trying to use the onclick property but they are using it incorrectly. The onclick property should be assigned a function reference.
+
+
+ Fix the error in the btn.onclick = changeBackgroundColor; line.
+
+
+ Remember that you worked with the onclick property in the Role playing game project. Look back at the final solution to see how onclick was properly used.
+
+
+ Once you fix that final bug, the random background color changer will be complete!
+
+
+
+
+# Random Background Color changer
+
+Debugging is the process of going through your code, finding any issues, and fixing them.
+
+In this project, you will help CamperBot build a random background color changer and help them find and fix errors.
+
+#### preview
+
+
+
+| [index.html](#indexhtml) | [styles.css](#stylescss) | [script.js](#scriptjs) |
+| ------------------------ | ------------------------ | ---------------------- |
+
+### technologies
+
+
+
+
+ JavaScript
+ CSS
+ HTML
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+[back to top](#top)
+
+### index.html
+
+```html
+
+
+
+ Build a random background color changer
+ Random Background Color changer
+
+
+
+
+ Change Background Color
+
+
+
+
+```
+
+[back to top](#top)
+
+### styles.css
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+ --dark-purple: #110815;
+ --light-grey: #efefef;
+}
+
+body {
+ background-color: var(--dark-purple);
+ color: var(--light-grey);
+ text-align: center;
+}
+
+.bg-information-container {
+ margin: 15px 0 25px;
+ font-size: 1.2rem;
+}
+
+.btn {
+ cursor: pointer;
+ padding: 10px;
+ margin: 10px;
+ color: var(--dark-purple);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+```
+
+[back to top](#top)
+
+### script.js
+
+```js
+const darkColorsArr = [
+ "#2C3E50",
+ "#34495E",
+ "#2C2C2C",
+ "#616A6B",
+ "#4A235A",
+ "#2F4F4F",
+ "#0E4B5A",
+ "#36454F",
+ "#2C3E50",
+ "#800020",
+];
+
+function getRandomIndex() {
+ const randomIndex = Math.floor(darkColorsArr.length * Math.random());
+ return randomIndex;
+}
+
+const body = document.querySelector("body");
+const bgHexCodeSpanElement = document.querySelector("#bg-hex-code");
+
+function changeBackgroundColor() {
+ const color = darkColorsArr[getRandomIndex()];
+
+ bgHexCodeSpanElement.innerText = color;
+ body.style.backgroundColor = color;
+}
+const btn = document.querySelector("#btn");
+
+btn.onclick = changeBackgroundColor;
+```
+
+[back to top](#top)
diff --git a/Random_Background_Color_Changer/end-product/index.html b/Random_Background_Color_Changer/end-product/index.html
new file mode 100644
index 0000000..f50fc77
--- /dev/null
+++ b/Random_Background_Color_Changer/end-product/index.html
@@ -0,0 +1,22 @@
+
+
+
+ Build a random background color changer
+ Random Background Color changer
+
+
+
+
+ Change Background Color
+
+
+
+
+
diff --git a/Random_Background_Color_Changer/end-product/script.js b/Random_Background_Color_Changer/end-product/script.js
new file mode 100644
index 0000000..550921a
--- /dev/null
+++ b/Random_Background_Color_Changer/end-product/script.js
@@ -0,0 +1,30 @@
+const darkColorsArr = [
+ "#2C3E50",
+ "#34495E",
+ "#2C2C2C",
+ "#616A6B",
+ "#4A235A",
+ "#2F4F4F",
+ "#0E4B5A",
+ "#36454F",
+ "#2C3E50",
+ "#800020",
+];
+
+function getRandomIndex() {
+ const randomIndex = Math.floor(darkColorsArr.length * Math.random());
+ return randomIndex;
+}
+
+const body = document.querySelector("body");
+const bgHexCodeSpanElement = document.querySelector("#bg-hex-code");
+
+function changeBackgroundColor() {
+ const color = darkColorsArr[getRandomIndex()];
+
+ bgHexCodeSpanElement.innerText = color;
+ body.style.backgroundColor = color;
+}
+const btn = document.querySelector("#btn");
+
+btn.onclick = changeBackgroundColor;
diff --git a/Random_Background_Color_Changer/end-product/styles.css b/Random_Background_Color_Changer/end-product/styles.css
new file mode 100644
index 0000000..7b04a40
--- /dev/null
+++ b/Random_Background_Color_Changer/end-product/styles.css
@@ -0,0 +1,41 @@
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+ --dark-purple: #110815;
+ --light-grey: #efefef;
+}
+
+body {
+ background-color: var(--dark-purple);
+ color: var(--light-grey);
+ text-align: center;
+}
+
+.bg-information-container {
+ margin: 15px 0 25px;
+ font-size: 1.2rem;
+}
+
+.btn {
+ cursor: pointer;
+ padding: 10px;
+ margin: 10px;
+ color: var(--dark-purple);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+
diff --git a/Random_Background_Color_Changer/preview/end-project.png b/Random_Background_Color_Changer/preview/end-project.png
new file mode 100644
index 0000000..df6ef44
Binary files /dev/null and b/Random_Background_Color_Changer/preview/end-project.png differ
diff --git a/Random_Background_Color_Changer/preview/end-project_v2.png b/Random_Background_Color_Changer/preview/end-project_v2.png
new file mode 100644
index 0000000..23a3a2b
Binary files /dev/null and b/Random_Background_Color_Changer/preview/end-project_v2.png differ
diff --git a/Random_Background_Color_Changer/preview/step2.png b/Random_Background_Color_Changer/preview/step2.png
new file mode 100644
index 0000000..50c7d86
Binary files /dev/null and b/Random_Background_Color_Changer/preview/step2.png differ
diff --git a/Random_Background_Color_Changer/preview/step3.png b/Random_Background_Color_Changer/preview/step3.png
new file mode 100644
index 0000000..c2ada8e
Binary files /dev/null and b/Random_Background_Color_Changer/preview/step3.png differ
diff --git a/Random_Background_Color_Changer/preview/step4.png b/Random_Background_Color_Changer/preview/step4.png
new file mode 100644
index 0000000..f06f76f
Binary files /dev/null and b/Random_Background_Color_Changer/preview/step4.png differ
diff --git a/Random_Background_Color_Changer/preview/step5.png b/Random_Background_Color_Changer/preview/step5.png
new file mode 100644
index 0000000..1526a05
Binary files /dev/null and b/Random_Background_Color_Changer/preview/step5.png differ
diff --git a/Random_Background_Color_Changer/preview/step6.png b/Random_Background_Color_Changer/preview/step6.png
new file mode 100644
index 0000000..c5e5f48
Binary files /dev/null and b/Random_Background_Color_Changer/preview/step6.png differ
diff --git a/Random_Background_Color_Changer/preview/step7.png b/Random_Background_Color_Changer/preview/step7.png
new file mode 100644
index 0000000..3212022
Binary files /dev/null and b/Random_Background_Color_Changer/preview/step7.png differ
diff --git a/Random_Background_Color_Changer/preview/step8.png b/Random_Background_Color_Changer/preview/step8.png
new file mode 100644
index 0000000..c44cd93
Binary files /dev/null and b/Random_Background_Color_Changer/preview/step8.png differ
diff --git a/Random_Background_Color_Changer/steps/README.md b/Random_Background_Color_Changer/steps/README.md
index 685fa49..283cace 100644
--- a/Random_Background_Color_Changer/steps/README.md
+++ b/Random_Background_Color_Changer/steps/README.md
@@ -6,9 +6,179 @@ Debugging is the process of going through your code, finding any issues, and fix
In this project, you will help CamperBot build a random background color changer and help them find and fix errors.
+
+
+ Description of the Tasks
+
+
+
+ Step 1
+
+
+ CamperBot is trying to build out a random background color changer. But they keep running into issues and need your help to debug the code
+
+
+ CamperBot has already added the HTML and CSS for the project. But they are confused as to why none of the styles and content is showing up on the page.
+
+
+ When they open up the console they see this message:
+
+
+
+ Example Code
+
+ SyntaxError: unknown: Unexpected token, expected "," (5:2)
+
+
+ Syntax errors are thrown when the JavaScript engine encounters something it can't interpret. In this case, it looks like CamperBot has syntax errors in the darkColorsArr array.
+
+
+ Fix the syntax errors in the darkColorsArr array and you should see the content and styles show up on the page.
+
+
+
+
+ Step 2
+
+
+ Now, CamperBot is trying to create a function that will return a random index from the darkColorsArr. But they have run into the following error message:
+
+
+
+ Example Code
+
+ Uncaught ReferenceError: math is not defined
+
+
+ A ReferenceError is thrown when a non-existent variable is referenced. In this case, it looks like CamperBot is trying to use math but JavaScript doesn't have a math object.
+
+
+ Fix CamperBot's error in the math.random() line and open up the console again.
+
+
+
+
+ Step 3
+
+
+ Now that the ReferenceError is resolved, the console is displaying the correct results for a random number between 0 and 9. But CamperBot was not expecting to see decimal numbers like these:
+
+
+
+ Example Code
+
+ 0.0158828998797710952.1145962861976416.040964780197666
+
+ Update the console statement to print a whole number between 0 and 9.
+
+
+ Remember that you worked with a method in the Role Playing Game that rounds a number down to the nearest whole number.
+
+
+
+
+ Step 4
+
+
+ CamperBot is finished with building out the
+ getRandomIndex function and it is working as expected. But now they are running into this issue
+ when trying to create a reference to the body element in the DOM:
+
+
+ Uncaught TypeError: document.queryselector is not a function
+
+
+ A TypeError means that the code is trying to perform
+ an operation on a value that is not of the expected type.
+
+
+ Fix the TypeError by updating the document.queryselector
+ method to the correct method name that selects an element from the DOM.
+
+
+
+
+ Step 5
+
+
+ CamperBot has created a new variable called bgHexCodeSpanElement to store the reference to the span element with the id of bg-hex-code. However, when they try to log that variable to the console, they get null.
+
+
+ null is a special value in JavaScript that represents the absence of a value. This can happen when you try to access a property of an object that doesn't exist
+ In this case, CamperBot is not passing in the correct selector to the document.querySelector method
+
+
+ Fix the document.querySelector("bg-hex-code") line so that it correctly selects the element with the id of bg-hex-code.
+
+
+
+
+ Step 6
+
+
+ CamperBot has now created a function called changeBackgroundColor that changes the background color of the page to a random color from the darkColorsArr array. The function also displays the hex code for that new color.
+
+
+ When they try to test out this function, they notice that the background color is not changing and the text shows the following:
+
+
+
+ Example Code
+
+ Hex Code: undefined
+
+
+ undefined is showing up here because the color variable is not being set correctly.
+
+
+ Fix the error in the darkColorsArr[getRandomIndex] line so that the color variable is set to a random color from the darkColorsArr array.
+
+
+
+
+ Step 7
+
+
+ CamperBot is trying to create a new variable called btn to store the reference to the button element with the id of click-btn
+
+
+ However, when they try to log the button element to the console, they see that the button element is null.
+
+
+ Open up the index.html to see the correct id name for that button element.
+
+
+ Then fix the error for the document.querySelector("#click-btn"); line.
+
+
+
+
+ Step 8
+
+
+ CamperBot has finished building out their random background color changer. However, when they click the button, the background color does not change.
+
+
+ It looks like they are trying to use the onclick property but they are using it incorrectly. The onclick property should be assigned a function reference.
+
+
+ Fix the error in the btn.onclick = changeBackgroundColor; line.
+
+
+ Remember that you worked with the onclick property in the Role playing game project. Look back at the final solution to see how onclick was properly used.
+
+
+ Once you fix that final bug, the random background color changer will be complete!
+
+
+
+
#### preview
-
+
| [index.html](#indexhtml) | [styles.css](#stylescss) | [script.js](#scriptjs) |
| ------------------------ | ------------------------ | ---------------------- |
@@ -136,6 +306,24 @@ const darkColorsArr = [
"#2C3E50",
"#800020",
];
+
+function getRandomIndex() {
+ const randomIndex = Math.floor(darkColorsArr.length * Math.random());
+ return randomIndex;
+}
+
+const body = document.querySelector("body");
+const bgHexCodeSpanElement = document.querySelector("#bg-hex-code");
+
+function changeBackgroundColor() {
+ const color = darkColorsArr[getRandomIndex()];
+
+ bgHexCodeSpanElement.innerText = color;
+ body.style.backgroundColor = color;
+}
+const btn = document.querySelector("#btn");
+
+btn.onclick = changeBackgroundColor;
```
[back to top](#top)
diff --git a/Random_Background_Color_Changer/steps/__0__title_/README.md b/Random_Background_Color_Changer/steps/__0__title_/README.md
new file mode 100644
index 0000000..1e9e277
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__0__title_/README.md
@@ -0,0 +1,210 @@
+
+
+ Description of the Tasks
+
+
+
+ Step 1
+
+
+ CamperBot is trying to build out a random background color changer. But they keep running into issues and need your help to debug the code
+
+
+ CamperBot has already added the HTML and CSS for the project. But they are confused as to why none of the styles and content is showing up on the page.
+
+
+ When they open up the console they see this message:
+
+
+
+ Example Code
+
+ SyntaxError: unknown: Unexpected token, expected "," (5:2)
+
+
+ Syntax errors are thrown when the JavaScript engine encounters something it can't interpret. In this case, it looks like CamperBot has syntax errors in the darkColorsArr array.
+
+
+ Fix the syntax errors in the darkColorsArr array and you should see the content and styles show up on the page.
+
+
+
+
+ Step 2
+
+
+ Now, CamperBot is trying to create a function that will return a random index from the darkColorsArr. But they have run into the following error message:
+
+
+
+ Example Code
+
+ Uncaught ReferenceError: math is not defined
+
+
+ A ReferenceError is thrown when a non-existent variable is referenced. In this case, it looks like CamperBot is trying to use math but JavaScript doesn't have a math object.
+
+
+ Fix CamperBot's error in the math.random() line and open up the console again.
+
+
+
+
+ Step 3
+
+
+ Now that the ReferenceError is resolved, the console is displaying the correct results for a random number between 0 and 9. But CamperBot was not expecting to see decimal numbers like these:
+
+
+
+ Example Code
+
+ 0.0158828998797710952.1145962861976416.040964780197666
+
+ Update the console statement to print a whole number between 0 and 9.
+
+
+ Remember that you worked with a method in the Role Playing Game that rounds a number down to the nearest whole number.
+
+
+
+
+ Step 4
+
+
+ CamperBot is finished with building out the
+ getRandomIndex function and it is working as expected. But now they are running into this issue
+ when trying to create a reference to the body element in the DOM:
+
+
+ Uncaught TypeError: document.queryselector is not a function
+
+
+ A TypeError means that the code is trying to perform
+ an operation on a value that is not of the expected type.
+
+
+ Fix the TypeError by updating the document.queryselector
+ method to the correct method name that selects an element from the DOM.
+
+
+
+
+ Step 5
+
+
+ CamperBot has created a new variable called bgHexCodeSpanElement to store the reference to the span element with the id of bg-hex-code. However, when they try to log that variable to the console, they get null.
+
+
+ null is a special value in JavaScript that represents the absence of a value. This can happen when you try to access a property of an object that doesn't exist
+ In this case, CamperBot is not passing in the correct selector to the document.querySelector method
+
+
+ Fix the document.querySelector("bg-hex-code") line so that it correctly selects the element with the id of bg-hex-code.
+
+
+
+
+ Step 6
+
+
+ CamperBot has now created a function called changeBackgroundColor that changes the background color of the page to a random color from the darkColorsArr array. The function also displays the hex code for that new color.
+
+
+ When they try to test out this function, they notice that the background color is not changing and the text shows the following:
+
+
+
+ Example Code
+
+ Hex Code: undefined
+
+
+ undefined is showing up here because the color variable is not being set correctly.
+
+
+ Fix the error in the darkColorsArr[getRandomIndex] line so that the color variable is set to a random color from the darkColorsArr array.
+
+
+
+
+ Step 7
+
+
+ CamperBot is trying to create a new variable called btn to store the reference to the button element with the id of click-btn
+
+
+ However, when they try to log the button element to the console, they see that the button element is null.
+
+
+ Open up the index.html to see the correct id name for that button element.
+
+
+ Then fix the error for the document.querySelector("#click-btn"); line.
+
+
+
+
+ Step 8
+
+
+ CamperBot has finished building out their random background color changer. However, when they click the button, the background color does not change.
+
+
+ It looks like they are trying to use the onclick property but they are using it incorrectly. The onclick property should be assigned a function reference.
+
+
+ Fix the error in the btn.onclick = changeBackgroundColor; line.
+
+
+ Remember that you worked with the onclick property in the Role playing game project. Look back at the final solution to see how onclick was properly used.
+
+
+ Once you fix that final bug, the random background color changer will be complete!
+
+
+
+
+### technologies
+
+
+
+
+ JavaScript
+ CSS
+ HTML
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+[back to top](#top)
diff --git a/Random_Background_Color_Changer/steps/__0__title_/title.txt b/Random_Background_Color_Changer/steps/__0__title_/title.txt
new file mode 100644
index 0000000..4da854b
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__0__title_/title.txt
@@ -0,0 +1,174 @@
+Debugging is the process
+of going through your code,
+finding any issues, and fixing them.
+
+In this project, you will
+help CamperBot build a random
+background color changer
+and help them find and fix errors.
+
+Step 1
+CamperBot is trying to build out
+a random background color changer.
+But they keep running into
+issues and need your help to debug the code.
+
+CamperBot has already added
+the HTML and CSS for the project.
+But they are confused as to why
+none of the styles and content is showing up on the page.
+
+When they open up the console they see this message:
+
+Example Code
+SyntaxError: unknown: Unexpected token, expected "," (5:2)
+Syntax errors are thrown when
+the JavaScript engine encounters something
+it can't interpret. In this case,
+it looks like CamperBot has syntax
+errors in the darkColorsArr array.
+
+Fix the syntax errors in
+the darkColorsArr array and you
+should see the content and styles show up on the page.
+
+
+Step 2
+Now, CamperBot is trying to create
+a function that will return a random
+index from the darkColorsArr.
+But they have run into the following error message:
+
+Example Code
+Uncaught ReferenceError: math is not defined
+A ReferenceError is thrown when
+a non-existent variable is referenced.
+In this case, it looks like CamperBot
+is trying to use math but JavaScript doesn't have a math object.
+
+Fix CamperBot's error in the math.random()
+line and open up the console again.
+
+
+Step 3
+Now that the ReferenceError
+is resolved, the console is
+displaying the correct results
+for a random number between 0 and 9.
+But CamperBot was not expecting to see decimal numbers like these:
+
+Example Code
+0.015882899879771095
+2.114596286197641
+6.040964780197666
+Update the console statement to print a whole number between 0 and 9.
+
+Remember that you worked with a method
+in the Role Playing Game that
+rounds a number down to the nearest whole number.
+
+
+Step 4
+CamperBot is finished with
+building out the getRandomIndex
+function and it is working as expected.
+
+But now they are running into
+this issue when trying to create
+a reference to the body element in the DOM:
+
+Example Code
+
+Uncaught TypeError: document.queryselector
+is not a function
+A TypeError means that the
+code is trying to perform
+an operation on a value that
+is not of the expected type.
+
+Fix the TypeError by updating
+the document.queryselector method
+to the correct method name
+that selects an element from the DOM.
+
+
+Step 5
+CamperBot has created a new variable
+called bgHexCodeSpanElement to
+store the reference to the span
+element with the id of bg-hex-code.
+However, when they try to
+log that variable to the console,
+they get null.
+
+null is a special value in JavaScript
+that represents the absence of a value.
+This can happen when you try
+to access a property of an object that doesn't exist.
+
+In this case, CamperBot is not
+passing in the correct
+selector to the document.querySelector method.
+
+Fix the document.querySelector("bg-hex-code")
+line so that it correctly selects
+the element with the id of bg-hex-code.
+
+
+Step 6
+CamperBot has now created a function
+called changeBackgroundColor that changes
+the background color of the page to a random color
+from the darkColorsArr array.
+The function also displays the hex code for that new color.
+
+When they try to test out this function,
+they notice that the background
+color is not changing and the text shows the following:
+
+Example Code
+Hex Code: undefined
+undefined is showing up here because
+the color variable is not being set correctly.
+
+Fix the error in the darkColorsArr[getRandomIndex]
+line so that the color variable is set to a random color
+from the darkColorsArr array.
+
+
+Step 7
+CamperBot is trying to create
+a new variable called btn to store
+the reference to the button
+element with the id of click-btn
+
+However, when they try to log
+the button element to the console,
+they see that the button element is null.
+
+Open up the index.html to see
+the correct id name for that button element.
+
+Then fix the error for
+the document.querySelector("#click-btn"); line.
+
+Step 8
+CamperBot has finished building
+out their random background color changer.
+However, when they click the button,
+the background color does not change.
+
+It looks like they are trying to use the onclick
+property but they are using it incorrectly.
+The onclick property should be assigned a function reference.
+
+Fix the error in the btn.onclick = changeBackgroundColor(); line.
+
+Remember that you worked with the onclick
+property in the Role playing game project.
+Look back at the final solution to see
+how onclick was properly used.
+
+Once you fix that final bug,
+the random background color changer will be complete!
+
diff --git a/Random_Background_Color_Changer/steps/__0__title__/title.txt b/Random_Background_Color_Changer/steps/__0__title__/title.txt
deleted file mode 100644
index 3b7e991..0000000
--- a/Random_Background_Color_Changer/steps/__0__title__/title.txt
+++ /dev/null
@@ -1,9 +0,0 @@
-Debugging is the process
-of going through your code,
-finding any issues, and fixing them.
-
-In this project, you will
-help CamperBot build a random
-background color changer
-and help them find and fix errors.
-
diff --git a/Random_Background_Color_Changer/steps/__1__step__/README.md b/Random_Background_Color_Changer/steps/__1__step__/README.md
index 685fa49..0916760 100644
--- a/Random_Background_Color_Changer/steps/__1__step__/README.md
+++ b/Random_Background_Color_Changer/steps/__1__step__/README.md
@@ -1,5 +1,33 @@
+
+ Description of the task
+
+ Step 1
+
+ CamperBot is trying to build out a random background color changer. But they keep running into issues and need your help to debug the code
+
+
+ CamperBot has already added the HTML and CSS for the project. But they are confused as to why none of the styles and content is showing up on the page.
+
+
+ When they open up the console they see this message:
+
+
+
+ Example Code
+
+ SyntaxError: unknown: Unexpected token, expected "," (5:2)
+
+
+ Syntax errors are thrown when the JavaScript engine encounters something it can't interpret. In this case, it looks like CamperBot has syntax errors in the darkColorsArr array.
+
+
+ Fix the syntax errors in the darkColorsArr array and you should see the content and styles show up on the page.
+
+
+
# Random Background Color changer
Debugging is the process of going through your code, finding any issues, and fixing them.
diff --git a/Random_Background_Color_Changer/steps/__1__step__/title.txt b/Random_Background_Color_Changer/steps/__1__step__/title.txt
new file mode 100644
index 0000000..4d4b89c
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__1__step__/title.txt
@@ -0,0 +1,26 @@
+Step 1
+CamperBot is trying to build out
+a random background color changer.
+But they keep running into
+issues and need your help to debug the code.
+
+CamperBot has already added
+the HTML and CSS for the project.
+But they are confused as to why
+none of the styles and content is showing up on the page.
+
+When they open up the console they see this message:
+
+Example Code
+SyntaxError: unknown: Unexpected token, expected "," (5:2)
+Syntax errors are thrown when
+the JavaScript engine encounters something
+it can't interpret. In this case,
+it looks like CamperBot has syntax
+errors in the darkColorsArr array.
+
+Fix the syntax errors in
+the darkColorsArr array and you
+should see the content and styles show up on the page.
+
+
diff --git a/Random_Background_Color_Changer/steps/__2__step__/README.md b/Random_Background_Color_Changer/steps/__2__step__/README.md
new file mode 100644
index 0000000..a8badfd
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__2__step__/README.md
@@ -0,0 +1,169 @@
+
+
+ Description of the task
+
+ Step 2
+
+ Now, CamperBot is trying to create a function that will return a random index from the darkColorsArr. But they have run into the following error message:
+
+
+
+ Example Code
+
+ Uncaught ReferenceError: math is not defined
+
+
+ A ReferenceError is thrown when a non-existent variable is referenced. In this case, it looks like CamperBot is trying to use math but JavaScript doesn't have a math object.
+
+
+ Fix CamperBot's error in the math.random() line and open up the console again.
+
+
+
+# Random Background Color changer
+
+Debugging is the process of going through your code, finding any issues, and fixing them.
+
+In this project, you will help CamperBot build a random background color changer and help them find and fix errors.
+
+#### preview
+
+
+
+| [index.html](#indexhtml) | [styles.css](#stylescss) | [script.js](#scriptjs) |
+| ------------------------ | ------------------------ | ---------------------- |
+
+### technologies
+
+
+
+
+ JavaScript
+ CSS
+ HTML
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+[back to top](#top)
+
+### index.html
+
+```html
+
+
+
+ Build a random background color changer
+ Random Background Color changer
+
+
+
+
+ Change Background Color
+
+
+
+
+```
+
+[back to top](#top)
+
+### styles.css
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+ --dark-purple: #110815;
+ --light-grey: #efefef;
+}
+
+body {
+ background-color: var(--dark-purple);
+ color: var(--light-grey);
+ text-align: center;
+}
+
+.bg-information-container {
+ margin: 15px 0 25px;
+ font-size: 1.2rem;
+}
+
+.btn {
+ cursor: pointer;
+ padding: 10px;
+ margin: 10px;
+ color: var(--dark-purple);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+```
+
+[back to top](#top)
+
+### script.js
+
+```js
+const darkColorsArr = [
+ "#2C3E50",
+ "#34495E",
+ "#2C2C2C",
+ "#616A6B",
+ "#4A235A",
+ "#2F4F4F",
+ "#0E4B5A",
+ "#36454F",
+ "#2C3E50",
+ "#800020",
+];
+
+function getRandomIndex() {
+ console.log(darkColorsArr.length * Math.random())
+}
+
+getRandomIndex();
+```
+
+[back to top](#top)
diff --git a/Random_Background_Color_Changer/steps/__2__step__/index.html b/Random_Background_Color_Changer/steps/__2__step__/index.html
new file mode 100644
index 0000000..f50fc77
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__2__step__/index.html
@@ -0,0 +1,22 @@
+
+
+
+ Build a random background color changer
+ Random Background Color changer
+
+
+
+
+ Change Background Color
+
+
+
+
+
diff --git a/Random_Background_Color_Changer/steps/__2__step__/script.js b/Random_Background_Color_Changer/steps/__2__step__/script.js
new file mode 100644
index 0000000..1b115b6
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__2__step__/script.js
@@ -0,0 +1,18 @@
+const darkColorsArr = [
+ "#2C3E50",
+ "#34495E",
+ "#2C2C2C",
+ "#616A6B",
+ "#4A235A",
+ "#2F4F4F",
+ "#0E4B5A",
+ "#36454F",
+ "#2C3E50",
+ "#800020",
+];
+
+function getRandomIndex() {
+ console.log(darkColorsArr.length * Math.random())
+}
+
+getRandomIndex();
\ No newline at end of file
diff --git a/Random_Background_Color_Changer/steps/__2__step__/styles.css b/Random_Background_Color_Changer/steps/__2__step__/styles.css
new file mode 100644
index 0000000..7b04a40
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__2__step__/styles.css
@@ -0,0 +1,41 @@
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+ --dark-purple: #110815;
+ --light-grey: #efefef;
+}
+
+body {
+ background-color: var(--dark-purple);
+ color: var(--light-grey);
+ text-align: center;
+}
+
+.bg-information-container {
+ margin: 15px 0 25px;
+ font-size: 1.2rem;
+}
+
+.btn {
+ cursor: pointer;
+ padding: 10px;
+ margin: 10px;
+ color: var(--dark-purple);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+
diff --git a/Random_Background_Color_Changer/steps/__2__step__/title.txt b/Random_Background_Color_Changer/steps/__2__step__/title.txt
new file mode 100644
index 0000000..c6d9178
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__2__step__/title.txt
@@ -0,0 +1,17 @@
+Step 2
+Now, CamperBot is trying to create
+a function that will return a random
+index from the darkColorsArr.
+But they have run into the following error message:
+
+Example Code
+Uncaught ReferenceError: math is not defined
+A ReferenceError is thrown when
+a non-existent variable is referenced.
+In this case, it looks like CamperBot
+is trying to use math but JavaScript doesn't have a math object.
+
+Fix CamperBot's error in the math.random()
+line and open up the console again.
+
+
diff --git a/Random_Background_Color_Changer/steps/__3__step__/README.md b/Random_Background_Color_Changer/steps/__3__step__/README.md
new file mode 100644
index 0000000..3ebf394
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__3__step__/README.md
@@ -0,0 +1,171 @@
+
+
+ Description of the task
+
+ Step 3
+
+ Now that the ReferenceError is resolved, the console is displaying the correct results for a random number between 0 and 9. But CamperBot was not expecting to see decimal numbers like these:
+
+
+
+ Example Code
+
+ 0.0158828998797710952.1145962861976416.040964780197666
+
+ Update the console statement to print a whole number between 0 and 9.
+
+
+ Remember that you worked with a method in the Role Playing Game that rounds a number down to the nearest whole number.
+
+
+
+# Random Background Color changer
+
+Debugging is the process of going through your code, finding any issues, and fixing them.
+
+In this project, you will help CamperBot build a random background color changer and help them find and fix errors.
+
+#### preview
+
+
+
+| [index.html](#indexhtml) | [styles.css](#stylescss) | [script.js](#scriptjs) |
+| ------------------------ | ------------------------ | ---------------------- |
+
+### technologies
+
+
+
+
+ JavaScript
+ CSS
+ HTML
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+[back to top](#top)
+
+### index.html
+
+```html
+
+
+
+ Build a random background color changer
+ Random Background Color changer
+
+
+
+
+ Change Background Color
+
+
+
+
+```
+
+[back to top](#top)
+
+### styles.css
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+ --dark-purple: #110815;
+ --light-grey: #efefef;
+}
+
+body {
+ background-color: var(--dark-purple);
+ color: var(--light-grey);
+ text-align: center;
+}
+
+.bg-information-container {
+ margin: 15px 0 25px;
+ font-size: 1.2rem;
+}
+
+.btn {
+ cursor: pointer;
+ padding: 10px;
+ margin: 10px;
+ color: var(--dark-purple);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+```
+
+[back to top](#top)
+
+### script.js
+
+```js
+const darkColorsArr = [
+ "#2C3E50",
+ "#34495E",
+ "#2C2C2C",
+ "#616A6B",
+ "#4A235A",
+ "#2F4F4F",
+ "#0E4B5A",
+ "#36454F",
+ "#2C3E50",
+ "#800020",
+];
+
+function getRandomIndex() {
+ console.log(Math.floor(darkColorsArr.length * Math.random()));
+}
+
+getRandomIndex();
+```
+
+[back to top](#top)
diff --git a/Random_Background_Color_Changer/steps/__3__step__/index.html b/Random_Background_Color_Changer/steps/__3__step__/index.html
new file mode 100644
index 0000000..f50fc77
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__3__step__/index.html
@@ -0,0 +1,22 @@
+
+
+
+ Build a random background color changer
+ Random Background Color changer
+
+
+
+
+ Change Background Color
+
+
+
+
+
diff --git a/Random_Background_Color_Changer/steps/__3__step__/script.js b/Random_Background_Color_Changer/steps/__3__step__/script.js
new file mode 100644
index 0000000..30280c6
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__3__step__/script.js
@@ -0,0 +1,18 @@
+const darkColorsArr = [
+ "#2C3E50",
+ "#34495E",
+ "#2C2C2C",
+ "#616A6B",
+ "#4A235A",
+ "#2F4F4F",
+ "#0E4B5A",
+ "#36454F",
+ "#2C3E50",
+ "#800020",
+];
+
+function getRandomIndex() {
+ console.log(Math.floor(darkColorsArr.length * Math.random()));
+}
+
+getRandomIndex();
\ No newline at end of file
diff --git a/Random_Background_Color_Changer/steps/__3__step__/styles.css b/Random_Background_Color_Changer/steps/__3__step__/styles.css
new file mode 100644
index 0000000..7b04a40
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__3__step__/styles.css
@@ -0,0 +1,41 @@
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+ --dark-purple: #110815;
+ --light-grey: #efefef;
+}
+
+body {
+ background-color: var(--dark-purple);
+ color: var(--light-grey);
+ text-align: center;
+}
+
+.bg-information-container {
+ margin: 15px 0 25px;
+ font-size: 1.2rem;
+}
+
+.btn {
+ cursor: pointer;
+ padding: 10px;
+ margin: 10px;
+ color: var(--dark-purple);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+
diff --git a/Random_Background_Color_Changer/steps/__3__step__/title.txt b/Random_Background_Color_Changer/steps/__3__step__/title.txt
new file mode 100644
index 0000000..73348c8
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__3__step__/title.txt
@@ -0,0 +1,20 @@
+Step 3
+Now that the ReferenceError
+is resolved, the console is
+displaying the correct results
+for a random number between 0 and 9.
+But CamperBot was not expecting to see decimal numbers like these:
+
+Example Code
+0.015882899879771095
+2.114596286197641
+6.040964780197666
+Update the console statement to print a whole number between 0 and 9.
+
+Remember that you worked with a method
+in the Role Playing Game that
+rounds a number down to the nearest whole number.
+
+
+
+
diff --git a/Random_Background_Color_Changer/steps/__4__step__/README.md b/Random_Background_Color_Changer/steps/__4__step__/README.md
new file mode 100644
index 0000000..807809e
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__4__step__/README.md
@@ -0,0 +1,172 @@
+
+
+ Description of the task
+
+ Step 4
+
+ CamperBot is finished with building out the
+ getRandomIndex function and it is working as expected. But now they are running into this issue
+ when trying to create a reference to the body element in the DOM:
+
+
+ Uncaught TypeError: document.queryselector is not a function
+
+
+ A TypeError means that the code is trying to perform
+ an operation on a value that is not of the expected type.
+
+
+ Fix the TypeError by updating the document.queryselector
+ method to the correct method name that selects an element from the DOM.
+
+
+
+# Random Background Color changer
+
+Debugging is the process of going through your code, finding any issues, and fixing them.
+
+In this project, you will help CamperBot build a random background color changer and help them find and fix errors.
+
+#### preview
+
+
+
+| [index.html](#indexhtml) | [styles.css](#stylescss) | [script.js](#scriptjs) |
+| ------------------------ | ------------------------ | ---------------------- |
+
+### technologies
+
+
+
+
+ JavaScript
+ CSS
+ HTML
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+[back to top](#top)
+
+### index.html
+
+```html
+
+
+
+ Build a random background color changer
+ Random Background Color changer
+
+
+
+
+ Change Background Color
+
+
+
+
+```
+
+[back to top](#top)
+
+### styles.css
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+ --dark-purple: #110815;
+ --light-grey: #efefef;
+}
+
+body {
+ background-color: var(--dark-purple);
+ color: var(--light-grey);
+ text-align: center;
+}
+
+.bg-information-container {
+ margin: 15px 0 25px;
+ font-size: 1.2rem;
+}
+
+.btn {
+ cursor: pointer;
+ padding: 10px;
+ margin: 10px;
+ color: var(--dark-purple);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+```
+
+[back to top](#top)
+
+### script.js
+
+```js
+const darkColorsArr = [
+ "#2C3E50",
+ "#34495E",
+ "#2C2C2C",
+ "#616A6B",
+ "#4A235A",
+ "#2F4F4F",
+ "#0E4B5A",
+ "#36454F",
+ "#2C3E50",
+ "#800020",
+];
+
+function getRandomIndex() {
+ console.log(Math.floor(darkColorsArr.length * Math.random()));
+}
+
+getRandomIndex();
+
+const body = document.querySelector("body");
+```
+
+[back to top](#top)
diff --git a/Random_Background_Color_Changer/steps/__4__step__/index.html b/Random_Background_Color_Changer/steps/__4__step__/index.html
new file mode 100644
index 0000000..f50fc77
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__4__step__/index.html
@@ -0,0 +1,22 @@
+
+
+
+ Build a random background color changer
+ Random Background Color changer
+
+
+
+
+ Change Background Color
+
+
+
+
+
diff --git a/Random_Background_Color_Changer/steps/__4__step__/script.js b/Random_Background_Color_Changer/steps/__4__step__/script.js
new file mode 100644
index 0000000..c56dda7
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__4__step__/script.js
@@ -0,0 +1,20 @@
+const darkColorsArr = [
+ "#2C3E50",
+ "#34495E",
+ "#2C2C2C",
+ "#616A6B",
+ "#4A235A",
+ "#2F4F4F",
+ "#0E4B5A",
+ "#36454F",
+ "#2C3E50",
+ "#800020",
+];
+
+function getRandomIndex() {
+ console.log(Math.floor(darkColorsArr.length * Math.random()));
+}
+
+getRandomIndex();
+
+const body = document.querySelector("body");
diff --git a/Random_Background_Color_Changer/steps/__4__step__/styles.css b/Random_Background_Color_Changer/steps/__4__step__/styles.css
new file mode 100644
index 0000000..7b04a40
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__4__step__/styles.css
@@ -0,0 +1,41 @@
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+ --dark-purple: #110815;
+ --light-grey: #efefef;
+}
+
+body {
+ background-color: var(--dark-purple);
+ color: var(--light-grey);
+ text-align: center;
+}
+
+.bg-information-container {
+ margin: 15px 0 25px;
+ font-size: 1.2rem;
+}
+
+.btn {
+ cursor: pointer;
+ padding: 10px;
+ margin: 10px;
+ color: var(--dark-purple);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+
diff --git a/Random_Background_Color_Changer/steps/__4__step__/title.txt b/Random_Background_Color_Changer/steps/__4__step__/title.txt
new file mode 100644
index 0000000..138f140
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__4__step__/title.txt
@@ -0,0 +1,23 @@
+Step 4
+CamperBot is finished with
+building out the getRandomIndex
+function and it is working as expected.
+
+But now they are running into
+this issue when trying to create
+a reference to the body element in the DOM:
+
+Example Code
+
+Uncaught TypeError: document.queryselector
+is not a function
+A TypeError means that the
+code is trying to perform
+an operation on a value that
+is not of the expected type.
+
+Fix the TypeError by updating
+the document.queryselector method
+to the correct method name
+that selects an element from the DOM.
+
diff --git a/Random_Background_Color_Changer/steps/__5__step__/README.md b/Random_Background_Color_Changer/steps/__5__step__/README.md
new file mode 100644
index 0000000..cabac57
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__5__step__/README.md
@@ -0,0 +1,169 @@
+
+
+ Description of the task
+
+ Step 5
+
+ CamperBot has created a new variable called bgHexCodeSpanElement to store the reference to the span element with the id of bg-hex-code. However, when they try to log that variable to the console, they get null.
+
+
+ null is a special value in JavaScript that represents the absence of a value. This can happen when you try to access a property of an object that doesn't exist
+ In this case, CamperBot is not passing in the correct selector to the document.querySelector method
+
+
+ Fix the document.querySelector("bg-hex-code") line so that it correctly selects the element with the id of bg-hex-code.
+
+
+
+# Random Background Color changer
+
+Debugging is the process of going through your code, finding any issues, and fixing them.
+
+In this project, you will help CamperBot build a random background color changer and help them find and fix errors.
+
+#### preview
+
+
+
+| [index.html](#indexhtml) | [styles.css](#stylescss) | [script.js](#scriptjs) |
+| ------------------------ | ------------------------ | ---------------------- |
+
+### technologies
+
+
+
+
+ JavaScript
+ CSS
+ HTML
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+[back to top](#top)
+
+### index.html
+
+```html
+
+
+
+ Build a random background color changer
+ Random Background Color changer
+
+
+
+
+ Change Background Color
+
+
+
+
+```
+
+[back to top](#top)
+
+### styles.css
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+ --dark-purple: #110815;
+ --light-grey: #efefef;
+}
+
+body {
+ background-color: var(--dark-purple);
+ color: var(--light-grey);
+ text-align: center;
+}
+
+.bg-information-container {
+ margin: 15px 0 25px;
+ font-size: 1.2rem;
+}
+
+.btn {
+ cursor: pointer;
+ padding: 10px;
+ margin: 10px;
+ color: var(--dark-purple);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+```
+
+[back to top](#top)
+
+### script.js
+
+```js
+const darkColorsArr = [
+ "#2C3E50",
+ "#34495E",
+ "#2C2C2C",
+ "#616A6B",
+ "#4A235A",
+ "#2F4F4F",
+ "#0E4B5A",
+ "#36454F",
+ "#2C3E50",
+ "#800020",
+];
+
+function getRandomIndex() {
+ console.log(Math.floor(darkColorsArr.length * Math.random()));
+}
+
+getRandomIndex();
+
+const body = document.querySelector("body");
+const bgHexCodeSpanElement = document.querySelector("#bg-hex-code");
+
+console.log(bgHexCodeSpanElement);
+```
+
+[back to top](#top)
diff --git a/Random_Background_Color_Changer/steps/__5__step__/index.html b/Random_Background_Color_Changer/steps/__5__step__/index.html
new file mode 100644
index 0000000..f50fc77
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__5__step__/index.html
@@ -0,0 +1,22 @@
+
+
+
+ Build a random background color changer
+ Random Background Color changer
+
+
+
+
+ Change Background Color
+
+
+
+
+
diff --git a/Random_Background_Color_Changer/steps/__5__step__/script.js b/Random_Background_Color_Changer/steps/__5__step__/script.js
new file mode 100644
index 0000000..e9b88f5
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__5__step__/script.js
@@ -0,0 +1,23 @@
+const darkColorsArr = [
+ "#2C3E50",
+ "#34495E",
+ "#2C2C2C",
+ "#616A6B",
+ "#4A235A",
+ "#2F4F4F",
+ "#0E4B5A",
+ "#36454F",
+ "#2C3E50",
+ "#800020",
+];
+
+function getRandomIndex() {
+ console.log(Math.floor(darkColorsArr.length * Math.random()));
+}
+
+getRandomIndex();
+
+const body = document.querySelector("body");
+const bgHexCodeSpanElement = document.querySelector("#bg-hex-code");
+
+console.log(bgHexCodeSpanElement);
diff --git a/Random_Background_Color_Changer/steps/__5__step__/styles.css b/Random_Background_Color_Changer/steps/__5__step__/styles.css
new file mode 100644
index 0000000..7b04a40
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__5__step__/styles.css
@@ -0,0 +1,41 @@
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+ --dark-purple: #110815;
+ --light-grey: #efefef;
+}
+
+body {
+ background-color: var(--dark-purple);
+ color: var(--light-grey);
+ text-align: center;
+}
+
+.bg-information-container {
+ margin: 15px 0 25px;
+ font-size: 1.2rem;
+}
+
+.btn {
+ cursor: pointer;
+ padding: 10px;
+ margin: 10px;
+ color: var(--dark-purple);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+
diff --git a/Random_Background_Color_Changer/steps/__5__step__/title.txt b/Random_Background_Color_Changer/steps/__5__step__/title.txt
new file mode 100644
index 0000000..ee05d62
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__5__step__/title.txt
@@ -0,0 +1,22 @@
+Step 5
+CamperBot has created a new variable
+called bgHexCodeSpanElement to
+store the reference to the span
+element with the id of bg-hex-code.
+However, when they try to
+log that variable to the console,
+they get null.
+
+null is a special value in JavaScript
+that represents the absence of a value.
+This can happen when you try
+to access a property of an object that doesn't exist.
+
+In this case, CamperBot is not
+passing in the correct
+selector to the document.querySelector method.
+
+Fix the document.querySelector("bg-hex-code")
+line so that it correctly selects
+the element with the id of bg-hex-code.
+
diff --git a/Random_Background_Color_Changer/steps/__6__step__/README.md b/Random_Background_Color_Changer/steps/__6__step__/README.md
new file mode 100644
index 0000000..f2c5cf0
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__6__step__/README.md
@@ -0,0 +1,183 @@
+
+
+ Description of the task
+
+ Step 6
+
+ CamperBot has now created a function called changeBackgroundColor that changes the background color of the page to a random color from the darkColorsArr array. The function also displays the hex code for that new color.
+
+
+ When they try to test out this function, they notice that the background color is not changing and the text shows the following:
+
+
+
+ Example Code
+
+ Hex Code: undefined
+
+
+ undefined is showing up here because the color variable is not being set correctly.
+
+
+ Fix the error in the darkColorsArr[getRandomIndex] line so that the color variable is set to a random color from the darkColorsArr array.
+
+
+
+# Random Background Color changer
+
+Debugging is the process of going through your code, finding any issues, and fixing them.
+
+In this project, you will help CamperBot build a random background color changer and help them find and fix errors.
+
+#### preview
+
+
+
+| [index.html](#indexhtml) | [styles.css](#stylescss) | [script.js](#scriptjs) |
+| ------------------------ | ------------------------ | ---------------------- |
+
+### technologies
+
+
+
+
+ JavaScript
+ CSS
+ HTML
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+[back to top](#top)
+
+### index.html
+
+```html
+
+
+
+ Build a random background color changer
+ Random Background Color changer
+
+
+
+
+ Change Background Color
+
+
+
+
+```
+
+[back to top](#top)
+
+### styles.css
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+ --dark-purple: #110815;
+ --light-grey: #efefef;
+}
+
+body {
+ background-color: var(--dark-purple);
+ color: var(--light-grey);
+ text-align: center;
+}
+
+.bg-information-container {
+ margin: 15px 0 25px;
+ font-size: 1.2rem;
+}
+
+.btn {
+ cursor: pointer;
+ padding: 10px;
+ margin: 10px;
+ color: var(--dark-purple);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+```
+
+[back to top](#top)
+
+### script.js
+
+```js
+const darkColorsArr = [
+ "#2C3E50",
+ "#34495E",
+ "#2C2C2C",
+ "#616A6B",
+ "#4A235A",
+ "#2F4F4F",
+ "#0E4B5A",
+ "#36454F",
+ "#2C3E50",
+ "#800020",
+];
+
+function getRandomIndex() {
+ const randomIndex = Math.floor(darkColorsArr.length * Math.random());
+ return randomIndex;
+}
+
+const body = document.querySelector("body");
+const bgHexCodeSpanElement = document.querySelector("#bg-hex-code");
+
+function changeBackgroundColor() {
+ const color = darkColorsArr[getRandomIndex()];
+
+ bgHexCodeSpanElement.innerText = color;
+ body.style.backgroundColor = color;
+}
+
+changeBackgroundColor();
+```
+
+[back to top](#top)
diff --git a/Random_Background_Color_Changer/steps/__6__step__/index.html b/Random_Background_Color_Changer/steps/__6__step__/index.html
new file mode 100644
index 0000000..f50fc77
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__6__step__/index.html
@@ -0,0 +1,22 @@
+
+
+
+ Build a random background color changer
+ Random Background Color changer
+
+
+
+
+ Change Background Color
+
+
+
+
+
diff --git a/Random_Background_Color_Changer/steps/__6__step__/script.js b/Random_Background_Color_Changer/steps/__6__step__/script.js
new file mode 100644
index 0000000..8af139a
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__6__step__/script.js
@@ -0,0 +1,29 @@
+const darkColorsArr = [
+ "#2C3E50",
+ "#34495E",
+ "#2C2C2C",
+ "#616A6B",
+ "#4A235A",
+ "#2F4F4F",
+ "#0E4B5A",
+ "#36454F",
+ "#2C3E50",
+ "#800020",
+];
+
+function getRandomIndex() {
+ const randomIndex = Math.floor(darkColorsArr.length * Math.random());
+ return randomIndex;
+}
+
+const body = document.querySelector("body");
+const bgHexCodeSpanElement = document.querySelector("#bg-hex-code");
+
+function changeBackgroundColor() {
+ const color = darkColorsArr[getRandomIndex()];
+
+ bgHexCodeSpanElement.innerText = color;
+ body.style.backgroundColor = color;
+}
+
+changeBackgroundColor();
diff --git a/Random_Background_Color_Changer/steps/__6__step__/styles.css b/Random_Background_Color_Changer/steps/__6__step__/styles.css
new file mode 100644
index 0000000..7b04a40
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__6__step__/styles.css
@@ -0,0 +1,41 @@
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+ --dark-purple: #110815;
+ --light-grey: #efefef;
+}
+
+body {
+ background-color: var(--dark-purple);
+ color: var(--light-grey);
+ text-align: center;
+}
+
+.bg-information-container {
+ margin: 15px 0 25px;
+ font-size: 1.2rem;
+}
+
+.btn {
+ cursor: pointer;
+ padding: 10px;
+ margin: 10px;
+ color: var(--dark-purple);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+
diff --git a/Random_Background_Color_Changer/steps/__6__step__/title.txt b/Random_Background_Color_Changer/steps/__6__step__/title.txt
new file mode 100644
index 0000000..3927e84
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__6__step__/title.txt
@@ -0,0 +1,20 @@
+Step 6
+CamperBot has now created a function
+called changeBackgroundColor that changes
+the background color of the page to a random color
+from the darkColorsArr array.
+The function also displays the hex code for that new color.
+
+When they try to test out this function,
+they notice that the background
+color is not changing and the text shows the following:
+
+Example Code
+Hex Code: undefined
+undefined is showing up here because
+the color variable is not being set correctly.
+
+Fix the error in the darkColorsArr[getRandomIndex]
+line so that the color variable is set to a random color
+from the darkColorsArr array.
+
diff --git a/Random_Background_Color_Changer/steps/__7__step__/README.md b/Random_Background_Color_Changer/steps/__7__step__/README.md
new file mode 100644
index 0000000..2e01d06
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__7__step__/README.md
@@ -0,0 +1,178 @@
+
+
+ Description of the task
+
+ Step 7
+
+ CamperBot is trying to create a new variable called btn to store the reference to the button element with the id of click-btn
+
+
+ However, when they try to log the button element to the console, they see that the button element is null.
+
+
+ Open up the index.html to see the correct id name for that button element.
+
+
+ Then fix the error for the document.querySelector("#click-btn"); line.
+
+
+
+# Random Background Color changer
+
+Debugging is the process of going through your code, finding any issues, and fixing them.
+
+In this project, you will help CamperBot build a random background color changer and help them find and fix errors.
+
+#### preview
+
+
+
+| [index.html](#indexhtml) | [styles.css](#stylescss) | [script.js](#scriptjs) |
+| ------------------------ | ------------------------ | ---------------------- |
+
+### technologies
+
+
+
+
+ JavaScript
+ CSS
+ HTML
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+[back to top](#top)
+
+### index.html
+
+```html
+
+
+
+ Build a random background color changer
+ Random Background Color changer
+
+
+
+
+ Change Background Color
+
+
+
+
+```
+
+[back to top](#top)
+
+### styles.css
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+ --dark-purple: #110815;
+ --light-grey: #efefef;
+}
+
+body {
+ background-color: var(--dark-purple);
+ color: var(--light-grey);
+ text-align: center;
+}
+
+.bg-information-container {
+ margin: 15px 0 25px;
+ font-size: 1.2rem;
+}
+
+.btn {
+ cursor: pointer;
+ padding: 10px;
+ margin: 10px;
+ color: var(--dark-purple);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+```
+
+[back to top](#top)
+
+### script.js
+
+```js
+const darkColorsArr = [
+ "#2C3E50",
+ "#34495E",
+ "#2C2C2C",
+ "#616A6B",
+ "#4A235A",
+ "#2F4F4F",
+ "#0E4B5A",
+ "#36454F",
+ "#2C3E50",
+ "#800020",
+];
+
+function getRandomIndex() {
+ const randomIndex = Math.floor(darkColorsArr.length * Math.random());
+ return randomIndex;
+}
+
+const body = document.querySelector("body");
+const bgHexCodeSpanElement = document.querySelector("#bg-hex-code");
+
+function changeBackgroundColor() {
+ const color = darkColorsArr[getRandomIndex()];
+
+ bgHexCodeSpanElement.innerText = color;
+ body.style.backgroundColor = color;
+}
+
+const btn = document.querySelector("#btn");
+console.log(btn);
+```
+
+[back to top](#top)
diff --git a/Random_Background_Color_Changer/steps/__7__step__/index.html b/Random_Background_Color_Changer/steps/__7__step__/index.html
new file mode 100644
index 0000000..f50fc77
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__7__step__/index.html
@@ -0,0 +1,22 @@
+
+
+
+ Build a random background color changer
+ Random Background Color changer
+
+
+
+
+ Change Background Color
+
+
+
+
+
diff --git a/Random_Background_Color_Changer/steps/__7__step__/script.js b/Random_Background_Color_Changer/steps/__7__step__/script.js
new file mode 100644
index 0000000..6f04d51
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__7__step__/script.js
@@ -0,0 +1,30 @@
+const darkColorsArr = [
+ "#2C3E50",
+ "#34495E",
+ "#2C2C2C",
+ "#616A6B",
+ "#4A235A",
+ "#2F4F4F",
+ "#0E4B5A",
+ "#36454F",
+ "#2C3E50",
+ "#800020",
+];
+
+function getRandomIndex() {
+ const randomIndex = Math.floor(darkColorsArr.length * Math.random());
+ return randomIndex;
+}
+
+const body = document.querySelector("body");
+const bgHexCodeSpanElement = document.querySelector("#bg-hex-code");
+
+function changeBackgroundColor() {
+ const color = darkColorsArr[getRandomIndex()];
+
+ bgHexCodeSpanElement.innerText = color;
+ body.style.backgroundColor = color;
+}
+
+const btn = document.querySelector("#btn");
+console.log(btn);
diff --git a/Random_Background_Color_Changer/steps/__7__step__/styles.css b/Random_Background_Color_Changer/steps/__7__step__/styles.css
new file mode 100644
index 0000000..7b04a40
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__7__step__/styles.css
@@ -0,0 +1,41 @@
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+ --dark-purple: #110815;
+ --light-grey: #efefef;
+}
+
+body {
+ background-color: var(--dark-purple);
+ color: var(--light-grey);
+ text-align: center;
+}
+
+.bg-information-container {
+ margin: 15px 0 25px;
+ font-size: 1.2rem;
+}
+
+.btn {
+ cursor: pointer;
+ padding: 10px;
+ margin: 10px;
+ color: var(--dark-purple);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+
diff --git a/Random_Background_Color_Changer/steps/__7__step__/title.txt b/Random_Background_Color_Changer/steps/__7__step__/title.txt
new file mode 100644
index 0000000..55a4610
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__7__step__/title.txt
@@ -0,0 +1,17 @@
+Step 7
+CamperBot is trying to create
+a new variable called btn to store
+the reference to the button
+element with the id of click-btn
+
+However, when they try to log
+the button element to the console,
+they see that the button element is null.
+
+Open up the index.html to see
+the correct id name for that button element.
+
+Then fix the error for
+the document.querySelector("#click-btn"); line.
+
+
diff --git a/Random_Background_Color_Changer/steps/__8__step__/README.md b/Random_Background_Color_Changer/steps/__8__step__/README.md
new file mode 100644
index 0000000..2d2d6f5
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__8__step__/README.md
@@ -0,0 +1,182 @@
+
+
+ Description of the task
+
+ Step 8
+
+ CamperBot has finished building out their random background color changer. However, when they click the button, the background color does not change.
+
+
+ It looks like they are trying to use the onclick property but they are using it incorrectly. The onclick property should be assigned a function reference.
+
+
+ Fix the error in the btn.onclick = changeBackgroundColor; line.
+
+
+ Remember that you worked with the onclick property in the Role playing game project. Look back at the final solution to see how onclick was properly used.
+
+
+ Once you fix that final bug, the random background color changer will be complete!
+
+
+
+
+# Random Background Color changer
+
+Debugging is the process of going through your code, finding any issues, and fixing them.
+
+In this project, you will help CamperBot build a random background color changer and help them find and fix errors.
+
+#### preview
+
+
+
+| [index.html](#indexhtml) | [styles.css](#stylescss) | [script.js](#scriptjs) |
+| ------------------------ | ------------------------ | ---------------------- |
+
+### technologies
+
+
+
+
+ JavaScript
+ CSS
+ HTML
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+[back to top](#top)
+
+### index.html
+
+```html
+
+
+
+ Build a random background color changer
+ Random Background Color changer
+
+
+
+
+ Change Background Color
+
+
+
+
+```
+
+[back to top](#top)
+
+### styles.css
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+ --dark-purple: #110815;
+ --light-grey: #efefef;
+}
+
+body {
+ background-color: var(--dark-purple);
+ color: var(--light-grey);
+ text-align: center;
+}
+
+.bg-information-container {
+ margin: 15px 0 25px;
+ font-size: 1.2rem;
+}
+
+.btn {
+ cursor: pointer;
+ padding: 10px;
+ margin: 10px;
+ color: var(--dark-purple);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+```
+
+[back to top](#top)
+
+### script.js
+
+```js
+const darkColorsArr = [
+ "#2C3E50",
+ "#34495E",
+ "#2C2C2C",
+ "#616A6B",
+ "#4A235A",
+ "#2F4F4F",
+ "#0E4B5A",
+ "#36454F",
+ "#2C3E50",
+ "#800020",
+];
+
+function getRandomIndex() {
+ const randomIndex = Math.floor(darkColorsArr.length * Math.random());
+ return randomIndex;
+}
+
+const body = document.querySelector("body");
+const bgHexCodeSpanElement = document.querySelector("#bg-hex-code");
+
+function changeBackgroundColor() {
+ const color = darkColorsArr[getRandomIndex()];
+
+ bgHexCodeSpanElement.innerText = color;
+ body.style.backgroundColor = color;
+}
+const btn = document.querySelector("#btn");
+
+btn.onclick = changeBackgroundColor;
+```
+
+[back to top](#top)
diff --git a/Random_Background_Color_Changer/steps/__8__step__/index.html b/Random_Background_Color_Changer/steps/__8__step__/index.html
new file mode 100644
index 0000000..f50fc77
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__8__step__/index.html
@@ -0,0 +1,22 @@
+
+
+
+ Build a random background color changer
+ Random Background Color changer
+
+
+
+
+ Change Background Color
+
+
+
+
+
diff --git a/Random_Background_Color_Changer/steps/__8__step__/script.js b/Random_Background_Color_Changer/steps/__8__step__/script.js
new file mode 100644
index 0000000..550921a
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__8__step__/script.js
@@ -0,0 +1,30 @@
+const darkColorsArr = [
+ "#2C3E50",
+ "#34495E",
+ "#2C2C2C",
+ "#616A6B",
+ "#4A235A",
+ "#2F4F4F",
+ "#0E4B5A",
+ "#36454F",
+ "#2C3E50",
+ "#800020",
+];
+
+function getRandomIndex() {
+ const randomIndex = Math.floor(darkColorsArr.length * Math.random());
+ return randomIndex;
+}
+
+const body = document.querySelector("body");
+const bgHexCodeSpanElement = document.querySelector("#bg-hex-code");
+
+function changeBackgroundColor() {
+ const color = darkColorsArr[getRandomIndex()];
+
+ bgHexCodeSpanElement.innerText = color;
+ body.style.backgroundColor = color;
+}
+const btn = document.querySelector("#btn");
+
+btn.onclick = changeBackgroundColor;
diff --git a/Random_Background_Color_Changer/steps/__8__step__/styles.css b/Random_Background_Color_Changer/steps/__8__step__/styles.css
new file mode 100644
index 0000000..7b04a40
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__8__step__/styles.css
@@ -0,0 +1,41 @@
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+ --dark-purple: #110815;
+ --light-grey: #efefef;
+}
+
+body {
+ background-color: var(--dark-purple);
+ color: var(--light-grey);
+ text-align: center;
+}
+
+.bg-information-container {
+ margin: 15px 0 25px;
+ font-size: 1.2rem;
+}
+
+.btn {
+ cursor: pointer;
+ padding: 10px;
+ margin: 10px;
+ color: var(--dark-purple);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+
diff --git a/Random_Background_Color_Changer/steps/__8__step__/title.txt b/Random_Background_Color_Changer/steps/__8__step__/title.txt
new file mode 100644
index 0000000..e913544
--- /dev/null
+++ b/Random_Background_Color_Changer/steps/__8__step__/title.txt
@@ -0,0 +1,20 @@
+Step 8
+CamperBot has finished building
+out their random background color changer.
+However, when they click the button,
+the background color does not change.
+
+It looks like they are trying to use the onclick
+property but they are using it incorrectly.
+The onclick property should be assigned a function reference.
+
+Fix the error in the btn.onclick = changeBackgroundColor(); line.
+
+Remember that you worked with the onclick
+property in the Role playing game project.
+Look back at the final solution to see
+how onclick was properly used.
+
+Once you fix that final bug,
+the random background color changer will be complete!
+
diff --git a/update_all_projects.rb b/update_all_projects.rb
index 58a57d0..358b324 100644
--- a/update_all_projects.rb
+++ b/update_all_projects.rb
@@ -3,6 +3,7 @@
Pyramid_Generator: 'https://github.com/AndriiKot/JS__Pyramid_Generator__FreeCodeCamp.git',
Gradebook_App: 'https://github.com/AndriiKot/JS__Gradebook_App__FreeCodeCamp.git',
Random_Background_Color_Changer: 'https://github.com/AndriiKot/JS__Random_Background_Color_Changer__freeCodeCamp.git',
+ Calorie_Counter: 'https://github.com/AndriiKot/VanillaJS__Calorie_Counter__freeCodeCamp.git',
}
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+ 
+
+ 
+
+ 
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+[back to top](#top)
+
+
+
+[back to top](#top)
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+
+[back to top](#top)
+
+
+
+
+ 
+
+ 
+
+