Developing a habit tracker website part 5

Just finishing the arrow buttons. In the last article, we just finished developing the logic on how the arrow buttons will change the date displayed on the website. The function was only set up for the left arrow button for testing purposes. Now we can use the code for the right-hand arrow which moves the date to next month.

Before:

After:

Now we need to call the function in the click event:

$("#right_arrow_button").click(function() {
  next_month();
});

Now we can test the button:

Clicking the button does not do anything. Reviewing the next_month function I saw that the function did not have a way of increasing the current month number. So copied this line:

(currentMonth + 1) % 12

from the medium post into a function to see if it will work.

The result below:

The button was able to change the month of the website. But it did not change the year. When I checked the function again I noticed that the line where the year was supposed to increase was not assigned to a new value.

I corrected it to year = year + 1.

Now the date correctly changes the year and the month:

Now we need to adjust the number of days on the calendar according to the date selected. This was mentioned in the last article. I was able to get a half solution for month February where I hide the last week so only showed to 28 days. But this solution messes up the toggles for the calendar’s days. And stops them from adjusting.

Also in the last article, I was able to copy a function that retuned the days of the month. So it can be used for this task. Now we have variables containing the month and the year, I can input these into the function. But I need to find a way to adjust jQuery toggles of the days knowing the number of days in the month. To do this probably need to make a couple of if statements to toggle certain days based on the month.

After some research was able to make some progress. To deal with the calendar day individually I had to turn them into an array.

list_week_5 = $(".week5").toArray()

Then produce a for loop iterating some of the lists. I added red borders to test if the loop is working.

for (var i = 0; i < 3; i++) {
  console.log(list_week_5);
  $(list_week_5[i]).css( "border", "3px solid red" );

The length of the for loop is based on the number of days between the current month and the rest of the days. For now, I have it at 3 so it easier to test.

I replaced i < 3 with the difference variable as the value captures the number of days needed to iterate. To get the rest of the days captured by the loop I added a plus 4 to the difference variable representing the days in the calendar minus the current month.

Now we have example of number of days used in the function using handpicked numbers for February. We need to add a way that the function can adjust to new number of days in a month.

This is where I use the days in month function from earlier. I added this line to calculate the days of the current month.

current_month_num = daysInMonth(month_num, year)

Then added to the difference variable:

difference = 31+4 - current_month_num

I tested the function, it did work but not how I expected.

As we can see the boxes did adjust but it only reduced the number of boxes, leaving leftover days from the another on the calendar. This January 2020 so red boxes should appear only around the 1st and beyond.

Like below:

I think it a problem with the loop as it counts up from 28 then reduces the amount based on the difference variable.

I tried to adjust the loop by making it count backwards from 7:

for (var i = 7; i > difference; i--)

But I got this:

I added a console log command to the difference variable. To see the number contained the value.

I got this:

The variable has a value of 4. But the only 2 red boxes appear. So it may be a miscalculation with for loop that only gets 2 boxes.

Another option I’m going to try is reversing the list then using the for loop to count normally. I did this by .reverse() function on the array creating a new variable like so:

var list_week_5_reverse = list_week_5.reverse()

I was able to get this result:

This is the result I wanted as it highlights the days that not involved in the current month.

But with further testing I found march incorrectly highlights the days of March 2019:

I think the problem is that the red box borders do not change when the days that should be highlighted decrease. When testing the function more by adding to the right arrow I learned the when moving to future months, the boxes did not change when I moved them back.

From console logging the difference variable each time the arrow button was clicked:

You can see the variable changes according to the current month. So problem is probably about the CSS addition in the function.

$(list_week_5[i]).css( "border", "3px solid red" );

I was able to add a minor fix by setting the borders to 0 before the for loop starts.

$(list_week_5[i]).css( "border", "0" );

When testing the button I was able to get the month to change back:

January 2020 before

December 2019

January 2020 After

But the borders are missing for the rest of the week. So I need to adjust the CSS again.

I decided to copy the border properties on the from calendar day and used it to replace the border zero line.

$(list_week_5).css( "border-right", "1px solid #e1e1e1" );
$(list_week_5).css( "border-top", "1px solid #e1e1e1" );

When running the code I got this when switching back to the previous month:

Some the original borders remain on the days 29 and 28 but on the 31st-day red box is only partially taken away.

Later I found a solution which was to put back the border none line before adding original lines back:

$(list_week_5).css("border", "none");
$(list_week_5).css( "border-right", "1px solid #e1e1e1" );
$(list_week_5).css( "border-top", "1px solid #e1e1e1" );

In the next blog post I can work on adjusting the calendar days as i now have a way of highlighting the days that are not included in the current month.