Update: I finished Round 2 of my budget app yesterday! After doing so, I took out all of the functionality from the app (but left the function/method and variable names) so that I can go through and fill everything out myself.
It's easy to feel like I'm not really doing any groundbreaking learning, but I really do think this repetition in an increasingly challenging way is helping me so much.
Anyway, I learned this nifty trick to dynamically render the date on a web page using the Date object in JavaScript. Here's how that would look using a function:
var displayMonth = function() {
var now, year, month, months;
now = new Date();
year = now.getFullYear();
months = ['January', 'February', 'March',
'April', 'May', 'June', 'July', 'August',
'September', 'October', 'November',
'December'];
month = now.getMonth();
document.querySelector(***).textContent =
months[month] + ' ' + year;
};
So, if this code were running today, it would show 'March 2020' on the page, and then next month, it would dynamically render 'April 2020.'
The now variable pulls up a new instance of the Date object with today's date. The year variable uses that instance to get the current year with the getFullYear method of the Date object.
I create the months array with the 12 months of the year, and then we can use the getMonth method on the now variable to return a number 0-11 depending on which month it is. For this example, it returns 2 for March (since arrays start from 0).
Lastly, I update the text content of whatever class I query (this would just be a wrapper in the HTML file around where I wanted the date to go on the site) to the months array at the specific month index (in this case, 2 for March), a space, and the corresponding year variable. Voilà!
This post was originally published on March 12, 2020 on my blog.