Habit tracker project part 3

In the previous article, I ended it when I finished applying the jQuery solution the two first week of the calendar. Now I need to apply the solution to the rest of the days of the calendar. Also, I want to allow multiple views like one week. And switching to other months.

The website already has a toggle option from the template from codepen:

But the toggle is not active or linked to anything. So will need to add my own scripts and other HTML code to get it to work. My first goal for editing this toggle is to allow the click the week button and change colours. To do so I added a script based on the example code this page. Close to the area where the div classes for the toggles lie.

The result I got is this:

I think the problem is that it does not select the CSS properly for the class. As when clicked the box(border) is not rounded and the text is changed to lower case. I later found the fix where I deleted the “toggle__option” and kept toggle__option — selected. I generally thought that all that counted as one class. But I was wrong, what probably happened that the previous solution inherited the properties of both classes, not one. And it caused it not to do too well.

<script>
   $( ".toggle__option" ).click(function() {
   $( this ).toggleClass("toggle__option--selected");
   });
</script>

A minor problem that both toggles can be on at the same time.

And also, off at the same time:

The closest I’ve found to creating this solution was adding an if statement into the function, which turns month button class when the week button is toggled. It only half works as the I can’t toggle back into the month button without turn off the week button.

After a few hours of iterating the code, I found the solution. The solution did not need if statements as we can assume the class change from the click event. I used the id attribute instead of the toggle_option div class. As the toggle option class contained both buttons. After toggle class of the clicked ID property, I added another toggle class a line below which changed the class of the other button. Used two functions to operate actions so it does not interfere with the other button.

Now the next stage is to change the view of the calendar using the toggle. I think the solution for this feature is to have the options button connected a script that will toggle the rest of the weeks in the calendar.

First I added ID to the div classes of the calendar weeks:

<div class="calendar__week" id="week2">
        <div class="calendar__day day">8</div>
        <div class="calendar__day day">9</div>
…
<div class="calendar__week" id="week3">
        <div class="calendar__day day">15</div>
        <div class="calendar__day day">16</div>
…

Then I added jQuery toggle functions under the week toggle button code.

The jQuery toggle function simply hides or show selected elements. Compared to toggleClass which I used in the earlier code, which toggled the class of the selected element.

When testing it out got this result:

This was a successful test, as the weeks have been successful hidden and click event for the cross still works. And switching back to month toggles the rest of the weeks back.

I later found an error to the solution above. The week will only toggle back if you click the week button. This means if you clicked the month button to toggle back and see the full view of the calendar then it would not do anything. Only the button will change the status to selected. So I needed to click the week button twice to toggle it back.

Luckily the solution was easy as I just need to copy the toggles from the week function into month button function.

$("#month_toggle_button").click(function() {
        $( this ).toggleClass("toggle__option--selected");
        $('#week_toggle_button').toggleClass("toggle__option--selected")
        $('#week2').toggle()
        $('#week3').toggle()
        $('#week4').toggle()
        $('#week5').toggle()
      });

Now the next stage is to update the dates and the calendar to the current time. And also allow the user to navigate to other months.

To get the current date and time I used the JavaScript date object. Copied an example from here. 

<div class="current-month" id="current_month">June 2016</div>
      <script>
          var d = new Date();
          document.getElementById("current_month").innerHTML = d;

      </script>

As we can see it prints out the whole string. So need to add more tweaks. I added another line to get the current year and added line get the current month.

<div class="current-month" id="current_month">June 2016</div>
      <script>
          var d = new Date();
          var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
          document.getElementById("current_month").innerHTML = months[d.getMonth()];
          document.getElementById("current_month").innerHTML = d.getFullYear();

      </script>

But the text only shows las inner HTML line which is the current year.

I found the solution by editing the code so the month and year get stored in a variable. Then combined into one variable to be used as a string.

The GitHub link for this current project is here.