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 @@ + + + +# Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68Step 69
Step 70Step 71Step 72Step 73Step 74
Step 75Step 76Step 77Step 78Step 79
Step 80Step 81Step 82Step 83Step 84
Step 85Step 86Step 87Step 88Step 89
Step 90Step 91Step 92Step 93Step 94
Step 95Step 96Step 97
+
+ +

preview

+ initial view + + +
+ +

Full Preview

+
+
Initial View
+ initial view +
Agter Adding Breakfast
+ after adding breakfast +
After Adding Lunch
+ after adding lunch +
After Adding Dinner
+ after adding dinner +
After Adding Snacks
+ after adding snacks +
After Adding Exercise
+ after adding exercise +
After pressing the 'Calculate Remaining Calories' button
+ after pressing calculate +
Full Preview
+ full preview +
After pressing the 'Clear' button
+ after pressing clear +
+ + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5DOM
JavaScriptCSSHTML5DOM
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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 @@ + \ No newline at end of file diff --git a/Calorie_Counter/images/icons/html.svg b/Calorie_Counter/images/icons/html.svg new file mode 100644 index 0000000..c62fabb --- /dev/null +++ b/Calorie_Counter/images/icons/html.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Calorie_Counter/images/icons/javascript-1.svg b/Calorie_Counter/images/icons/javascript-1.svg new file mode 100644 index 0000000..b56c0b7 --- /dev/null +++ b/Calorie_Counter/images/icons/javascript-1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Calorie_Counter/images/previews/preview__final-project/after_adding_breakfast.png b/Calorie_Counter/images/previews/preview__final-project/after_adding_breakfast.png new file mode 100644 index 0000000..96b04e2 Binary files /dev/null and b/Calorie_Counter/images/previews/preview__final-project/after_adding_breakfast.png differ diff --git a/Calorie_Counter/images/previews/preview__final-project/after_adding_dinner.png b/Calorie_Counter/images/previews/preview__final-project/after_adding_dinner.png new file mode 100644 index 0000000..51cbb10 Binary files /dev/null and b/Calorie_Counter/images/previews/preview__final-project/after_adding_dinner.png differ diff --git a/Calorie_Counter/images/previews/preview__final-project/after_adding_exercise.png b/Calorie_Counter/images/previews/preview__final-project/after_adding_exercise.png new file mode 100644 index 0000000..f71e06f Binary files /dev/null and b/Calorie_Counter/images/previews/preview__final-project/after_adding_exercise.png differ diff --git a/Calorie_Counter/images/previews/preview__final-project/after_adding_lunch.png b/Calorie_Counter/images/previews/preview__final-project/after_adding_lunch.png new file mode 100644 index 0000000..dae9a91 Binary files /dev/null and b/Calorie_Counter/images/previews/preview__final-project/after_adding_lunch.png differ diff --git a/Calorie_Counter/images/previews/preview__final-project/after_adding_snacks.png b/Calorie_Counter/images/previews/preview__final-project/after_adding_snacks.png new file mode 100644 index 0000000..7d58a79 Binary files /dev/null and b/Calorie_Counter/images/previews/preview__final-project/after_adding_snacks.png differ diff --git a/Calorie_Counter/images/previews/preview__final-project/after_pressing_calculate.png b/Calorie_Counter/images/previews/preview__final-project/after_pressing_calculate.png new file mode 100644 index 0000000..dbbf67d Binary files /dev/null and b/Calorie_Counter/images/previews/preview__final-project/after_pressing_calculate.png differ diff --git a/Calorie_Counter/images/previews/preview__final-project/after_pressing_clear.png b/Calorie_Counter/images/previews/preview__final-project/after_pressing_clear.png new file mode 100644 index 0000000..9b6774f Binary files /dev/null and b/Calorie_Counter/images/previews/preview__final-project/after_pressing_clear.png differ diff --git a/Calorie_Counter/images/previews/preview__final-project/full_preview.png b/Calorie_Counter/images/previews/preview__final-project/full_preview.png new file mode 100644 index 0000000..37f6964 Binary files /dev/null and b/Calorie_Counter/images/previews/preview__final-project/full_preview.png differ diff --git a/Calorie_Counter/images/previews/preview__final-project/initial_view.png b/Calorie_Counter/images/previews/preview__final-project/initial_view.png new file mode 100644 index 0000000..9b6774f Binary files /dev/null and b/Calorie_Counter/images/previews/preview__final-project/initial_view.png differ diff --git a/Calorie_Counter/images/previews/preview_project.png b/Calorie_Counter/images/previews/preview_project.png new file mode 100644 index 0000000..58149bf Binary files /dev/null and b/Calorie_Counter/images/previews/preview_project.png differ diff --git a/Calorie_Counter/images/previews/preview_step01.png b/Calorie_Counter/images/previews/preview_step01.png new file mode 100644 index 0000000..8757290 Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step01.png differ diff --git a/Calorie_Counter/images/previews/preview_step02.png b/Calorie_Counter/images/previews/preview_step02.png new file mode 100644 index 0000000..e941f25 Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step02.png differ diff --git a/Calorie_Counter/images/previews/preview_step03.png b/Calorie_Counter/images/previews/preview_step03.png new file mode 100644 index 0000000..31e93b2 Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step03.png differ diff --git a/Calorie_Counter/images/previews/preview_step04.png b/Calorie_Counter/images/previews/preview_step04.png new file mode 100644 index 0000000..826953a Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step04.png differ diff --git a/Calorie_Counter/images/previews/preview_step05.png b/Calorie_Counter/images/previews/preview_step05.png new file mode 100644 index 0000000..853980b Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step05.png differ diff --git a/Calorie_Counter/images/previews/preview_step06.png b/Calorie_Counter/images/previews/preview_step06.png new file mode 100644 index 0000000..a06aa27 Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step06.png differ diff --git a/Calorie_Counter/images/previews/preview_step07.png b/Calorie_Counter/images/previews/preview_step07.png new file mode 100644 index 0000000..cf2aa97 Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step07.png differ diff --git a/Calorie_Counter/images/previews/preview_step08.png b/Calorie_Counter/images/previews/preview_step08.png new file mode 100644 index 0000000..cf2aa97 Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step08.png differ diff --git a/Calorie_Counter/images/previews/preview_step09.png b/Calorie_Counter/images/previews/preview_step09.png new file mode 100644 index 0000000..121848e Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step09.png differ diff --git a/Calorie_Counter/images/previews/preview_step10.png b/Calorie_Counter/images/previews/preview_step10.png new file mode 100644 index 0000000..00cb646 Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step10.png differ diff --git a/Calorie_Counter/images/previews/preview_step11.png b/Calorie_Counter/images/previews/preview_step11.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step11.png differ diff --git a/Calorie_Counter/images/previews/preview_step12.png b/Calorie_Counter/images/previews/preview_step12.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step12.png differ diff --git a/Calorie_Counter/images/previews/preview_step13.png b/Calorie_Counter/images/previews/preview_step13.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step13.png differ diff --git a/Calorie_Counter/images/previews/preview_step14.png b/Calorie_Counter/images/previews/preview_step14.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step14.png differ diff --git a/Calorie_Counter/images/previews/preview_step15.png b/Calorie_Counter/images/previews/preview_step15.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step15.png differ diff --git a/Calorie_Counter/images/previews/preview_step16.png b/Calorie_Counter/images/previews/preview_step16.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step16.png differ diff --git a/Calorie_Counter/images/previews/preview_step17.png b/Calorie_Counter/images/previews/preview_step17.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step17.png differ diff --git a/Calorie_Counter/images/previews/preview_step18.png b/Calorie_Counter/images/previews/preview_step18.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step18.png differ diff --git a/Calorie_Counter/images/previews/preview_step19.png b/Calorie_Counter/images/previews/preview_step19.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step19.png differ diff --git a/Calorie_Counter/images/previews/preview_step20.png b/Calorie_Counter/images/previews/preview_step20.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step20.png differ diff --git a/Calorie_Counter/images/previews/preview_step21.png b/Calorie_Counter/images/previews/preview_step21.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step21.png differ diff --git a/Calorie_Counter/images/previews/preview_step22.png b/Calorie_Counter/images/previews/preview_step22.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step22.png differ diff --git a/Calorie_Counter/images/previews/preview_step23.png b/Calorie_Counter/images/previews/preview_step23.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step23.png differ diff --git a/Calorie_Counter/images/previews/preview_step24.png b/Calorie_Counter/images/previews/preview_step24.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step24.png differ diff --git a/Calorie_Counter/images/previews/preview_step25.png b/Calorie_Counter/images/previews/preview_step25.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step25.png differ diff --git a/Calorie_Counter/images/previews/preview_step26.png b/Calorie_Counter/images/previews/preview_step26.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step26.png differ diff --git a/Calorie_Counter/images/previews/preview_step27.png b/Calorie_Counter/images/previews/preview_step27.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step27.png differ diff --git a/Calorie_Counter/images/previews/preview_step28.png b/Calorie_Counter/images/previews/preview_step28.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step28.png differ diff --git a/Calorie_Counter/images/previews/preview_step29.png b/Calorie_Counter/images/previews/preview_step29.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step29.png differ diff --git a/Calorie_Counter/images/previews/preview_step30.png b/Calorie_Counter/images/previews/preview_step30.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step30.png differ diff --git a/Calorie_Counter/images/previews/preview_step31.png b/Calorie_Counter/images/previews/preview_step31.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step31.png differ diff --git a/Calorie_Counter/images/previews/preview_step32.png b/Calorie_Counter/images/previews/preview_step32.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step32.png differ diff --git a/Calorie_Counter/images/previews/preview_step33.png b/Calorie_Counter/images/previews/preview_step33.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step33.png differ diff --git a/Calorie_Counter/images/previews/preview_step34.png b/Calorie_Counter/images/previews/preview_step34.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step34.png differ diff --git a/Calorie_Counter/images/previews/preview_step35.png b/Calorie_Counter/images/previews/preview_step35.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step35.png differ diff --git a/Calorie_Counter/images/previews/preview_step36.png b/Calorie_Counter/images/previews/preview_step36.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step36.png differ diff --git a/Calorie_Counter/images/previews/preview_step37.png b/Calorie_Counter/images/previews/preview_step37.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step37.png differ diff --git a/Calorie_Counter/images/previews/preview_step38.png b/Calorie_Counter/images/previews/preview_step38.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step38.png differ diff --git a/Calorie_Counter/images/previews/preview_step39.png b/Calorie_Counter/images/previews/preview_step39.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step39.png differ diff --git a/Calorie_Counter/images/previews/preview_step40.png b/Calorie_Counter/images/previews/preview_step40.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step40.png differ diff --git a/Calorie_Counter/images/previews/preview_step41.png b/Calorie_Counter/images/previews/preview_step41.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step41.png differ diff --git a/Calorie_Counter/images/previews/preview_step42.png b/Calorie_Counter/images/previews/preview_step42.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step42.png differ diff --git a/Calorie_Counter/images/previews/preview_step43.png b/Calorie_Counter/images/previews/preview_step43.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step43.png differ diff --git a/Calorie_Counter/images/previews/preview_step44.png b/Calorie_Counter/images/previews/preview_step44.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step44.png differ diff --git a/Calorie_Counter/images/previews/preview_step45.png b/Calorie_Counter/images/previews/preview_step45.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step45.png differ diff --git a/Calorie_Counter/images/previews/preview_step46.png b/Calorie_Counter/images/previews/preview_step46.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step46.png differ diff --git a/Calorie_Counter/images/previews/preview_step47.png b/Calorie_Counter/images/previews/preview_step47.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step47.png differ diff --git a/Calorie_Counter/images/previews/preview_step48.png b/Calorie_Counter/images/previews/preview_step48.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step48.png differ diff --git a/Calorie_Counter/images/previews/preview_step49.png b/Calorie_Counter/images/previews/preview_step49.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step49.png differ diff --git a/Calorie_Counter/images/previews/preview_step50.png b/Calorie_Counter/images/previews/preview_step50.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step50.png differ diff --git a/Calorie_Counter/images/previews/preview_step51.png b/Calorie_Counter/images/previews/preview_step51.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step51.png differ diff --git a/Calorie_Counter/images/previews/preview_step52.png b/Calorie_Counter/images/previews/preview_step52.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step52.png differ diff --git a/Calorie_Counter/images/previews/preview_step53.png b/Calorie_Counter/images/previews/preview_step53.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step53.png differ diff --git a/Calorie_Counter/images/previews/preview_step54.png b/Calorie_Counter/images/previews/preview_step54.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step54.png differ diff --git a/Calorie_Counter/images/previews/preview_step55.png b/Calorie_Counter/images/previews/preview_step55.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step55.png differ diff --git a/Calorie_Counter/images/previews/preview_step56.png b/Calorie_Counter/images/previews/preview_step56.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step56.png differ diff --git a/Calorie_Counter/images/previews/preview_step57.png b/Calorie_Counter/images/previews/preview_step57.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step57.png differ diff --git a/Calorie_Counter/images/previews/preview_step58.png b/Calorie_Counter/images/previews/preview_step58.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step58.png differ diff --git a/Calorie_Counter/images/previews/preview_step59.png b/Calorie_Counter/images/previews/preview_step59.png new file mode 100644 index 0000000..17e079f Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step59.png differ diff --git a/Calorie_Counter/images/previews/preview_step60.png b/Calorie_Counter/images/previews/preview_step60.png new file mode 100644 index 0000000..767033d Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step60.png differ diff --git a/Calorie_Counter/images/previews/preview_step61.png b/Calorie_Counter/images/previews/preview_step61.png new file mode 100644 index 0000000..767033d Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step61.png differ diff --git a/Calorie_Counter/images/previews/preview_step62.png b/Calorie_Counter/images/previews/preview_step62.png new file mode 100644 index 0000000..767033d Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step62.png differ diff --git a/Calorie_Counter/images/previews/preview_step63.png b/Calorie_Counter/images/previews/preview_step63.png new file mode 100644 index 0000000..767033d Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step63.png differ diff --git a/Calorie_Counter/images/previews/preview_step64.png b/Calorie_Counter/images/previews/preview_step64.png new file mode 100644 index 0000000..767033d Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step64.png differ diff --git a/Calorie_Counter/images/previews/preview_step65.png b/Calorie_Counter/images/previews/preview_step65.png new file mode 100644 index 0000000..767033d Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step65.png differ diff --git a/Calorie_Counter/images/previews/preview_step66.png b/Calorie_Counter/images/previews/preview_step66.png new file mode 100644 index 0000000..767033d Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step66.png differ diff --git a/Calorie_Counter/images/previews/preview_step67.png b/Calorie_Counter/images/previews/preview_step67.png new file mode 100644 index 0000000..767033d Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step67.png differ diff --git a/Calorie_Counter/images/previews/preview_step68.png b/Calorie_Counter/images/previews/preview_step68.png new file mode 100644 index 0000000..767033d Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step68.png differ diff --git a/Calorie_Counter/images/previews/preview_step69.png b/Calorie_Counter/images/previews/preview_step69.png new file mode 100644 index 0000000..767033d Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step69.png differ diff --git a/Calorie_Counter/images/previews/preview_step70.png b/Calorie_Counter/images/previews/preview_step70.png new file mode 100644 index 0000000..767033d Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step70.png differ diff --git a/Calorie_Counter/images/previews/preview_step71.png b/Calorie_Counter/images/previews/preview_step71.png new file mode 100644 index 0000000..767033d Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step71.png differ diff --git a/Calorie_Counter/images/previews/preview_step72.png b/Calorie_Counter/images/previews/preview_step72.png new file mode 100644 index 0000000..767033d Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step72.png differ diff --git a/Calorie_Counter/images/previews/preview_step73.png b/Calorie_Counter/images/previews/preview_step73.png new file mode 100644 index 0000000..767033d Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step73.png differ diff --git a/Calorie_Counter/images/previews/preview_step74.png b/Calorie_Counter/images/previews/preview_step74.png new file mode 100644 index 0000000..767033d Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step74.png differ diff --git a/Calorie_Counter/images/previews/preview_step75.png b/Calorie_Counter/images/previews/preview_step75.png new file mode 100644 index 0000000..767033d Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step75.png differ diff --git a/Calorie_Counter/images/previews/preview_step76.png b/Calorie_Counter/images/previews/preview_step76.png new file mode 100644 index 0000000..767033d Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step76.png differ diff --git a/Calorie_Counter/images/previews/preview_step77.png b/Calorie_Counter/images/previews/preview_step77.png new file mode 100644 index 0000000..767033d Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step77.png differ diff --git a/Calorie_Counter/images/previews/preview_step78.png b/Calorie_Counter/images/previews/preview_step78.png new file mode 100644 index 0000000..767033d Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step78.png differ diff --git a/Calorie_Counter/images/previews/preview_step79.png b/Calorie_Counter/images/previews/preview_step79.png new file mode 100644 index 0000000..767033d Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step79.png differ diff --git a/Calorie_Counter/images/previews/preview_step80.png b/Calorie_Counter/images/previews/preview_step80.png new file mode 100644 index 0000000..767033d Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step80.png differ diff --git a/Calorie_Counter/images/previews/preview_step81.png b/Calorie_Counter/images/previews/preview_step81.png new file mode 100644 index 0000000..767033d Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step81.png differ diff --git a/Calorie_Counter/images/previews/preview_step82.png b/Calorie_Counter/images/previews/preview_step82.png new file mode 100644 index 0000000..767033d Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step82.png differ diff --git a/Calorie_Counter/images/previews/preview_step83.png b/Calorie_Counter/images/previews/preview_step83.png new file mode 100644 index 0000000..767033d Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step83.png differ diff --git a/Calorie_Counter/images/previews/preview_step84.png b/Calorie_Counter/images/previews/preview_step84.png new file mode 100644 index 0000000..767033d Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step84.png differ diff --git a/Calorie_Counter/images/previews/preview_step85.png b/Calorie_Counter/images/previews/preview_step85.png new file mode 100644 index 0000000..767033d Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step85.png differ diff --git a/Calorie_Counter/images/previews/preview_step86.png b/Calorie_Counter/images/previews/preview_step86.png new file mode 100644 index 0000000..767033d Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step86.png differ diff --git a/Calorie_Counter/images/previews/preview_step87.png b/Calorie_Counter/images/previews/preview_step87.png new file mode 100644 index 0000000..767033d Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step87.png differ diff --git a/Calorie_Counter/images/previews/preview_step88.png b/Calorie_Counter/images/previews/preview_step88.png new file mode 100644 index 0000000..767033d Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step88.png differ diff --git a/Calorie_Counter/images/previews/preview_step89.png b/Calorie_Counter/images/previews/preview_step89.png new file mode 100644 index 0000000..fb7d31b Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step89.png differ diff --git a/Calorie_Counter/images/previews/preview_step90.png b/Calorie_Counter/images/previews/preview_step90.png new file mode 100644 index 0000000..fb7d31b Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step90.png differ diff --git a/Calorie_Counter/images/previews/preview_step91.png b/Calorie_Counter/images/previews/preview_step91.png new file mode 100644 index 0000000..fb7d31b Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step91.png differ diff --git a/Calorie_Counter/images/previews/preview_step92.png b/Calorie_Counter/images/previews/preview_step92.png new file mode 100644 index 0000000..fb7d31b Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step92.png differ diff --git a/Calorie_Counter/images/previews/preview_step93.png b/Calorie_Counter/images/previews/preview_step93.png new file mode 100644 index 0000000..fb7d31b Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step93.png differ diff --git a/Calorie_Counter/images/previews/preview_step94.png b/Calorie_Counter/images/previews/preview_step94.png new file mode 100644 index 0000000..fb7d31b Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step94.png differ diff --git a/Calorie_Counter/images/previews/preview_step95.png b/Calorie_Counter/images/previews/preview_step95.png new file mode 100644 index 0000000..fb7d31b Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step95.png differ diff --git a/Calorie_Counter/images/previews/preview_step96.png b/Calorie_Counter/images/previews/preview_step96.png new file mode 100644 index 0000000..fb7d31b Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step96.png differ diff --git a/Calorie_Counter/images/previews/preview_step97.png b/Calorie_Counter/images/previews/preview_step97.png new file mode 100644 index 0000000..37f6964 Binary files /dev/null and b/Calorie_Counter/images/previews/preview_step97.png differ diff --git a/Calorie_Counter/package-lock.json b/Calorie_Counter/package-lock.json new file mode 100644 index 0000000..dd96164 --- /dev/null +++ b/Calorie_Counter/package-lock.json @@ -0,0 +1,1199 @@ +{ + "name": "Calorie Counter", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "Calorie Counter", + "version": "1.0.0", + "license": "MIT", + "devDependencies": { + "puppeteer": "^24.6.0" + } + }, + "node_modules/@babel/code-frame": { + "version": "7.26.2", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz", + "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-validator-identifier": "^7.25.9", + "js-tokens": "^4.0.0", + "picocolors": "^1.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-identifier": { + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz", + "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@puppeteer/browsers": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.9.0.tgz", + "integrity": "sha512-8+xM+cFydYET4X/5/3yZMHs7sjS6c9I6H5I3xJdb6cinzxWUT/I2QVw4avxCQ8QDndwdHkG/FiSZIrCjAbaKvQ==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "debug": "^4.4.0", + "extract-zip": "^2.0.1", + "progress": "^2.0.3", + "proxy-agent": "^6.5.0", + "semver": "^7.7.1", + "tar-fs": "^3.0.8", + "yargs": "^17.7.2" + }, + "bin": { + "browsers": "lib/cjs/main-cli.js" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@tootallnate/quickjs-emscripten": { + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/@tootallnate/quickjs-emscripten/-/quickjs-emscripten-0.23.0.tgz", + "integrity": "sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/node": { + "version": "22.14.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.14.0.tgz", + "integrity": "sha512-Kmpl+z84ILoG+3T/zQFyAJsU6EPTmOCj8/2+83fSN6djd6I4o7uOuGIH6vq3PrjY5BGitSbFuMN18j3iknubbA==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "undici-types": "~6.21.0" + } + }, + "node_modules/@types/yauzl": { + "version": "2.10.3", + "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz", + "integrity": "sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "@types/node": "*" + } + }, + "node_modules/agent-base": { + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.3.tgz", + "integrity": "sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 14" + } + }, + "node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "license": "MIT", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/argparse": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", + "dev": true, + "license": "Python-2.0" + }, + "node_modules/ast-types": { + "version": "0.13.4", + "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.13.4.tgz", + "integrity": "sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==", + "dev": true, + "license": "MIT", + "dependencies": { + "tslib": "^2.0.1" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/b4a": { + "version": "1.6.7", + "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.7.tgz", + "integrity": "sha512-OnAYlL5b7LEkALw87fUVafQw5rVR9RjwGd4KUwNQ6DrrNmaVaUCgLipfVlzrPQ4tWOR9P0IXGNOx50jYCCdSJg==", + "dev": true, + "license": "Apache-2.0" + }, + "node_modules/bare-events": { + "version": "2.5.4", + "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.5.4.tgz", + "integrity": "sha512-+gFfDkR8pj4/TrWCGUGWmJIkBwuxPS5F+a5yWjOHQt2hHvNZd5YLzadjmDUtFmMM4y429bnKLa8bYBMHcYdnQA==", + "dev": true, + "license": "Apache-2.0", + "optional": true + }, + "node_modules/bare-fs": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-4.1.2.tgz", + "integrity": "sha512-8wSeOia5B7LwD4+h465y73KOdj5QHsbbuoUfPBi+pXgFJIPuG7SsiOdJuijWMyfid49eD+WivpfY7KT8gbAzBA==", + "dev": true, + "license": "Apache-2.0", + "optional": true, + "dependencies": { + "bare-events": "^2.5.4", + "bare-path": "^3.0.0", + "bare-stream": "^2.6.4" + }, + "engines": { + "bare": ">=1.16.0" + }, + "peerDependencies": { + "bare-buffer": "*" + }, + "peerDependenciesMeta": { + "bare-buffer": { + "optional": true + } + } + }, + "node_modules/bare-os": { + "version": "3.6.1", + "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-3.6.1.tgz", + "integrity": "sha512-uaIjxokhFidJP+bmmvKSgiMzj2sV5GPHaZVAIktcxcpCyBFFWO+YlikVAdhmUo2vYFvFhOXIAlldqV29L8126g==", + "dev": true, + "license": "Apache-2.0", + "optional": true, + "engines": { + "bare": ">=1.14.0" + } + }, + "node_modules/bare-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/bare-path/-/bare-path-3.0.0.tgz", + "integrity": "sha512-tyfW2cQcB5NN8Saijrhqn0Zh7AnFNsnczRcuWODH0eYAXBsJ5gVxAUuNr7tsHSC6IZ77cA0SitzT+s47kot8Mw==", + "dev": true, + "license": "Apache-2.0", + "optional": true, + "dependencies": { + "bare-os": "^3.0.1" + } + }, + "node_modules/bare-stream": { + "version": "2.6.5", + "resolved": "https://registry.npmjs.org/bare-stream/-/bare-stream-2.6.5.tgz", + "integrity": "sha512-jSmxKJNJmHySi6hC42zlZnq00rga4jjxcgNZjY9N5WlOe/iOoGRtdwGsHzQv2RlH2KOYMwGUXhf2zXd32BA9RA==", + "dev": true, + "license": "Apache-2.0", + "optional": true, + "dependencies": { + "streamx": "^2.21.0" + }, + "peerDependencies": { + "bare-buffer": "*", + "bare-events": "*" + }, + "peerDependenciesMeta": { + "bare-buffer": { + "optional": true + }, + "bare-events": { + "optional": true + } + } + }, + "node_modules/basic-ftp": { + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/basic-ftp/-/basic-ftp-5.0.5.tgz", + "integrity": "sha512-4Bcg1P8xhUuqcii/S0Z9wiHIrQVPMermM1any+MX5GeGD7faD3/msQUDGLol9wOcz4/jbg/WJnGqoJF6LiBdtg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/buffer-crc32": { + "version": "0.2.13", + "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz", + "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": "*" + } + }, + "node_modules/callsites": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", + "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/chromium-bidi": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-3.0.0.tgz", + "integrity": "sha512-ZOGRDAhBMX1uxL2Cm2TDuhImbrsEz5A/tTcVU6RpXEWaTNUNwsHW6njUXizh51Ir6iqHbKAfhA2XK33uBcLo5A==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "mitt": "^3.0.1", + "zod": "^3.24.1" + }, + "peerDependencies": { + "devtools-protocol": "*" + } + }, + "node_modules/cliui": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", + "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==", + "dev": true, + "license": "ISC", + "dependencies": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.1", + "wrap-ansi": "^7.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true, + "license": "MIT" + }, + "node_modules/cosmiconfig": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz", + "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==", + "dev": true, + "license": "MIT", + "dependencies": { + "env-paths": "^2.2.1", + "import-fresh": "^3.3.0", + "js-yaml": "^4.1.0", + "parse-json": "^5.2.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/d-fischer" + }, + "peerDependencies": { + "typescript": ">=4.9.5" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/data-uri-to-buffer": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-6.0.2.tgz", + "integrity": "sha512-7hvf7/GW8e86rW0ptuwS3OcBGDjIi6SZva7hCyWC0yYry2cOPmLIjXAUHI6DK2HsnwJd9ifmt57i8eV2n4YNpw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 14" + } + }, + "node_modules/debug": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz", + "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==", + "dev": true, + "license": "MIT", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/degenerator": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/degenerator/-/degenerator-5.0.1.tgz", + "integrity": "sha512-TllpMR/t0M5sqCXfj85i4XaAzxmS5tVA16dqvdkMwGmzI+dXLXnw3J+3Vdv7VKw+ThlTMboK6i9rnZ6Nntj5CQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ast-types": "^0.13.4", + "escodegen": "^2.1.0", + "esprima": "^4.0.1" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/devtools-protocol": { + "version": "0.0.1425554", + "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1425554.tgz", + "integrity": "sha512-uRfxR6Nlzdzt0ihVIkV+sLztKgs7rgquY/Mhcv1YNCWDh5IZgl5mnn2aeEnW5stYTE0wwiF4RYVz8eMEpV1SEw==", + "dev": true, + "license": "BSD-3-Clause" + }, + "node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true, + "license": "MIT" + }, + "node_modules/end-of-stream": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz", + "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "once": "^1.4.0" + } + }, + "node_modules/env-paths": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz", + "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/error-ex": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", + "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-arrayish": "^0.2.1" + } + }, + "node_modules/escalade": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz", + "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/escodegen": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz", + "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "esprima": "^4.0.1", + "estraverse": "^5.2.0", + "esutils": "^2.0.2" + }, + "bin": { + "escodegen": "bin/escodegen.js", + "esgenerate": "bin/esgenerate.js" + }, + "engines": { + "node": ">=6.0" + }, + "optionalDependencies": { + "source-map": "~0.6.1" + } + }, + "node_modules/esprima": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", + "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", + "dev": true, + "license": "BSD-2-Clause", + "bin": { + "esparse": "bin/esparse.js", + "esvalidate": "bin/esvalidate.js" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/estraverse": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz", + "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">=4.0" + } + }, + "node_modules/esutils": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", + "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/extract-zip": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz", + "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "debug": "^4.1.1", + "get-stream": "^5.1.0", + "yauzl": "^2.10.0" + }, + "bin": { + "extract-zip": "cli.js" + }, + "engines": { + "node": ">= 10.17.0" + }, + "optionalDependencies": { + "@types/yauzl": "^2.9.1" + } + }, + "node_modules/fast-fifo": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz", + "integrity": "sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/fd-slicer": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz", + "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==", + "dev": true, + "license": "MIT", + "dependencies": { + "pend": "~1.2.0" + } + }, + "node_modules/get-caller-file": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", + "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", + "dev": true, + "license": "ISC", + "engines": { + "node": "6.* || 8.* || >= 10.*" + } + }, + "node_modules/get-stream": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz", + "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==", + "dev": true, + "license": "MIT", + "dependencies": { + "pump": "^3.0.0" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/get-uri": { + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/get-uri/-/get-uri-6.0.4.tgz", + "integrity": "sha512-E1b1lFFLvLgak2whF2xDBcOy6NLVGZBqqjJjsIhvopKfWWEi64pLVTWWehV8KlLerZkfNTA95sTe2OdJKm1OzQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "basic-ftp": "^5.0.2", + "data-uri-to-buffer": "^6.0.2", + "debug": "^4.3.4" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/http-proxy-agent": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz", + "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==", + "dev": true, + "license": "MIT", + "dependencies": { + "agent-base": "^7.1.0", + "debug": "^4.3.4" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/https-proxy-agent": { + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz", + "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==", + "dev": true, + "license": "MIT", + "dependencies": { + "agent-base": "^7.1.2", + "debug": "4" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/import-fresh": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz", + "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/ip-address": { + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-9.0.5.tgz", + "integrity": "sha512-zHtQzGojZXTwZTHQqra+ETKd4Sn3vgi7uBmlPoXVWZqYvuKmtI0l/VZTjqGmJY9x88GGOaZ9+G9ES8hC4T4X8g==", + "dev": true, + "license": "MIT", + "dependencies": { + "jsbn": "1.1.0", + "sprintf-js": "^1.1.3" + }, + "engines": { + "node": ">= 12" + } + }, + "node_modules/is-arrayish": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", + "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==", + "dev": true, + "license": "MIT" + }, + "node_modules/is-fullwidth-code-point": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/js-yaml": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", + "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", + "dev": true, + "license": "MIT", + "dependencies": { + "argparse": "^2.0.1" + }, + "bin": { + "js-yaml": "bin/js-yaml.js" + } + }, + "node_modules/jsbn": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-1.1.0.tgz", + "integrity": "sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==", + "dev": true, + "license": "MIT" + }, + "node_modules/json-parse-even-better-errors": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", + "dev": true, + "license": "MIT" + }, + "node_modules/lines-and-columns": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", + "dev": true, + "license": "MIT" + }, + "node_modules/lru-cache": { + "version": "7.18.3", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz", + "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">=12" + } + }, + "node_modules/mitt": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz", + "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==", + "dev": true, + "license": "MIT" + }, + "node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "dev": true, + "license": "MIT" + }, + "node_modules/netmask": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/netmask/-/netmask-2.0.2.tgz", + "integrity": "sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.4.0" + } + }, + "node_modules/once": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", + "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", + "dev": true, + "license": "ISC", + "dependencies": { + "wrappy": "1" + } + }, + "node_modules/pac-proxy-agent": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/pac-proxy-agent/-/pac-proxy-agent-7.2.0.tgz", + "integrity": "sha512-TEB8ESquiLMc0lV8vcd5Ql/JAKAoyzHFXaStwjkzpOpC5Yv+pIzLfHvjTSdf3vpa2bMiUQrg9i6276yn8666aA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@tootallnate/quickjs-emscripten": "^0.23.0", + "agent-base": "^7.1.2", + "debug": "^4.3.4", + "get-uri": "^6.0.1", + "http-proxy-agent": "^7.0.0", + "https-proxy-agent": "^7.0.6", + "pac-resolver": "^7.0.1", + "socks-proxy-agent": "^8.0.5" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/pac-resolver": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/pac-resolver/-/pac-resolver-7.0.1.tgz", + "integrity": "sha512-5NPgf87AT2STgwa2ntRMr45jTKrYBGkVU36yT0ig/n/GMAa3oPqhZfIQ2kMEimReg0+t9kZViDVZ83qfVUlckg==", + "dev": true, + "license": "MIT", + "dependencies": { + "degenerator": "^5.0.0", + "netmask": "^2.0.2" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/parent-module": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", + "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", + "dev": true, + "license": "MIT", + "dependencies": { + "callsites": "^3.0.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/parse-json": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", + "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.0.0", + "error-ex": "^1.3.1", + "json-parse-even-better-errors": "^2.3.0", + "lines-and-columns": "^1.1.6" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/pend": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz", + "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==", + "dev": true, + "license": "MIT" + }, + "node_modules/picocolors": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", + "dev": true, + "license": "ISC" + }, + "node_modules/progress": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz", + "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/proxy-agent": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/proxy-agent/-/proxy-agent-6.5.0.tgz", + "integrity": "sha512-TmatMXdr2KlRiA2CyDu8GqR8EjahTG3aY3nXjdzFyoZbmB8hrBsTyMezhULIXKnC0jpfjlmiZ3+EaCzoInSu/A==", + "dev": true, + "license": "MIT", + "dependencies": { + "agent-base": "^7.1.2", + "debug": "^4.3.4", + "http-proxy-agent": "^7.0.1", + "https-proxy-agent": "^7.0.6", + "lru-cache": "^7.14.1", + "pac-proxy-agent": "^7.1.0", + "proxy-from-env": "^1.1.0", + "socks-proxy-agent": "^8.0.5" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==", + "dev": true, + "license": "MIT" + }, + "node_modules/pump": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz", + "integrity": "sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==", + "dev": true, + "license": "MIT", + "dependencies": { + "end-of-stream": "^1.1.0", + "once": "^1.3.1" + } + }, + "node_modules/puppeteer": { + "version": "24.6.0", + "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-24.6.0.tgz", + "integrity": "sha512-wYTB8WkzAr7acrlsp+0at1PZjOJPOxe6dDWKOG/kaX4Zjck9RXCFx3CtsxsAGzPn/Yv6AzgJC/CW1P5l+qxsqw==", + "dev": true, + "hasInstallScript": true, + "license": "Apache-2.0", + "dependencies": { + "@puppeteer/browsers": "2.9.0", + "chromium-bidi": "3.0.0", + "cosmiconfig": "^9.0.0", + "devtools-protocol": "0.0.1425554", + "puppeteer-core": "24.6.0", + "typed-query-selector": "^2.12.0" + }, + "bin": { + "puppeteer": "lib/cjs/puppeteer/node/cli.js" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/puppeteer-core": { + "version": "24.6.0", + "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-24.6.0.tgz", + "integrity": "sha512-Cukxysy12m0v350bhl/Gzof0XQYmtON9l2VvGp3D4BOQZVgyf+y5wIpcjDZQ/896Okoi95dKRGRV8E6a7SYAQQ==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@puppeteer/browsers": "2.9.0", + "chromium-bidi": "3.0.0", + "debug": "^4.4.0", + "devtools-protocol": "0.0.1425554", + "typed-query-selector": "^2.12.0", + "ws": "^8.18.1" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/require-directory": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", + "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=4" + } + }, + "node_modules/semver": { + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/smart-buffer": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz", + "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 6.0.0", + "npm": ">= 3.0.0" + } + }, + "node_modules/socks": { + "version": "2.8.4", + "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.4.tgz", + "integrity": "sha512-D3YaD0aRxR3mEcqnidIs7ReYJFVzWdd6fXJYUM8ixcQcJRGTka/b3saV0KflYhyVJXKhb947GndU35SxYNResQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ip-address": "^9.0.5", + "smart-buffer": "^4.2.0" + }, + "engines": { + "node": ">= 10.0.0", + "npm": ">= 3.0.0" + } + }, + "node_modules/socks-proxy-agent": { + "version": "8.0.5", + "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.5.tgz", + "integrity": "sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==", + "dev": true, + "license": "MIT", + "dependencies": { + "agent-base": "^7.1.2", + "debug": "^4.3.4", + "socks": "^2.8.3" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "license": "BSD-3-Clause", + "optional": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/sprintf-js": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz", + "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==", + "dev": true, + "license": "BSD-3-Clause" + }, + "node_modules/streamx": { + "version": "2.22.0", + "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.22.0.tgz", + "integrity": "sha512-sLh1evHOzBy/iWRiR6d1zRcLao4gGZr3C1kzNz4fopCOKJb6xD9ub8Mpi9Mr1R6id5o43S+d93fI48UC5uM9aw==", + "dev": true, + "license": "MIT", + "dependencies": { + "fast-fifo": "^1.3.2", + "text-decoder": "^1.1.0" + }, + "optionalDependencies": { + "bare-events": "^2.2.0" + } + }, + "node_modules/string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, + "license": "MIT", + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/tar-fs": { + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.8.tgz", + "integrity": "sha512-ZoROL70jptorGAlgAYiLoBLItEKw/fUxg9BSYK/dF/GAGYFJOJJJMvjPAKDJraCXFwadD456FCuvLWgfhMsPwg==", + "dev": true, + "license": "MIT", + "dependencies": { + "pump": "^3.0.0", + "tar-stream": "^3.1.5" + }, + "optionalDependencies": { + "bare-fs": "^4.0.1", + "bare-path": "^3.0.0" + } + }, + "node_modules/tar-stream": { + "version": "3.1.7", + "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.7.tgz", + "integrity": "sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "b4a": "^1.6.4", + "fast-fifo": "^1.2.0", + "streamx": "^2.15.0" + } + }, + "node_modules/text-decoder": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/text-decoder/-/text-decoder-1.2.3.tgz", + "integrity": "sha512-3/o9z3X0X0fTupwsYvR03pJ/DjWuqqrfwBgTQzdWDiQSm9KitAyz/9WqsT2JQW7KV2m+bC2ol/zqpW37NHxLaA==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "b4a": "^1.6.4" + } + }, + "node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", + "dev": true, + "license": "0BSD" + }, + "node_modules/typed-query-selector": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/typed-query-selector/-/typed-query-selector-2.12.0.tgz", + "integrity": "sha512-SbklCd1F0EiZOyPiW192rrHZzZ5sBijB6xM+cpmrwDqObvdtunOHHIk9fCGsoK5JVIYXoyEp4iEdE3upFH3PAg==", + "dev": true, + "license": "MIT" + }, + "node_modules/undici-types": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz", + "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==", + "dev": true, + "license": "MIT", + "optional": true + }, + "node_modules/wrap-ansi": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, + "node_modules/wrappy": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", + "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", + "dev": true, + "license": "ISC" + }, + "node_modules/ws": { + "version": "8.18.1", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.1.tgz", + "integrity": "sha512-RKW2aJZMXeMxVpnZ6bck+RswznaxmzdULiBr6KY7XkTnW8uvt0iT9H5DkHUChXrc+uurzwa0rVI16n/Xzjdz1w==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": ">=5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, + "node_modules/y18n": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", + "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">=10" + } + }, + "node_modules/yargs": { + "version": "17.7.2", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", + "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==", + "dev": true, + "license": "MIT", + "dependencies": { + "cliui": "^8.0.1", + "escalade": "^3.1.1", + "get-caller-file": "^2.0.5", + "require-directory": "^2.1.1", + "string-width": "^4.2.3", + "y18n": "^5.0.5", + "yargs-parser": "^21.1.1" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/yargs-parser": { + "version": "21.1.1", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz", + "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">=12" + } + }, + "node_modules/yauzl": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz", + "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==", + "dev": true, + "license": "MIT", + "dependencies": { + "buffer-crc32": "~0.2.3", + "fd-slicer": "~1.1.0" + } + }, + "node_modules/zod": { + "version": "3.24.2", + "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.2.tgz", + "integrity": "sha512-lY7CDW43ECgW9u1TcT3IoXHflywfVqDYze4waEz812jR/bZ8FHDsl7pFQoSZTz5N+2NqRXs8GBwnAwo3ZNxqhQ==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/colinhacks" + } + } + } +} diff --git a/Calorie_Counter/package.json b/Calorie_Counter/package.json new file mode 100644 index 0000000..163b49a --- /dev/null +++ b/Calorie_Counter/package.json @@ -0,0 +1,15 @@ +{ + "name": "Calorie Counter", + "version": "1.0.0", + "description": "freeCodeCamp Solutions: \"Learn Form Validation by Building a Calorie Counter\"", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "prepare": "git config core.hooksPath .git-hooks || echo 'Not in a git repo'" + }, + "keywords": ["JavaScript", "HTML5", "CSS", "DOM", "WebAPI"], + "author": "Andrii Kotsiuba", + "license": "MIT", + "devDependencies": { + "puppeteer": "^24.6.0" + } +} diff --git a/Calorie_Counter/steps/README.md b/Calorie_Counter/steps/README.md new file mode 100644 index 0000000..ed411bd --- /dev/null +++ b/Calorie_Counter/steps/README.md @@ -0,0 +1,369 @@ + + + +# Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68Step 69
Step 70Step 71Step 72Step 73Step 74
Step 75Step 76Step 77Step 78Step 79
Step 80Step 81Step 82Step 83Step 84
Step 85Step 86Step 87Step 88Step 89
Step 90Step 91Step 92Step 93Step 94
Step 95Step 96Step 97
+
+ +

