Tomorrow is Valentine’s Day. It’s a nice day, but one should show their significant other they care for them daily. Not just one day out of the year. And one doesn’t have to go crazy every day; touching the hand can signify love. But seriously, it’s Valentine’s Day. Tell a friend that you cherish their friendship. And candy is always nice—especially red vines. You thought I was going to say chocolate. Chocolate is good, but European chocolate is best, which is not easy to come by here. ❤
Did you know that the Windows key + the period key brings up the emoji window? (❁’◡`❁)😍 Yeah, I was playing around with the keyboard and came upon that. And I thought I knew a lot about Windows, and I just figured that out. I want to get on my laptop to see if Apple is the same. Ok, on the Mac, the keys are Control + Command + Space. And that will bring up the emoji window.
Speaking of my laptop, since I use it for therapy. I have therapy tomorrow. The therapist wants to talk about my relationship with Kevin and the trauma that happened when he passed. Kevin and I had a good relationship, but it didn’t start that way. We married early and then left the country, which made things much harder. But sometimes I think living in Germany helped us because we had to handle our problems without outside help. We wouldn’t have made it if we had many friends and family ‘helping’ us. Not that friends and family are deficient in any way. They have a way to influence things. I also think that knowing him in high school and what we went through still affected us after we married. We were still growing up and had to do that together. Germany was wild for us, exposing us to things we had never expected.
I can’t get into that here. I can, but I don’t know how. I am still determining how to explain my and Kevin’s time in Germany to my therapist. I don’t want to lie and say, “Oh, we just were stationed there for three years. Not much happened”. Our friend was stationed there when we were on base in Fort Sill. Kevin didn’t want anything to do with that person. He wanted to leave high school behind him. How would he feel now with social media and our old and new friends meshed up into one app? I’m looking at you, FaceBook. After Germany, Kevin never returned to AOL instant messaging or even had a MySpace account. He didn’t feel comfortable with it all. It was me who emailed and instant messaged and was keeping in touch with old friends.
I feel like I’m rambling now. I should get back to work. I want to ride the bike and do some yoga tonight. I’m trying to exercise at least every other day. I should weigh myself, too; it has been about a week since I have done so.
JavaScript notes…
——————————————————-
Calorie Counter:
Step 52
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.
function addEntry() {
const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
const HTMLString = `
`;
targetInputContainer.insertAdjacentHTML();
}
Step 53
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.
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);
}
Step 54
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.
function getCaloriesFromInputs(list) {
}
Step 55
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.
function getCaloriesFromInputs(list) {
let calories = 0
}
Step 56
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.
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.
function getCaloriesFromInputs(list) {
let calories = 0;
for (const item of list) {
}
}
Step 57
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.
for (const item of list) {
const currVal = item.value;
}
Step 58
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.
const currVal = cleanInputString(item.value);
Step 59
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.
function getCaloriesFromInputs(list) {
let calories = 0;
for (const item of list) {
const currVal = cleanInputString(item.value);
const invalidInputMatch = isInvalidInput(currVal);
}
}
Step 60
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.
if (helloWorld) {
}
Add an if statement that checks if invalidInputMatch is truthy.
function getCaloriesFromInputs(list) {
let calories = 0;
for (const item of list) {
const currVal = cleanInputString(item.value);
const invalidInputMatch = isInvalidInput(currVal);
if (invalidInputMatch) {
}
}
}
Step 61
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.
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]}`)
}
}
}
Step 62
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.
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;
}
}
}
