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.