preview

+ initial view + + +
+ +

Full Preview

+
+
Initial View
+ initial view +
Agter Adding Breakfast
+ after adding breakfast +
After Adding Lunch
+ after adding lunch +
After Adding Dinner
+ after adding dinner +
After Adding Snacks
+ after adding snacks +
After Adding Exercise
+ after adding exercise +
After pressing the 'Calculate Remaining Calories' button
+ after pressing calculate +
Full Preview
+ full preview +
After pressing the 'Clear' button
+ after pressing clear +
+ + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5DOM
JavaScriptCSSHTML5DOM
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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 @@ + + + +# Building a Calorie Counter + + +#### Description + +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. + +#### preview + +![preview 'Random Background Color Changer'](https://github.com/AndriiKot/JS__Validation_by_Building_a_Calorie_Counter__freeCodeCamp/blob/main/images/previews/preview_project.png) + +### technologies + + + + + + + + + + + + + + + + +
JavaScriptCSSHTML
+ + 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 @@ + + +# Building a Calorie Counter + +
+ +

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 + +![preview 'Random Background Color Changer'](https://github.com/AndriiKot/JS__Validation_by_Building_a_Calorie_Counter__freeCodeCamp/blob/main/images/previews/preview_step01.png) + +### technologies + + + + + + + + + + + + + + + + +
JavaScriptCSSHTML
+ + 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 @@ + + + +# Building a Calorie Counter + +
+ +

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

+ preview_step02 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[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 @@ + + + +# Building a Calorie Counter + +
+ +

Description of the Task

+
+

Step 3

+ + +
+ +

preview

+ preview_step03 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[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 @@ + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
+ + +
+ +
+ +

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

+ preview_step04 + +[back to top](#top) + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + +
+ +

index.html

+
+ +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+
+
+ + +``` + +[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

+
+
+ + +
+ Breakfast +
+
+
+
+
+ + 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 @@ + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5
+
+ +
+ +

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

+ preview_step05 + +[back to top](#top) + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + +
+ +

index.html

+
+ +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+
+
+ + +``` + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+
+
+ + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6
+
+ + +
+ +

Description of the Task

+
+

Step 6

+ +

Continuing the pattern, create a fieldset for dinner with the same nested elements.

+
+ +

preview

+ preview_step06 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+
+
+ + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+
+
+ + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7
+
+ + +
+ +

Description of the Task

+
+

Step 7

+ +

You need two more of these fieldset code blocks – one for snacks and one for exercise.

+
+ +

preview

+ preview_step07 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+
+
+ + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+
+
+ + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8
+
+ + +
+ +

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

+ preview_step08 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ +
+
+
+
+ + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ +
+
+
+
+ + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
+
+ + +
+ +

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

+ preview_step09 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+
+
+ + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+
+
+ + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10
+
+ + +
+ +

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

+ preview_step10 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+
+
+ + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+
+
+ + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11
+
+ + +
+ +

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

+ preview_step11 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+ + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+ + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12
+
+ + +
+ +

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

+ preview_step12 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13
+
+ + +
+ +

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

+ preview_step13 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
+
+ + +
+ +

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() method. Here's an example of how to use this method:

+
Example Code
<h1 id="title">Main 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

+ preview_step14 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15
+
+ + +
+ +

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

+ preview_step15 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16
+
+ + +
+ +

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

+ preview_step16 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17
+
+ + +
+ +

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

+ preview_step17 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18
+
+ + +
+ +

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

+ preview_step18 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
+
+ + +
+ +

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

+ preview_step19 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20
+
+ + +
+ +

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

+ preview_step20 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21
+
+ + +
+ +

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

+ preview_step21 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22
+
+ + +
+ +

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

+ preview_step22 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23
+
+ + +
+ +

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

+ preview_step23 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
+
+ + +
+ +

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

+ preview_step24 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25
+
+ + +
+ +

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

+ preview_step25 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26
+
+ + +
+ +

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

+ preview_step26 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27
+
+ + +
+ +

Description of the Task

+
+

Step 27

+ +
+

Once you have finished testing your cleanInputString function, you can remove both of your console statements.

+
+
+ +

preview

+ preview_step27 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28
+
+ + +
+ +

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

+ preview_step28 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
+
+ + +
+ +

Description of the Task

+
+

Step 29

+ +
+

Declare a regex variable, and assign it a regex that matches the character e.

+
+
+ +

preview

+ preview_step29 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30
+
+ + +
+ +

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

+ preview_step30 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31
+
+ + +
+ +

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

+ preview_step31 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32
+
+ + +
+ +

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

+ preview_step32 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33
+
+ + +
+ +

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

+ preview_step33 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
+
+ + +
+ +

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); // 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.

+
+
+ +

preview

+ preview_step34 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35
+
+ + +
+ +

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

+ preview_step35 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36
+
+ + +
+ +

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:

+ +

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

+ preview_step36 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37
+
+ + +
+ +

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

+ preview_step37 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38
+
+ + +
+ +

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

+ preview_step38 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
+
+ + +
+ +

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

+ preview_step39 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40
+
+ + +
+ +

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

+ preview_step40 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41
+
+ + +
+ +

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

+ preview_step41 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42
+
+ + +
+ +

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

+ preview_step42 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43
+
+ + +
+ +

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

+ preview_step43 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
+
+ + +
+ +

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

+ preview_step44 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45
+
+ + +
+ +

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

+ preview_step45 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46
+
+ + +
+ +

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

+ preview_step46 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47
+
+ + +
+ +

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

+ preview_step47 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ``; +}; 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48
+
+ + +
+ +

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

+ preview_step48 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + `; +}; 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
+
+ + +
+ +

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

+ preview_step49 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + `; +}; diff --git a/Calorie_Counter/steps/__49__step__/styles.css b/Calorie_Counter/steps/__49__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__49__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/__49__step__/title.txt b/Calorie_Counter/steps/__49__step__/title.txt new file mode 100644 index 0000000..3754ffa --- /dev/null +++ b/Calorie_Counter/steps/__49__step__/title.txt @@ -0,0 +1,10 @@ +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. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__50__step__/README.md b/Calorie_Counter/steps/__50__step__/README.md new file mode 100644 index 0000000..ffd3ebc --- /dev/null +++ b/Calorie_Counter/steps/__50__step__/README.md @@ -0,0 +1,285 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50
+
+ + +
+ +

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

+ preview_step50 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; +}; 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 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51
+
+ + +
+ +

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

