Developing a habit tracker webiste part 4

Now we need to adjust the number of days in the calendar. As currently, it displays 31 days for February.

image001.png

February has 29 days, so I need a way it can be adjusted. Not too sure how to do so as the days are coded into the HTML:

<div class="calendar__week" id="week5">
        <div class="calendar__day day">29</div>
        <div class="calendar__day day">30</div>
        <div class="calendar__day day">31</div>
        <div class="calendar__day day">1</div>
        <div class="calendar__day day">2</div>
        <div class="calendar__day day">3</div>
        <div class="calendar__day day">4</div>
      </div>

First, need a way to calculate how much days are in a month. From googling around you can create a function that takes in month and year then gives the number of days in the month. I copied my example from this stack overflow answer. 

function daysInMonth (month, year) {
            return new Date(year, month, 0).getDate();

          }
          console.log(daysInMonth(7,2009));

I used the console log so I will get an output of the number without putting it on the website.

image003.png

As I simple measure I added a hide function to not show the last week was the days was not included in February.

$("#week5").hide();
image005.png

This works for showing the days in the month of February but not the other months. I need to add another option were to can switch to another month like March or January. I think this will be done by developing an arrow button navigating to the previous month or the next month.

Using this page I added arrow buttons to the website:

image007.png

The left side button has a green colour to it as that was the colour copied in the code. I edited it so both colours had grey which fitted colours scheme of the website better.

This was done by changing the background colour hexacode of the next button to the same attributes as the previous button.

Now the buttons look like this:

image009.png

Before I start working on adding scripts to change the month of the website. I want to move all of the JavaScript code to a separate file. The scripts are making the HTML file harder to navigate.

Here is an image below of some of the HTML file:

image011.png

When I first loaded the website with the external file, the JavaScript did not load at all. I found the solution was to add the script tag later in the document rather than the head. As the rest of the elements need to be loaded. So the functions can find the elements when they are loaded. This stack overflow answer gave a good explanation and solutions.

Now the JavaScript file looks this:

Now back to the goal of changing the month of the website. Using the arrows buttons, we can either navigate to a new page or change the status of calendar day classes. The advantage of making a new page for the new month that previous entries in the calendar can be easily separated or saved. But the disadvantage is that having a new page for every new page will become less manageable. The class option makes it easier to scale with a lot of months. But I will need to find a way to save entries of the previous month when togging the classes.

I will be using the calendar day class option as this seems like an option that can scale with the user changing a few months before or ahead of time.

To trigger a click event on anchor tag is not different from making click event from the previous elements. I copied a piece of code from Quora answer. 

$("#left_arrow_button").click(function() {
    alert("Your anchor is clicked.");
});

I added ids to the anchor tags to make the click event work.

The left arrow button should give an alert when it is clicked. This will give me evidence that the click event is working correctly.

The result below:

image023.png

We can see the experiment worked. Now we can work on the calendar will change when the buttons clicked.

First, the simpler step is to change the date when the button is clicked. So when the next button is clicked it moves to march 2020 and if the left button is clicked it should change to January 2020.

To create the logic I will need to reuse some of the code earlier for producing the date. I’m basing the logic of the next month and previous month on this medium post. I’m just converting the one line if statement to normal ones so they are easy for me to read.

When testing the button I got this:

image024.png

So the function does not have a way of returning the month.

When looking at my code I noticed that my month variable is accessing a list not a number.

var month = months[d.getMonth()];

Compared to the medium article:

currentMonth = today.getMonth();

So I created a new variable. That only takes the number of the month not the result of the list.

quick explanation: The month returns the name of the month by accessing a list of the name of months.

var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

This is first done by creating JavaScript data object.

var d = new Date();

The getMonth() function gives a number from 0-11 of the date.

“In JavaScript, the first month (January) is month number 0, so December returns month number 11. ”
— https://www.w3schools.com/js/js_date_methods.asp

The number produced from the getmonth() function can be used an index number for the list. Which is how we get this: var month = months[d.getMonth()];

The new variable created was this: var month_num = d.getMonth();

This retuned only the month number

 

Only I changed the variable so the function can complete the if statements. The last lines used the new variable to access the list of the name of the months. Then inserted into the HTML document.

The changed worked well as the picture shows below:

image027.png

Also changes the year as well:

image029.png
Tobi Olabode