I finished the Calorie counter project and am now coding a music player. I want to go into slower to better understand some concepts I still need clarification on, such as template literals. It took me forever to figure out that I needed to use the backtick key (`) since whoever uses it?! Ok, so on a Mac, the backtick key can be used with the Command key to switch between windows in the current active application. In Windows, one can press Alt +`(backtick) to switch between windows of the same application. So, it is functional.
I want to open my computer and dust it out this weekend. And I’d like to take out my E: hard drive to see if I can salvage the thing. I want pictures off of there. My computer has the unfortunate position of being easily bumped into by someone or a dog walking into the office. I wonder if my hard drive became loose.
I’m done reading Gabriel’s Inferno, and I would like back those hours of my life. Seriously, this book got good reviews. I need help understanding what I’m missing here. Someone even said it was in comparison to 50 Shades, which I have never read. Still, I know the premise of it, and Gabriel’s Inferno isn’t its comparison. I can see no plot line- just a meandering mess of people swimming in self-loathing and a ton of unwelcome allegory surrounding Dante and the Divine Comedy. The book carried on and on about worshipping each other. The characters just became boring. I’m glad this came from the library, and I didn’t have to pay to read it.
The next book to come out of the library on my hold list is Under One Roof. It is a light read, and I’ve only read about 10% of the book so far. It starts in the future and then goes back to the beginning. I didn’t care for that kind of start to a book, but I will read on. I think Fourth Wing is after this book I’m reading. Fourth Wing also got mixed reviews, but I hope it is good.
Next month, I’m getting my hair cut. It’s down close to my waist; it needs cutting.
I have some time before I need to make dinner. I’m going to watch some YouTube or play Final Fantasy. I am still deciding.
JavaScript notes…
———————————————-
Calorie Counter:
Step 74
Your getCaloriesFromInputs function will set the global error flag 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.
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;
}
}
Step 75
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.
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;
}
let consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories
}
Step 76
Now declare a remainingCalories variable, and give it the value of subtracting consumedCalories from budgetCalories and adding exerciseCalories.
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
}
Step 77
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.
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";
}
Step 78
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.
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 = ``;
}
Step 79
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.
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.
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 = ``;
}
Step 80
Give your span the text remainingCalories Calorie surplusOrDeficit, using interpolation to replace remainingCalories and surplusOrDeficit with the appropriate variables.
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}
`;
}
Step 81
When the user has a calorie deficit, 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.
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.
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}
`;
}
Step 82
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.
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}
`;
}
Step 83
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.
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
`;
}
Step 84
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.
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
`;
}
Step 85
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.
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.
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");
}
Step 86
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.
calorieCounter.addEventListener("submit", calculateCalories);
Step 87
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.
function clearForm() {
}
Step 88
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.
function clearForm() {
const inputContainers = document.querySelectorAll('.input-container');
}
Step 89
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:
- List 1
- List 2
- List 3
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.
function clearForm() {
const inputContainers = Array.from(document.querySelectorAll('.input-container'));
}
Step 90
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.
function clearForm() {
const inputContainers = Array.from(document.querySelectorAll('.input-container'));
for (const container of inputContainers) {
container.innerHTML = "";
}
}
Step 91
After your loop completes, you need to clear the budgetNumberInput. Set the value property of budgetNumberInput to an empty string.
function clearForm() {
const inputContainers = Array.from(document.querySelectorAll('.input-container'));
for (const container of inputContainers) {
container.innerHTML = '';
}
budgetNumberInput.value = "";
}
Step 92
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.
function clearForm() {
const inputContainers = Array.from(document.querySelectorAll('.input-container'));
for (const container of inputContainers) {
container.innerHTML = '';
}
budgetNumberInput.value = '';
output.innerText = '';
}
Step 93
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.
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');
}
Step 94
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.
clearButton.addEventListener("click", clearForm);