+ preview_step51 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + + `; +}; diff --git a/Calorie_Counter/steps/__51__step__/styles.css b/Calorie_Counter/steps/__51__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__51__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/__51__step__/title.txt b/Calorie_Counter/steps/__51__step__/title.txt new file mode 100644 index 0000000..e51f30b --- /dev/null +++ b/Calorie_Counter/steps/__51__step__/title.txt @@ -0,0 +1,12 @@ +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. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__52__step__/README.md b/Calorie_Counter/steps/__52__step__/README.md new file mode 100644 index 0000000..4e02a89 --- /dev/null +++ b/Calorie_Counter/steps/__52__step__/README.md @@ -0,0 +1,303 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52
+
+ + +
+ +

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
<form id="form">
+  <label for="first-name">First name</label>
+  <input id="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

+ preview_step52 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + + `; + targetInputContainer.innerHTML += 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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + + `; + targetInputContainer.innerHTML += HTMLString; +}; diff --git a/Calorie_Counter/steps/__52__step__/styles.css b/Calorie_Counter/steps/__52__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__52__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/__52__step__/title.txt b/Calorie_Counter/steps/__52__step__/title.txt new file mode 100644 index 0000000..8029bf9 --- /dev/null +++ b/Calorie_Counter/steps/__52__step__/title.txt @@ -0,0 +1,34 @@ +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<form id="form"> + <label for="first-name">First name</label> + +<input id="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 Codeconst 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. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__53__step__/README.md b/Calorie_Counter/steps/__53__step__/README.md new file mode 100644 index 0000000..b1d09e0 --- /dev/null +++ b/Calorie_Counter/steps/__53__step__/README.md @@ -0,0 +1,302 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53
+
+ + +
+ +

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
<button class="btn">Print name</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

+ preview_step53 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + + `; + targetInputContainer.innerHTML += HTMLString; +}; + +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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + + `; + targetInputContainer.innerHTML += HTMLString; +}; + +addEntryButton.addEventListener('click', addEntry); + diff --git a/Calorie_Counter/steps/__53__step__/styles.css b/Calorie_Counter/steps/__53__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__53__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/__53__step__/title.txt b/Calorie_Counter/steps/__53__step__/title.txt new file mode 100644 index 0000000..672cad3 --- /dev/null +++ b/Calorie_Counter/steps/__53__step__/title.txt @@ -0,0 +1,35 @@ +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<button class="btn">Print name</button> + +Example Codeconst 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. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__54__step__/README.md b/Calorie_Counter/steps/__54__step__/README.md new file mode 100644 index 0000000..82004ea --- /dev/null +++ b/Calorie_Counter/steps/__54__step__/README.md @@ -0,0 +1,291 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
+
+ + +
+ +

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

+ preview_step54 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + + `; + targetInputContainer.innerHTML += HTMLString; +}; + +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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + + `; + targetInputContainer.innerHTML += HTMLString; +}; + +addEntryButton.addEventListener('click', addEntry); + diff --git a/Calorie_Counter/steps/__54__step__/styles.css b/Calorie_Counter/steps/__54__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__54__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/__54__step__/title.txt b/Calorie_Counter/steps/__54__step__/title.txt new file mode 100644 index 0000000..e346c6e --- /dev/null +++ b/Calorie_Counter/steps/__54__step__/title.txt @@ -0,0 +1,17 @@ +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. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__55__step__/README.md b/Calorie_Counter/steps/__55__step__/README.md new file mode 100644 index 0000000..d51a712 --- /dev/null +++ b/Calorie_Counter/steps/__55__step__/README.md @@ -0,0 +1,291 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55
+
+ + +
+ +

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

+ preview_step55 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + + `; + targetInputContainer.insertAdjacentHTML(); +}; + +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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + + `; + targetInputContainer.insertAdjacentHTML(); +}; + +addEntryButton.addEventListener('click', addEntry); + diff --git a/Calorie_Counter/steps/__55__step__/styles.css b/Calorie_Counter/steps/__55__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__55__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/__55__step__/title.txt b/Calorie_Counter/steps/__55__step__/title.txt new file mode 100644 index 0000000..f6b2c05 --- /dev/null +++ b/Calorie_Counter/steps/__55__step__/title.txt @@ -0,0 +1,13 @@ +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. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__56__step__/README.md b/Calorie_Counter/steps/__56__step__/README.md new file mode 100644 index 0000000..080cb07 --- /dev/null +++ b/Calorie_Counter/steps/__56__step__/README.md @@ -0,0 +1,292 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56
+
+ + +
+ +

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

+ preview_step56 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +}; + +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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +}; + +addEntryButton.addEventListener('click', addEntry); + diff --git a/Calorie_Counter/steps/__56__step__/styles.css b/Calorie_Counter/steps/__56__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__56__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/__56__step__/title.txt b/Calorie_Counter/steps/__56__step__/title.txt new file mode 100644 index 0000000..5cd3045 --- /dev/null +++ b/Calorie_Counter/steps/__56__step__/title.txt @@ -0,0 +1,14 @@ +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. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__57__step__/README.md b/Calorie_Counter/steps/__57__step__/README.md new file mode 100644 index 0000000..2178711 --- /dev/null +++ b/Calorie_Counter/steps/__57__step__/README.md @@ -0,0 +1,294 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57
+
+ + +
+ +

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

+ preview_step57 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +}; + +const getCaloriesFromInputs = (list) => {}; + +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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +}; + +const getCaloriesFromInputs = (list) => {}; + +addEntryButton.addEventListener('click', addEntry); + diff --git a/Calorie_Counter/steps/__57__step__/styles.css b/Calorie_Counter/steps/__57__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__57__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/__57__step__/title.txt b/Calorie_Counter/steps/__57__step__/title.txt new file mode 100644 index 0000000..1102d5c --- /dev/null +++ b/Calorie_Counter/steps/__57__step__/title.txt @@ -0,0 +1,11 @@ +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. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__58__step__/README.md b/Calorie_Counter/steps/__58__step__/README.md new file mode 100644 index 0000000..1b0b21e --- /dev/null +++ b/Calorie_Counter/steps/__58__step__/README.md @@ -0,0 +1,294 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58
+
+ + +
+ +

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

+ preview_step58 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +}; + +const getCaloriesFromInputs = (list) => { + let calories = 0; +}; + +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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +}; + +const getCaloriesFromInputs = (list) => { + let calories = 0; +}; + +addEntryButton.addEventListener('click', addEntry); + diff --git a/Calorie_Counter/steps/__58__step__/styles.css b/Calorie_Counter/steps/__58__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__58__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/__58__step__/title.txt b/Calorie_Counter/steps/__58__step__/title.txt new file mode 100644 index 0000000..2de1f70 --- /dev/null +++ b/Calorie_Counter/steps/__58__step__/title.txt @@ -0,0 +1,7 @@ +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. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__59__step__/README.md b/Calorie_Counter/steps/__59__step__/README.md new file mode 100644 index 0000000..7bc45f3 --- /dev/null +++ b/Calorie_Counter/steps/__59__step__/README.md @@ -0,0 +1,302 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
+
+ + +
+ +

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

+ preview_step59 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +}; + +const getCaloriesFromInputs = (list) => { + let calories = 0; + for(const item of list) {}; +}; + +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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +}; + +const getCaloriesFromInputs = (list) => { + let calories = 0; + for(const item of list) {}; +}; + +addEntryButton.addEventListener('click', addEntry); + diff --git a/Calorie_Counter/steps/__59__step__/styles.css b/Calorie_Counter/steps/__59__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__59__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/__59__step__/title.txt b/Calorie_Counter/steps/__59__step__/title.txt new file mode 100644 index 0000000..aa2dfab --- /dev/null +++ b/Calorie_Counter/steps/__59__step__/title.txt @@ -0,0 +1,30 @@ +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 Codefor (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. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__60__step__/README.md b/Calorie_Counter/steps/__60__step__/README.md new file mode 100644 index 0000000..6656ba7 --- /dev/null +++ b/Calorie_Counter/steps/__60__step__/README.md @@ -0,0 +1,298 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60
+
+ + +
+ +

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

+ preview_step60 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +}; + +const getCaloriesFromInputs = (list) => { + let calories = 0; + for(const item of list) { + const currVal = item.value; + }; +}; + +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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +}; + +const getCaloriesFromInputs = (list) => { + let calories = 0; + for(const item of list) { + const currVal = item.value; + }; +}; + +addEntryButton.addEventListener('click', addEntry); + diff --git a/Calorie_Counter/steps/__60__step__/styles.css b/Calorie_Counter/steps/__60__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__60__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/__60__step__/title.txt b/Calorie_Counter/steps/__60__step__/title.txt new file mode 100644 index 0000000..2e32caa --- /dev/null +++ b/Calorie_Counter/steps/__60__step__/title.txt @@ -0,0 +1,9 @@ +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. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__61__step__/README.md b/Calorie_Counter/steps/__61__step__/README.md new file mode 100644 index 0000000..f9610cf --- /dev/null +++ b/Calorie_Counter/steps/__61__step__/README.md @@ -0,0 +1,298 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61
+
+ + +
+ +

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

+ preview_step61 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +}; + +const getCaloriesFromInputs = (list) => { + let calories = 0; + for(const item of list) { + const currVal = cleanInputString(item.value); + }; +}; + +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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +}; + +const getCaloriesFromInputs = (list) => { + let calories = 0; + for(const item of list) { + const currVal = cleanInputString(item.value); + }; +}; + +addEntryButton.addEventListener('click', addEntry); + diff --git a/Calorie_Counter/steps/__61__step__/styles.css b/Calorie_Counter/steps/__61__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__61__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/__61__step__/title.txt b/Calorie_Counter/steps/__61__step__/title.txt new file mode 100644 index 0000000..1b91599 --- /dev/null +++ b/Calorie_Counter/steps/__61__step__/title.txt @@ -0,0 +1,9 @@ +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. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__62__step__/README.md b/Calorie_Counter/steps/__62__step__/README.md new file mode 100644 index 0000000..2614ec7 --- /dev/null +++ b/Calorie_Counter/steps/__62__step__/README.md @@ -0,0 +1,298 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62
+
+ + +
+ +

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

+ preview_step62 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +}; + +const getCaloriesFromInputs = (list) => { + let calories = 0; + for(const item of list) { + const currVal = cleanInputString(item.value); + const invalidInputMatch = isInvalidInput(currVal); + }; +}; + +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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +}; + +const getCaloriesFromInputs = (list) => { + let calories = 0; + for(const item of list) { + const currVal = cleanInputString(item.value); + const invalidInputMatch = isInvalidInput(currVal); + }; +}; + +addEntryButton.addEventListener('click', addEntry); + diff --git a/Calorie_Counter/steps/__62__step__/styles.css b/Calorie_Counter/steps/__62__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__62__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/__62__step__/title.txt b/Calorie_Counter/steps/__62__step__/title.txt new file mode 100644 index 0000000..ce48d7d --- /dev/null +++ b/Calorie_Counter/steps/__62__step__/title.txt @@ -0,0 +1,8 @@ +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. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__63__step__/README.md b/Calorie_Counter/steps/__63__step__/README.md new file mode 100644 index 0000000..bd79054 --- /dev/null +++ b/Calorie_Counter/steps/__63__step__/README.md @@ -0,0 +1,308 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63
+
+ + +
+ +

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

+ preview_step63 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +}; + +const getCaloriesFromInputs = (list) => { + let calories = 0; + for(const item of list) { + const currVal = cleanInputString(item.value); + const invalidInputMatch = isInvalidInput(currVal); + if (invalidInputMatch) { + + } + }; +}; + +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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +}; + +const getCaloriesFromInputs = (list) => { + let calories = 0; + for(const item of list) { + const currVal = cleanInputString(item.value); + const invalidInputMatch = isInvalidInput(currVal); + if (invalidInputMatch) { + + } + }; +}; + +addEntryButton.addEventListener('click', addEntry); + diff --git a/Calorie_Counter/steps/__63__step__/styles.css b/Calorie_Counter/steps/__63__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__63__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/__63__step__/title.txt b/Calorie_Counter/steps/__63__step__/title.txt new file mode 100644 index 0000000..ac35e1e --- /dev/null +++ b/Calorie_Counter/steps/__63__step__/title.txt @@ -0,0 +1,26 @@ +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 Codeif (helloWorld) { + +} + +Add an if +statement that checks if invalidInputMatch is truthy. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__64__step__/README.md b/Calorie_Counter/steps/__64__step__/README.md new file mode 100644 index 0000000..0c3e15c --- /dev/null +++ b/Calorie_Counter/steps/__64__step__/README.md @@ -0,0 +1,304 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
+
+ + +
+ +

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

+ preview_step64 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +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]}`); + } + } +} + +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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +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]}`); + } + } +} + +addEntryButton.addEventListener("click", addEntry); \ No newline at end of file diff --git a/Calorie_Counter/steps/__64__step__/styles.css b/Calorie_Counter/steps/__64__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__64__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/__64__step__/title.txt b/Calorie_Counter/steps/__64__step__/title.txt new file mode 100644 index 0000000..2c9fd6c --- /dev/null +++ b/Calorie_Counter/steps/__64__step__/title.txt @@ -0,0 +1,13 @@ +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. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__65__step__/README.md b/Calorie_Counter/steps/__65__step__/README.md new file mode 100644 index 0000000..37c6cd7 --- /dev/null +++ b/Calorie_Counter/steps/__65__step__/README.md @@ -0,0 +1,306 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65
+
+ + +
+ +

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

+ preview_step65 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +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; + } + } +} + +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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +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; + } + } +} + +addEntryButton.addEventListener("click", addEntry); \ No newline at end of file diff --git a/Calorie_Counter/steps/__65__step__/styles.css b/Calorie_Counter/steps/__65__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__65__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/__65__step__/title.txt b/Calorie_Counter/steps/__65__step__/title.txt new file mode 100644 index 0000000..45b4272 --- /dev/null +++ b/Calorie_Counter/steps/__65__step__/title.txt @@ -0,0 +1,12 @@ +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. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__66__step__/README.md b/Calorie_Counter/steps/__66__step__/README.md new file mode 100644 index 0000000..8ecac09 --- /dev/null +++ b/Calorie_Counter/steps/__66__step__/README.md @@ -0,0 +1,312 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66
+
+ + +
+ +

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'); // returns the number 10
+Number('abc'); // returns NaN
+
+
+
+ +

preview

+ preview_step66 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +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); + } +} + +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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +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); + } +} + +addEntryButton.addEventListener("click", addEntry); \ No newline at end of file diff --git a/Calorie_Counter/steps/__66__step__/styles.css b/Calorie_Counter/steps/__66__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__66__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/__66__step__/title.txt b/Calorie_Counter/steps/__66__step__/title.txt new file mode 100644 index 0000000..0844230 --- /dev/null +++ b/Calorie_Counter/steps/__66__step__/title.txt @@ -0,0 +1,24 @@ +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 CodeNumber('10'); // returns +the number 10 +Number('abc'); // returns NaN + + \ No newline at end of file diff --git a/Calorie_Counter/steps/__67__step__/README.md b/Calorie_Counter/steps/__67__step__/README.md new file mode 100644 index 0000000..221f626 --- /dev/null +++ b/Calorie_Counter/steps/__67__step__/README.md @@ -0,0 +1,307 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67
+
+ + +
+ +

Description of the Task

+
+

Step 67

+ +
+

After your for loop has completed, return the calories value.

+
+
+ +

preview

+ preview_step67 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +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/__67__step__/styles.css b/Calorie_Counter/steps/__67__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__67__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/__67__step__/title.txt b/Calorie_Counter/steps/__67__step__/title.txt new file mode 100644 index 0000000..84a081b --- /dev/null +++ b/Calorie_Counter/steps/__67__step__/title.txt @@ -0,0 +1,5 @@ +Step 67 + +After your for loop has +completed, return the calories value. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__68__step__/README.md b/Calorie_Counter/steps/__68__step__/README.md new file mode 100644 index 0000000..e350764 --- /dev/null +++ b/Calorie_Counter/steps/__68__step__/README.md @@ -0,0 +1,310 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68
+
+ + +
+ +

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

+ preview_step68 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +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 calculateCalories(e) { +}; + +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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +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 calculateCalories(e) { +}; + +addEntryButton.addEventListener("click", addEntry); \ No newline at end of file diff --git a/Calorie_Counter/steps/__68__step__/styles.css b/Calorie_Counter/steps/__68__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__68__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/__68__step__/title.txt b/Calorie_Counter/steps/__68__step__/title.txt new file mode 100644 index 0000000..6c6d10d --- /dev/null +++ b/Calorie_Counter/steps/__68__step__/title.txt @@ -0,0 +1,10 @@ +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. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__69__step__/README.md b/Calorie_Counter/steps/__69__step__/README.md new file mode 100644 index 0000000..69b5ddc --- /dev/null +++ b/Calorie_Counter/steps/__69__step__/README.md @@ -0,0 +1,313 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68Step 69
+
+ + +
+ +

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

+ preview_step69 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +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 calculateCalories(e) { + e.preventDefault(); + isError = false; +}; + +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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +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 calculateCalories(e) { + e.preventDefault(); + isError = false; +}; + +addEntryButton.addEventListener("click", addEntry); \ No newline at end of file diff --git a/Calorie_Counter/steps/__69__step__/styles.css b/Calorie_Counter/steps/__69__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__69__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/__69__step__/title.txt b/Calorie_Counter/steps/__69__step__/title.txt new file mode 100644 index 0000000..da43fd3 --- /dev/null +++ b/Calorie_Counter/steps/__69__step__/title.txt @@ -0,0 +1,15 @@ +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. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__70__step__/README.md b/Calorie_Counter/steps/__70__step__/README.md new file mode 100644 index 0000000..5c53251 --- /dev/null +++ b/Calorie_Counter/steps/__70__step__/README.md @@ -0,0 +1,314 @@ + + + +# Building a Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68Step 69
Step 70
+
+ + +
+ +

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

+ preview_step70 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +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 calculateCalories(e) { + e.preventDefault(); + isError = false; + const breakfastNumberInputs = document.querySelectorAll(`#breakfast input[type='number']`); +}; + +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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +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 calculateCalories(e) { + e.preventDefault(); + isError = false; + const breakfastNumberInputs = document.querySelectorAll(`#breakfast input[type='number']`); +}; + +addEntryButton.addEventListener("click", addEntry); \ No newline at end of file diff --git a/Calorie_Counter/steps/__70__step__/styles.css b/Calorie_Counter/steps/__70__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__70__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/__70__step__/title.txt b/Calorie_Counter/steps/__70__step__/title.txt new file mode 100644 index 0000000..7ac7d58 --- /dev/null +++ b/Calorie_Counter/steps/__70__step__/title.txt @@ -0,0 +1,11 @@ +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. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__71__step__/README.md b/Calorie_Counter/steps/__71__step__/README.md new file mode 100644 index 0000000..4893ca1 --- /dev/null +++ b/Calorie_Counter/steps/__71__step__/README.md @@ -0,0 +1,314 @@ + + + +# Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68Step 69
Step 70Step 71
+
+ + +
+ +

