I’ve been trying to look at Tik Tok and Snapchat a little more. I watched two videos today. Go me! I try to stay up to date with social media. Mostly just looking out for my girls’ posts. Karissa doesn’t seem to post on social media anymore. I should ask her about that. I don’t normally tell anyone my girls’ accounts on social media. I don’t know, I just feel that I need to protect them. If they want to give out their account, that’s fine. But I don’t usually do it. I feel weird about that..giving out their accounts. So I keep it to myself.
Lately social media has been so many advertisements in between actual posts. It makes it ridiculous in scrolling through all the ads before I can even get to a friend’s post.
Everest has been sleeping so much. I think she is recovering nicely from her surgery. I’m told to put her in her cage at 1, so she can sleep. But she’s been sleeping pretty well in the office with me. She may be going home on Thursday or Friday. It’s been nice having her here but she misses Chris.
I don’t have much to talk about today. I finished the Date Formatter project in JavaScript, tomorrow I will start another project. The Date Formatter was an easy project and not very long. I did have to study up on the Switch case, which I still need to study more on.
It has been so windy today. We have a severe wind warning at the moment.
I’m still reading Isles of the Gods. I’m liking it. I will get more into it the further I read. I think I’ll get off the computer and read a bit.
JavaScript notes…
——————————————-
Data Formatter steps 1 – 24
Step 1
In this project, you will learn about the JavaScript Date object by building a date formatter.
All of the HTML and CSS for this project have been provided for you.
Start by getting the #current-date element using the .getElementById() method and assign it to a const variable called currentDateParagraph.
const currentDateParagraph = document.getElementById('current-date');
Step 2
Use the .getElementById() method to get the #date-options element and use const to assign it to a variable named dateOptionsSelectElement.
const dateOptionsSelectElement = document.getElementById('date-options');
Step 3
In JavaScript, there are many built-in constructors that create objects. A constructor is like a regular function, but starts with a capital letter, and is initialized with the new operator.
For example, you can use the Date() constructor with the new operator to create a new Date object that returns a string with the current date and time:
const currentDate = new Date();
console.log(currentDate);
// Output:
// Mon Aug 23 2021 15:31:00 GMT-0400 (Eastern Daylight Time)
Create a new const variable called date and assign it a Date object with new Date().
const date = new Date();
Step 4
The Date object has a number of methods that allow you to get the date and time in different formats.
One of those is the .getDate() method, which returns a number between 1 and 31 that represents the day of the month for that date. For example:
const date = new Date();
const dayOfTheMonth = date.getDate();
console.log(dayOfTheMonth); // 20
Using const, create a variable named day and assign it the day of the month from date with the .getDate() method.
const day = date.getDate();
Step 5
The .getMonth() method returns a number between 0 and 11. This represents the month for the date provided, where 0 is January and 11 is December. Because the number this method returns is zero-based, you need to add 1 to it to get the expected month number.
Using const, create a variable named month and assign it the month from date with the .getMonth() method.
Remember to add 1 to the number returned by .getMonth().
const month = date.getMonth() + 1;
Step 6
The .getFullYear() method returns a number which represents the year for the provided date.
Using const, create a variable named year and assign it the year from date with the .getFullYear() method.
const year = date.getFullYear();
Step 7
The .getHours() method returns a number between 0 and 23. This represents the hour for the provided date, where 0 is midnight and 23 is 11 p.m.
Create a const variable named hours and assign it the hour from date with the .getHours() method.
const hours = date.getHours();
Step 8
The .getMinutes() method returns a number between 0 and 59 which represents the minutes for the provided date.
Create a const variable named minutes and assign it the minutes from date with the .getMinutes() method.
const minutes = date.getMinutes();
Step 9
Next, create a const variable named formattedDate and assign it empty template literals.
const formattedDate = ``
Step 10
Inside the template literal, add an embedded expression that contains the day variable.
const formattedDate = `${day}`;
Step 11
After the day variable, add a dash (-) followed by another embedded expression that contains the month variable.
const formattedDate = `${day}-${month}`;
Step 12
After the month variable, add a dash followed by another embedded expression that contains the year variable.
const formattedDate = `${day}-${month}-${year}`;
Step 13
To see the results of the formattedDate variable, add a console.log() statement and pass in the formattedDate variable as an argument.
Open up the console and you should see the date printed out.
const formattedDate = `${day}-${month}-${year}`;
console.log(formattedDate);
Step 14
Use the textContent property on currentDateParagraph to set its text content to the value of the formattedDate variable.
Also, make sure to remove your console.log(formattedDate); line.
const formattedDate = `${day}-${month}-${year}`;
currentDateParagraph.textContent = formattedDate
Step 15
In JavaScript, the change event is used to detect when the value of an HTML element has changed:
element.addEventListener(“change”, () => {
});
Attach the addEventListener method to the dateOptionsSelectElement. The first argument of the event listener should be the string change and the second argument should be an empty arrow function.
dateOptionsSelectElement.addEventListener("change", () => {})
Step 16
When a user makes a selection from the dropdown menu, the function should get the user’s value and display the date in their chosen date format. To do this, you can use the switch statement.
A switch statement is used to compare an expression against multiple possible values and execute different code blocks based on the match. It’s commonly used for branching logic.
For example, here’s how to compare the expression dayOfWeek against possible values:
switch (dayOfWeek) {
case 1:
console.log(“It’s Monday!”);
break;
case 2:
console.log(“It’s Tuesday!”);
break;
// …cases for other workdays
default:
console.log(“It’s the weekend!”);
}
Create a switch statement and use dateOptionsSelectElement.value as the expression.
switch(dateOptionsSelectElement.value) {
}
Step 17
When the user chooses the Year, Month, Day option from the dropdown, the date format should reflect this choice.
To do this, you can add a case clause in the switch statement that checks for a match against the expression expr, followed by code to run if there’s a match. Here’s an example where the case clause checks that expr is equal to the string case123:
switch (expr) {
case ‘case123’:
// Write your logic here
}
Add a case where the value is yyyy-mm-dd. Inside the case, set the text content of currentDateParagraph to the value of formattedDate.
switch (dateOptionsSelectElement.value) {
case 'yyyy-mm-dd':
currentDateParagraph.textContent = formattedDate;
}
Step 18
Split formattedDate into an array of substrings with the .split() method and use a “-” as the separator.
switch (dateOptionsSelectElement.value) {
case "yyyy-mm-dd":
currentDateParagraph.textContent = formattedDate.split("-");
}
Step 19
The .reverse() method is used to reverse an array in place. For example:
const array = [1, 2, 3, 4, 5];
array.reverse();
console.log(array); // [5, 4, 3, 2, 1]
Chain the .reverse() method to the end of .split() method.
switch (dateOptionsSelectElement.value) {
case "yyyy-mm-dd":
currentDateParagraph.textContent = formattedDate
.split("-").reverse();
}
Step 20
Finally, you need to create a string with the reversed array elements separated by dash (-) character.
Use the .join() method to join the reversed array elements into a string and use a “-” for the separator.
switch (dateOptionsSelectElement.value) {
case "yyyy-mm-dd":
currentDateParagraph.textContent = formattedDate
.split("-")
.reverse()
.join("-");
}
Step 21
If your switch statement is going to have multiple cases, it is best practice to include a break statement.
The break statement will tell the JavaScript interpreter to stop executing statements. Without adding a break statement at the end of each case block, the program will execute the code for all matching cases:
switch (someVariable) {
case ‘case123’:
// Write your logic here
break; // Terminates the switch statement
}
Add a break statement to the end of your case block.
switch (dateOptionsSelectElement.value) {
case "yyyy-mm-dd":
currentDateParagraph.textContent = formattedDate
.split("-")
.reverse()
.join("-");
break;
}
Step 22
Add another case with the value mm-dd-yyyy-h-mm. Inside that case, set the text content of currentDateParagraph to empty template literals.
Also, make sure to include a break statement to terminate the switch statement.
switch (dateOptionsSelectElement.value) {
case "yyyy-mm-dd":
currentDateParagraph.textContent = formattedDate
.split("-")
.reverse()
.join("-");
break;
case "mm-dd-yyyy-h-mm":
currentDateParagraph.textContent = ``;
break;
}
Step 23
Inside the case for mm-dd-yyyy-h-mm, set the textContent property of currentDateParagraph to ${month}-${day}-${year} ${hours} Hours ${minutes} Minutes.
switch (dateOptionsSelectElement.value) {
case "yyyy-mm-dd":
currentDateParagraph.textContent = formattedDate
.split("-")
.reverse()
.join("-");
break;
case "mm-dd-yyyy-h-mm":
currentDateParagraph.textContent = `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`;
break;
}
Step 24
In a switch statement, the default case is executed when none of the previous case conditions match the value being evaluated. It serves as a catch-all for any other possible cases. For example:
const dayOfWeek = 7;
switch (dayOfWeek) {
case 1:
console.log(“It’s Monday!”);
break;
case 2:
console.log(“It’s Tuesday!”);
break;
// …cases for other workdays
default:
console.log(“It’s the weekend!”);
}
For the default case, set the text content of currentDateParagraph to the value of formattedDate.
And with that, your date formatter is complete! You can now format the current date three different ways.
switch (dateOptionsSelectElement.value) {
case "yyyy-mm-dd":
currentDateParagraph.textContent = formattedDate
.split("-")
.reverse()
.join("-");
break;
case "mm-dd-yyyy-h-mm":
currentDateParagraph.textContent = `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`;
break;
default:
currentDateParagraph.textContent = formattedDate;
}