Description of the Task

+
+

Step 71

+ +
+

Using that same syntax, query your number inputs in the #lunch element and assign them to lunchNumberInputs.

+
+
+ +

preview

+ preview_step71 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5
JavaScriptCSSHTML5
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +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 calculateCalories(e) { + e.preventDefault(); + isError = false; + const breakfastNumberInputs = document.querySelectorAll(`#breakfast input[type='number']`); + const lunchNumberInputs = document.querySelectorAll(`#lunch input[type='number']`); +}; + +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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +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 calculateCalories(e) { + e.preventDefault(); + isError = false; + const breakfastNumberInputs = document.querySelectorAll(`#breakfast input[type='number']`); + const lunchNumberInputs = document.querySelectorAll(`#lunch input[type='number']`); +}; + +addEntryButton.addEventListener("click", addEntry); \ No newline at end of file diff --git a/Calorie_Counter/steps/__71__step__/styles.css b/Calorie_Counter/steps/__71__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__71__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/__71__step__/title.txt b/Calorie_Counter/steps/__71__step__/title.txt new file mode 100644 index 0000000..1f0522c --- /dev/null +++ b/Calorie_Counter/steps/__71__step__/title.txt @@ -0,0 +1,6 @@ +Step 71 + +Using that same syntax, query +your number inputs in the #lunch element +and assign them to lunchNumberInputs. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__72__step__/README.md b/Calorie_Counter/steps/__72__step__/README.md new file mode 100644 index 0000000..3269d62 --- /dev/null +++ b/Calorie_Counter/steps/__72__step__/README.md @@ -0,0 +1,317 @@ + + + +# Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68Step 69
Step 70Step 71Step 72
+
+ + +
+ +

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

+ preview_step72 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5DOM
JavaScriptCSSHTML5DOM
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +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 calculateCalories(e) { + e.preventDefault(); + isError = false; + const breakfastNumberInputs = document.querySelectorAll(`#breakfast input[type='number']`); + const lunchNumberInputs = document.querySelectorAll(`#lunch input[type='number']`); + const dinnerNumberInputs = document.querySelectorAll(`#dinner input[type='number']`); + const snacksNumberInputs = document.querySelectorAll(`#snacks input[type='number']`); + const exerciseNumberInputs = document.querySelectorAll(`#exercise input[type='number']`); +}; + +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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +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 calculateCalories(e) { + e.preventDefault(); + isError = false; + const breakfastNumberInputs = document.querySelectorAll(`#breakfast input[type='number']`); + const lunchNumberInputs = document.querySelectorAll(`#lunch input[type='number']`); + const dinnerNumberInputs = document.querySelectorAll(`#dinner input[type='number']`); + const snacksNumberInputs = document.querySelectorAll(`#snacks input[type='number']`); + const exerciseNumberInputs = document.querySelectorAll(`#exercise input[type='number']`); +}; + +addEntryButton.addEventListener("click", addEntry); \ No newline at end of file diff --git a/Calorie_Counter/steps/__72__step__/styles.css b/Calorie_Counter/steps/__72__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__72__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/__72__step__/title.txt b/Calorie_Counter/steps/__72__step__/title.txt new file mode 100644 index 0000000..8fe9547 --- /dev/null +++ b/Calorie_Counter/steps/__72__step__/title.txt @@ -0,0 +1,8 @@ +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. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__73__step__/README.md b/Calorie_Counter/steps/__73__step__/README.md new file mode 100644 index 0000000..5152a93 --- /dev/null +++ b/Calorie_Counter/steps/__73__step__/README.md @@ -0,0 +1,320 @@ + + + +# Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68Step 69
Step 70Step 71Step 72Step 73
+
+ + +
+ +

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

+ preview_step73 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5DOM
JavaScriptCSSHTML5DOM
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +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 calculateCalories(e) { + e.preventDefault(); + isError = false; + const breakfastNumberInputs = document.querySelectorAll(`#breakfast input[type='number']`); + const lunchNumberInputs = document.querySelectorAll(`#lunch input[type='number']`); + const dinnerNumberInputs = document.querySelectorAll(`#dinner input[type='number']`); + const snacksNumberInputs = document.querySelectorAll(`#snacks input[type='number']`); + const exerciseNumberInputs = document.querySelectorAll(`#exercise input[type='number']`); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); +}; + +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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +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 calculateCalories(e) { + e.preventDefault(); + isError = false; + const breakfastNumberInputs = document.querySelectorAll(`#breakfast input[type='number']`); + const lunchNumberInputs = document.querySelectorAll(`#lunch input[type='number']`); + const dinnerNumberInputs = document.querySelectorAll(`#dinner input[type='number']`); + const snacksNumberInputs = document.querySelectorAll(`#snacks input[type='number']`); + const exerciseNumberInputs = document.querySelectorAll(`#exercise input[type='number']`); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); +}; + +addEntryButton.addEventListener("click", addEntry); \ No newline at end of file diff --git a/Calorie_Counter/steps/__73__step__/styles.css b/Calorie_Counter/steps/__73__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__73__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/__73__step__/title.txt b/Calorie_Counter/steps/__73__step__/title.txt new file mode 100644 index 0000000..b45c1b7 --- /dev/null +++ b/Calorie_Counter/steps/__73__step__/title.txt @@ -0,0 +1,10 @@ +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. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__74__step__/README.md b/Calorie_Counter/steps/__74__step__/README.md new file mode 100644 index 0000000..773baa7 --- /dev/null +++ b/Calorie_Counter/steps/__74__step__/README.md @@ -0,0 +1,320 @@ + + + +# Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68Step 69
Step 70Step 71Step 72Step 73Step 74
+
+ + +
+ +

Description of the Task

+
+

Step 74

+ +
+

Now declare a lunchCalories variable, and give it the value of calling getCaloriesFromInputs with your lunchNumberInputs.

+
+
+ +

preview

+ preview_step74 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5DOM
JavaScriptCSSHTML5DOM
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +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 calculateCalories(e) { + e.preventDefault(); + isError = false; + const breakfastNumberInputs = document.querySelectorAll(`#breakfast input[type='number']`); + const lunchNumberInputs = document.querySelectorAll(`#lunch input[type='number']`); + const dinnerNumberInputs = document.querySelectorAll(`#dinner input[type='number']`); + const snacksNumberInputs = document.querySelectorAll(`#snacks input[type='number']`); + const exerciseNumberInputs = document.querySelectorAll(`#exercise input[type='number']`); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); +}; + +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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +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 calculateCalories(e) { + e.preventDefault(); + isError = false; + const breakfastNumberInputs = document.querySelectorAll(`#breakfast input[type='number']`); + const lunchNumberInputs = document.querySelectorAll(`#lunch input[type='number']`); + const dinnerNumberInputs = document.querySelectorAll(`#dinner input[type='number']`); + const snacksNumberInputs = document.querySelectorAll(`#snacks input[type='number']`); + const exerciseNumberInputs = document.querySelectorAll(`#exercise input[type='number']`); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); +}; + +addEntryButton.addEventListener("click", addEntry); \ No newline at end of file diff --git a/Calorie_Counter/steps/__74__step__/styles.css b/Calorie_Counter/steps/__74__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__74__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/__74__step__/title.txt b/Calorie_Counter/steps/__74__step__/title.txt new file mode 100644 index 0000000..d580e56 --- /dev/null +++ b/Calorie_Counter/steps/__74__step__/title.txt @@ -0,0 +1,6 @@ +Step 74 + +Now declare a lunchCalories variable, +and give it the value of calling +getCaloriesFromInputs with your lunchNumberInputs. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__75__step__/README.md b/Calorie_Counter/steps/__75__step__/README.md new file mode 100644 index 0000000..ddedf97 --- /dev/null +++ b/Calorie_Counter/steps/__75__step__/README.md @@ -0,0 +1,323 @@ + + + +# Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68Step 69
Step 70Step 71Step 72Step 73Step 74
Step 75
+
+ + +
+ +

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

+ preview_step75 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5DOM
JavaScriptCSSHTML5DOM
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +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 calculateCalories(e) { + e.preventDefault(); + isError = false; + const breakfastNumberInputs = document.querySelectorAll(`#breakfast input[type='number']`); + const lunchNumberInputs = document.querySelectorAll(`#lunch input[type='number']`); + const dinnerNumberInputs = document.querySelectorAll(`#dinner input[type='number']`); + const snacksNumberInputs = document.querySelectorAll(`#snacks input[type='number']`); + const exerciseNumberInputs = document.querySelectorAll(`#exercise input[type='number']`); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); +}; + +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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +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 calculateCalories(e) { + e.preventDefault(); + isError = false; + const breakfastNumberInputs = document.querySelectorAll(`#breakfast input[type='number']`); + const lunchNumberInputs = document.querySelectorAll(`#lunch input[type='number']`); + const dinnerNumberInputs = document.querySelectorAll(`#dinner input[type='number']`); + const snacksNumberInputs = document.querySelectorAll(`#snacks input[type='number']`); + const exerciseNumberInputs = document.querySelectorAll(`#exercise input[type='number']`); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); +}; + +addEntryButton.addEventListener("click", addEntry); \ No newline at end of file diff --git a/Calorie_Counter/steps/__75__step__/styles.css b/Calorie_Counter/steps/__75__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__75__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/__75__step__/title.txt b/Calorie_Counter/steps/__75__step__/title.txt new file mode 100644 index 0000000..de4edf1 --- /dev/null +++ b/Calorie_Counter/steps/__75__step__/title.txt @@ -0,0 +1,7 @@ +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. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__76__step__/README.md b/Calorie_Counter/steps/__76__step__/README.md new file mode 100644 index 0000000..985cdc7 --- /dev/null +++ b/Calorie_Counter/steps/__76__step__/README.md @@ -0,0 +1,328 @@ + + + +# Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68Step 69
Step 70Step 71Step 72Step 73Step 74
Step 75Step 76
+
+ + +
+ +

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

+ preview_step76 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5DOM
JavaScriptCSSHTML5DOM
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + let budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + +} + +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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + let budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + +} + +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/__76__step__/styles.css b/Calorie_Counter/steps/__76__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__76__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/__76__step__/title.txt b/Calorie_Counter/steps/__76__step__/title.txt new file mode 100644 index 0000000..2848efa --- /dev/null +++ b/Calorie_Counter/steps/__76__step__/title.txt @@ -0,0 +1,20 @@ +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. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__77__step__/README.md b/Calorie_Counter/steps/__77__step__/README.md new file mode 100644 index 0000000..88e5e78 --- /dev/null +++ b/Calorie_Counter/steps/__77__step__/README.md @@ -0,0 +1,328 @@ + + + +# Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68Step 69
Step 70Step 71Step 72Step 73Step 74
Step 75Step 76Step 77
+
+ + +
+ +

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

+ preview_step77 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5DOM
JavaScriptCSSHTML5DOM
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if(isError) return; +} + +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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if(isError) return; +} + +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/__77__step__/styles.css b/Calorie_Counter/steps/__77__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__77__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/__77__step__/title.txt b/Calorie_Counter/steps/__77__step__/title.txt new file mode 100644 index 0000000..3dd044d --- /dev/null +++ b/Calorie_Counter/steps/__77__step__/title.txt @@ -0,0 +1,11 @@ +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. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__78__step__/README.md b/Calorie_Counter/steps/__78__step__/README.md new file mode 100644 index 0000000..b1d1cfd --- /dev/null +++ b/Calorie_Counter/steps/__78__step__/README.md @@ -0,0 +1,329 @@ + + + +# Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68Step 69
Step 70Step 71Step 72Step 73Step 74
Step 75Step 76Step 77Step 78
+
+ + +
+ +

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

+ preview_step78 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5DOM
JavaScriptCSSHTML5DOM
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if(isError) return; + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; +} + +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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if(isError) return; + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; +} + +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/__78__step__/styles.css b/Calorie_Counter/steps/__78__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__78__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/__78__step__/title.txt b/Calorie_Counter/steps/__78__step__/title.txt new file mode 100644 index 0000000..7e615fb --- /dev/null +++ b/Calorie_Counter/steps/__78__step__/title.txt @@ -0,0 +1,10 @@ +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. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__79__step__/README.md b/Calorie_Counter/steps/__79__step__/README.md new file mode 100644 index 0000000..6c4a2ef --- /dev/null +++ b/Calorie_Counter/steps/__79__step__/README.md @@ -0,0 +1,330 @@ + + + +# Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68Step 69
Step 70Step 71Step 72Step 73Step 74
Step 75Step 76Step 77Step 78Step 79
+
+ + +
+ +

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

+ preview_step79 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5DOM
JavaScriptCSSHTML5DOM
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if(isError) return; + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; +} + +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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if(isError) return; + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; +} + +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/__79__step__/styles.css b/Calorie_Counter/steps/__79__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__79__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/__79__step__/title.txt b/Calorie_Counter/steps/__79__step__/title.txt new file mode 100644 index 0000000..7f735de --- /dev/null +++ b/Calorie_Counter/steps/__79__step__/title.txt @@ -0,0 +1,6 @@ +Step 79 + +Now declare a remainingCalories variable, +and give it the value of subtracting +consumedCalories from budgetCalories and adding exerciseCalories. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__80__step__/README.md b/Calorie_Counter/steps/__80__step__/README.md new file mode 100644 index 0000000..64021c3 --- /dev/null +++ b/Calorie_Counter/steps/__80__step__/README.md @@ -0,0 +1,336 @@ + + + +# Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68Step 69
Step 70Step 71Step 72Step 73Step 74
Step 75Step 76Step 77Step 78Step 79
Step 80
+
+ + +
+ +

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

+ preview_step80 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5DOM
JavaScriptCSSHTML5DOM
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + + const surplusOrDeficit = remainingCalories < 0 ? "Surplus" : "Deficit" + +} + +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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + + const surplusOrDeficit = remainingCalories < 0 ? "Surplus" : "Deficit" + +} + +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/__80__step__/styles.css b/Calorie_Counter/steps/__80__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__80__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/__80__step__/title.txt b/Calorie_Counter/steps/__80__step__/title.txt new file mode 100644 index 0000000..3f08f8a --- /dev/null +++ b/Calorie_Counter/steps/__80__step__/title.txt @@ -0,0 +1,20 @@ +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". + \ No newline at end of file diff --git a/Calorie_Counter/steps/__81__step__/README.md b/Calorie_Counter/steps/__81__step__/README.md new file mode 100644 index 0000000..43485a3 --- /dev/null +++ b/Calorie_Counter/steps/__81__step__/README.md @@ -0,0 +1,335 @@ + + + +# Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68Step 69
Step 70Step 71Step 72Step 73Step 74
Step 75Step 76Step 77Step 78Step 79
Step 80Step 81
+
+ + +
+ +

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

+ preview_step81 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5DOM
JavaScriptCSSHTML5DOM
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ``; +} + +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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ``; +} + +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/__81__step__/styles.css b/Calorie_Counter/steps/__81__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__81__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/__81__step__/title.txt b/Calorie_Counter/steps/__81__step__/title.txt new file mode 100644 index 0000000..327e418 --- /dev/null +++ b/Calorie_Counter/steps/__81__step__/title.txt @@ -0,0 +1,9 @@ +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. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__82__step__/README.md b/Calorie_Counter/steps/__82__step__/README.md new file mode 100644 index 0000000..3df59db --- /dev/null +++ b/Calorie_Counter/steps/__82__step__/README.md @@ -0,0 +1,340 @@ + + + +# Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68Step 69
Step 70Step 71Step 72Step 73Step 74
Step 75Step 76Step 77Step 78Step 79
Step 80Step 81Step 82
+
+ + +
+ +

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()); // Output: jessica
+
+

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

+ preview_step82 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5DOM
JavaScriptCSSHTML5DOM
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ``; +} + +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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ``; +} + +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/__82__step__/styles.css b/Calorie_Counter/steps/__82__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__82__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/__82__step__/title.txt b/Calorie_Counter/steps/__82__step__/title.txt new file mode 100644 index 0000000..4e0c3e3 --- /dev/null +++ b/Calorie_Counter/steps/__82__step__/title.txt @@ -0,0 +1,19 @@ +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 Codeconst +firstName = 'JESSICA'; +console.log(firstName.toLowerCase()); // Output: jessica + +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. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__83__step__/README.md b/Calorie_Counter/steps/__83__step__/README.md new file mode 100644 index 0000000..c1be404 --- /dev/null +++ b/Calorie_Counter/steps/__83__step__/README.md @@ -0,0 +1,337 @@ + + + +# Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68Step 69
Step 70Step 71Step 72Step 73Step 74
Step 75Step 76Step 77Step 78Step 79
Step 80Step 81Step 82Step 83
+
+ + +
+ +

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

+ preview_step83 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5DOM
JavaScriptCSSHTML5DOM
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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 @@ + + + +# Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68Step 69
Step 70Step 71Step 72Step 73Step 74
Step 75Step 76Step 77Step 78Step 79
Step 80Step 81Step 82Step 83Step 84
+
+ + +
+ +

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); // 5
+
+

In your span text, wrap your remainingCalories reference in Math.abs() to ensure that the value is positive.

+
+
+ +

preview

+ preview_step84 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5DOM
JavaScriptCSSHTML5DOM
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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 @@ + + + +# Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68Step 69
Step 70Step 71Step 72Step 73Step 74
Step 75Step 76Step 77Step 78Step 79
Step 80Step 81Step 82Step 83Step 84
Step 85
+
+ + +
+ +

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

+ preview_step85 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5DOM
JavaScriptCSSHTML5DOM
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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/__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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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/__85__step__/styles.css b/Calorie_Counter/steps/__85__step__/styles.css new file mode 100644 index 0000000..fa42007 --- /dev/null +++ b/Calorie_Counter/steps/__85__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/__85__step__/title.txt b/Calorie_Counter/steps/__85__step__/title.txt new file mode 100644 index 0000000..2250654 --- /dev/null +++ b/Calorie_Counter/steps/__85__step__/title.txt @@ -0,0 +1,9 @@ +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. + \ No newline at end of file diff --git a/Calorie_Counter/steps/__86__step__/README.md b/Calorie_Counter/steps/__86__step__/README.md new file mode 100644 index 0000000..b420a0a --- /dev/null +++ b/Calorie_Counter/steps/__86__step__/README.md @@ -0,0 +1,338 @@ + + + +# Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68Step 69
Step 70Step 71Step 72Step 73Step 74
Step 75Step 76Step 77Step 78Step 79
Step 80Step 81Step 82Step 83Step 84
Step 85Step 86
+
+ + +
+ +

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

+ preview_step86 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5DOM
JavaScriptCSSHTML5DOM
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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 @@ + + + +# Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68Step 69
Step 70Step 71Step 72Step 73Step 74
Step 75Step 76Step 77Step 78Step 79
Step 80Step 81Step 82Step 83Step 84
Step 85Step 86Step 87
+
+ + +
+ +

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

+ preview_step87 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5DOM
JavaScriptCSSHTML5DOM
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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 @@ + + + +# Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68Step 69
Step 70Step 71Step 72Step 73Step 74
Step 75Step 76Step 77Step 78Step 79
Step 80Step 81Step 82Step 83Step 84
Step 85Step 86Step 87Step 88
+
+ + +
+ +

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

+ preview_step88 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5DOM
JavaScriptCSSHTML5DOM
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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 @@ + + + +# Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68Step 69
Step 70Step 71Step 72Step 73Step 74
Step 75Step 76Step 77Step 78Step 79
Step 80Step 81Step 82Step 83Step 84
Step 85Step 86Step 87Step 88Step 89
+
+ + +
+ +

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

+ preview_step89 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5DOM
JavaScriptCSSHTML5DOM
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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 @@ + + + +# Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68Step 69
Step 70Step 71Step 72Step 73Step 74
Step 75Step 76Step 77Step 78Step 79
Step 80Step 81Step 82Step 83Step 84
Step 85Step 86Step 87Step 88Step 89
Step 90
+
+ + +
+ +

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

+ preview_step90 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5DOM
JavaScriptCSSHTML5DOM
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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 @@ + + + +# Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68Step 69
Step 70Step 71Step 72Step 73Step 74
Step 75Step 76Step 77Step 78Step 79
Step 80Step 81Step 82Step 83Step 84
Step 85Step 86Step 87Step 88Step 89
Step 90Step 91
+
+ + +
+ +

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

+ preview_step91 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5DOM
JavaScriptCSSHTML5DOM
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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 @@ + + + +# Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68Step 69
Step 70Step 71Step 72Step 73Step 74
Step 75Step 76Step 77Step 78Step 79
Step 80Step 81Step 82Step 83Step 84
Step 85Step 86Step 87Step 88Step 89
Step 90Step 91Step 92
+
+ + +
+ +

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>List 1</li>
+  <li>List 2</li>
+  <li>List 3</li>
+</ul>
+
+
Example Code
const 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.

+
+
+ +

preview

+ preview_step92 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5DOM
JavaScriptCSSHTML5DOM
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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 @@ + + + +# Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68Step 69
Step 70Step 71Step 72Step 73Step 74
Step 75Step 76Step 77Step 78Step 79
Step 80Step 81Step 82Step 83Step 84
Step 85Step 86Step 87Step 88Step 89
Step 90Step 91Step 92Step 93
+
+ + +
+ +

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

+ preview_step93 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5DOM
JavaScriptCSSHTML5DOM
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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 @@ + + + +# Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68Step 69
Step 70Step 71Step 72Step 73Step 74
Step 75Step 76Step 77Step 78Step 79
Step 80Step 81Step 82Step 83Step 84
Step 85Step 86Step 87Step 88Step 89
Step 90Step 91Step 92Step 93Step 94
+
+ + +
+ +

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

+ preview_step94 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5DOM
JavaScriptCSSHTML5DOM
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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 @@ + + + +# Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68Step 69
Step 70Step 71Step 72Step 73Step 74
Step 75Step 76Step 77Step 78Step 79
Step 80Step 81Step 82Step 83Step 84
Step 85Step 86Step 87Step 88Step 89
Step 90Step 91Step 92Step 93Step 94
Step 95
+
+ + +
+ +

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

+ preview_step95 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5DOM
JavaScriptCSSHTML5DOM
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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 @@ + + + +# Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68Step 69
Step 70Step 71Step 72Step 73Step 74
Step 75Step 76Step 77Step 78Step 79
Step 80Step 81Step 82Step 83Step 84
Step 85Step 86Step 87Step 88Step 89
Step 90Step 91Step 92Step 93Step 94
Step 95Step 96
+
+ + +
+ +

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

+ preview_step96 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5DOM
JavaScriptCSSHTML5DOM
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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 @@ + + + +# Calorie Counter + +
+ +

Follow Links Steps

+
+ + + + + + + +
Step 0Step 1Step 2Step 3Step 4
Step 5Step 6Step 7Step 8Step 9
Step 10Step 11Step 12Step 13Step 14
Step 15Step 16Step 17Step 18Step 19
Step 20Step 21Step 22Step 23Step 24
Step 25Step 26Step 27Step 28Step 29
Step 30Step 31Step 32Step 33Step 34
Step 35Step 36Step 37Step 38Step 39
Step 40Step 41Step 42Step 43Step 44
Step 45Step 46Step 47Step 48Step 49
Step 50Step 51Step 52Step 53Step 54
Step 55Step 56Step 57Step 58Step 59
Step 60Step 61Step 62Step 63Step 64
Step 65Step 66Step 67Step 68Step 69
Step 70Step 71Step 72Step 73Step 74
Step 75Step 76Step 77Step 78Step 79
Step 80Step 81Step 82Step 83Step 84
Step 85Step 86Step 87Step 88Step 89
Step 90Step 91Step 92Step 93Step 94
Step 95Step 96Step 97
+
+ + +
+ +

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

+ preview_step97 + + +[back to top](#top) + + + + + + + + + +
JavaScriptCSSHTML5DOM
JavaScriptCSSHTML5DOM
+ +[back to top](#top) + + + +
+ +

index.html

+
+ + + +```html + + + + + + + Calorie Counter + + +
+

Calorie Counter

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + + +``` + + + +[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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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

+
+
+ + +
+ Breakfast +
+
+
+ Lunch +
+
+
+ Dinner +
+
+
+ Snacks +
+
+
+ Exercise +
+
+
+ + + + + +
+
+ + +
+
+
+
+
+ + + 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 = ` + + + + `; + targetInputContainer.insertAdjacentHTML('beforeend', HTMLString); +} + + +function calculateCalories(e) { + e.preventDefault(); + isError = false; + + const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']"); + const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']"); + const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']"); + const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']"); + const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']"); + + const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs); + const lunchCalories = getCaloriesFromInputs(lunchNumberInputs); + const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs); + const snacksCalories = getCaloriesFromInputs(snacksNumberInputs); + const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs); + const budgetCalories = getCaloriesFromInputs([budgetNumberInput]); + + if (isError) { + return; + } + + const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories; + const remainingCalories = budgetCalories - consumedCalories + exerciseCalories; + const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit'; + output.innerHTML = ` + ${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.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: +

+

+ 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 -![preview 'Random Background Color Changer step 1'](https://github.com/AndriiKot/JS__Random_Background_Color_Changer__freeCodeCamp/blob/main/preview/step1.png) +![preview 'Random Background Color Changer'](https://github.com/AndriiKot/JS__Random_Background_Color_Changer__freeCodeCamp/blob/main/preview/end-project.png) | [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 + +![preview 'Random Background Color Changer'](https://github.com/AndriiKot/JS__Random_Background_Color_Changer__freeCodeCamp/blob/main/preview/end-project.png) + +| [index.html](#indexhtml) | [styles.css](#stylescss) | [script.js](#scriptjs) | +| ------------------------ | ------------------------ | ---------------------- | + +### technologies + + + + + + + + + + + + + + + + +
JavaScriptCSSHTML
+ + JavaScript + + + + CSS + + + + HTML + +
+ +[back to top](#top) + +### index.html + +```html + + + + + + Build a random background color changer + + + +

Random Background Color changer

+ +
+
+

Hex Code: #110815

+
+ + +
+ + + +``` + +[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

+ +
+
+

Hex Code: #110815

+
+ + +
+ + + + 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.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: +

+

+ 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 -![preview 'Random Background Color Changer step 1'](https://github.com/AndriiKot/JS__Random_Background_Color_Changer__freeCodeCamp/blob/main/preview/step1.png) +![preview 'Random Background Color Changer'](https://github.com/AndriiKot/JS__Random_Background_Color_Changer__freeCodeCamp/blob/main/preview/end-project_v2.png) | [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 @@ + + +# 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. + +
+ +

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.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: +

+

+ 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 + + + + + + + + + + + + + + + + +
JavaScriptCSSHTML
+ + 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 + +![preview 'Random Background Color Changer step 2'](https://github.com/AndriiKot/JS__Random_Background_Color_Changer__freeCodeCamp/blob/main/preview/step2.png) + +| [index.html](#indexhtml) | [styles.css](#stylescss) | [script.js](#scriptjs) | +| ------------------------ | ------------------------ | ---------------------- | + +### technologies + + + + + + + + + + + + + + + + +
JavaScriptCSSHTML
+ + JavaScript + + + + CSS + + + + HTML + +
+ +[back to top](#top) + +### index.html + +```html + + + + + + Build a random background color changer + + + +

Random Background Color changer

+ +
+
+

Hex Code: #110815

+
+ + +
+ + + +``` + +[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

+ +
+
+

Hex Code: #110815

+
+ + +
+ + + + 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.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. +

+
+ +# 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 + +![preview 'Random Background Color Changer step 3'](https://github.com/AndriiKot/JS__Random_Background_Color_Changer__freeCodeCamp/blob/main/preview/step3.png) + +| [index.html](#indexhtml) | [styles.css](#stylescss) | [script.js](#scriptjs) | +| ------------------------ | ------------------------ | ---------------------- | + +### technologies + + + + + + + + + + + + + + + + +
JavaScriptCSSHTML
+ + JavaScript + + + + CSS + + + + HTML + +
+ +[back to top](#top) + +### index.html + +```html + + + + + + Build a random background color changer + + + +

Random Background Color changer

+ +
+
+

Hex Code: #110815

+
+ + +
+ + + +``` + +[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

+ +
+
+

Hex Code: #110815

+
+ + +
+ + + + 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 + +![preview 'Random Background Color Changer step 4'](https://github.com/AndriiKot/JS__Random_Background_Color_Changer__freeCodeCamp/blob/main/preview/step4.png) + +| [index.html](#indexhtml) | [styles.css](#stylescss) | [script.js](#scriptjs) | +| ------------------------ | ------------------------ | ---------------------- | + +### technologies + + + + + + + + + + + + + + + + +
JavaScriptCSSHTML
+ + JavaScript + + + + CSS + + + + HTML + +
+ +[back to top](#top) + +### index.html + +```html + + + + + + Build a random background color changer + + + +

Random Background Color changer

+ +
+
+

Hex Code: #110815

+
+ + +
+ + + +``` + +[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

+ +
+
+

Hex Code: #110815

+
+ + +
+ + + + 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 + +![preview 'Random Background Color Changer step 5'](https://github.com/AndriiKot/JS__Random_Background_Color_Changer__freeCodeCamp/blob/main/preview/step5.png) + +| [index.html](#indexhtml) | [styles.css](#stylescss) | [script.js](#scriptjs) | +| ------------------------ | ------------------------ | ---------------------- | + +### technologies + + + + + + + + + + + + + + + + +
JavaScriptCSSHTML
+ + JavaScript + + + + CSS + + + + HTML + +
+ +[back to top](#top) + +### index.html + +```html + + + + + + Build a random background color changer + + + +

Random Background Color changer

+ +
+
+

Hex Code: #110815

+
+ + +
+ + + +``` + +[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

+ +
+
+

Hex Code: #110815

+
+ + +
+ + + + 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 + +![preview 'Random Background Color Changer step 6'](https://github.com/AndriiKot/JS__Random_Background_Color_Changer__freeCodeCamp/blob/main/preview/step6.png) + +| [index.html](#indexhtml) | [styles.css](#stylescss) | [script.js](#scriptjs) | +| ------------------------ | ------------------------ | ---------------------- | + +### technologies + + + + + + + + + + + + + + + + +
JavaScriptCSSHTML
+ + JavaScript + + + + CSS + + + + HTML + +
+ +[back to top](#top) + +### index.html + +```html + + + + + + Build a random background color changer + + + +

Random Background Color changer

+ +
+
+

Hex Code: #110815

+
+ + +
+ + + +``` + +[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

+ +
+
+

Hex Code: #110815

+
+ + +
+ + + + 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 + +![preview 'Random Background Color Changer step 7'](https://github.com/AndriiKot/JS__Random_Background_Color_Changer__freeCodeCamp/blob/main/preview/step7.png) + +| [index.html](#indexhtml) | [styles.css](#stylescss) | [script.js](#scriptjs) | +| ------------------------ | ------------------------ | ---------------------- | + +### technologies + + + + + + + + + + + + + + + + +
JavaScriptCSSHTML
+ + JavaScript + + + + CSS + + + + HTML + +
+ +[back to top](#top) + +### index.html + +```html + + + + + + Build a random background color changer + + + +

Random Background Color changer

+ +
+
+

Hex Code: #110815

+
+ + +
+ + + +``` + +[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

+ +
+
+

Hex Code: #110815

+
+ + +
+ + + + 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 + +![preview 'Random Background Color Changer step 8'](https://github.com/AndriiKot/JS__Random_Background_Color_Changer__freeCodeCamp/blob/main/preview/step8.png) + +| [index.html](#indexhtml) | [styles.css](#stylescss) | [script.js](#scriptjs) | +| ------------------------ | ------------------------ | ---------------------- | + +### technologies + + + + + + + + + + + + + + + + +
JavaScriptCSSHTML
+ + JavaScript + + + + CSS + + + + HTML + +
+ +[back to top](#top) + +### index.html + +```html + + + + + + Build a random background color changer + + + +

Random Background Color changer

+ +
+
+

Hex Code: #110815

+
+ + +
+ + + +``` + +[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

+ +
+
+

Hex Code: #110815

+
+ + +
+ + + + 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', }