Habit tracker project 2

In the previous article was working on how I will apply the cross to the calendar dates. The options included images or HTML diagonal lines. I decided to settle on using the image cross. As the design looks much better than on the website compared to the CSS lines I made.

Here the comparison below:

I guess that I could have spent more time editing the CSS lines by making sure lines fit perfectly in the box and line correctly. But considering the amount of time spent just trying to get it to this stage makes me think it’s not worth it.

So the step next is to allow the user click on the calendar date then a will cross appear. As the symbolises the user crossing off the day and continuing the chain. From researching how to do so I noticed that will using JavaScript. Django and flask still ask for JavaScript code to do an action like this. And I’ve not set up Django or flask yet, so if I still need to add JavaScript rather python code then it is not worth the hassle installing those frameworks.

To develop the click action I needed, I went to this website explaining how to click events work. I copied their example code to test if the element is clickable.

The test did not work as the element was not clickable or showing extra text.

After hours trying to find the solution I finally got the example code working:

To fix the issue I found that I that to replace getElementsByClassName to getElementById. Which means making an ID attribute to the calendar day.

My issue that is makes the code more tedious as I need to add an ID attribute to every calendar day.

While trying the find the solution I found a method that sort of works. The technique is that you wrap an anchor tag over your div element, this makes the div element clickable. But the issue for me that because it uses a link to make the element clickable. It can link to another website or page. Not changing the div element show extra text or an image. Unlike the solution above.

I screenshotted two days to highlight the fact using this method, removes the border on the right-hand side.

<a href="http://example.com">
        <div class="calendar__day day">5</div>
</a>

While testing the on click solution using JavaScript. I noticed that when you move your mouse the pointer did not indicate the div element of clickable. So I added a short line of code to CSS which makes the calendar day elements shows the hand the pointer.

.calendar__day {
  border-right: 1px solid #e1e1e1;
  border-top: 1px solid #e1e1e1;
  cursor:pointer;
}

Now we apply to want I’ve learnt from the example code to make the cross image appear when a user clicks the calendar day. When first testing I did not the image to load. It only returns the text.

<div class="calendar__day day" id="day5" onclick="myFunction2()">5</div>
        <script>
            function myFunction2() {
              document.getElementById('day5').innerHTML = "cross icon.png";
            }
        </script>

The fix I found out that I needed to use an img tag in the middle of function to work. Like so:

document.getElementById('day5').innerHTML = "<img src=cross icon.png>";

But I got this result:

From looking from the Firefox developer tool I noticed the path for the image was not set up correctly.

The image file is called “cross icon.png” so the HTML file is only taken “cross” a bit of the text. So I renamed the file cross_icon.png so the HTML does not mistake the whitespace.

When I clicked the calendar box I got this:

This was my mistake as forgot for the example cross from the last article I changed the height and width. So I copied and pasted the same image tag to my function so the properties set up in the last article can be used. Now I got it to work correctly:

A sight issue I have with this is that it replaces the number of the calendar with the image. I think it would be nice to still have the date on the calendar day, even when the issue gets the cross. To fix the issue I found that I can add the number of the day and a line break tag before the image. When setting the innerHTML.

Another feature I want to add is for the user to reverse the click event. So the image will disappear when the user clicks the image or box. And come back once the user clicks again. As right now after the user clicks the box the image stays.

I was testing an example which toggled the size of the div element. But didn’t know how to use to my scenario where I use an image. As the code used the CSS tag to make it work.

<div class="calendar__day day" onclick="show(this)">6</div>
        <script>
            function show(elem) 
               
        

        </script>

.wide {
    width: 50px;
}

I found a solution to the problem by using jQuery. By using a function that toggles the image.

A minor tweak I need do is to have an image hidden first before user clicks. The solution I found for this was to add display:none CSS property to the image tag. So now the image starts hidden and the user can click the calendar day and the cross will appear.

Now the next step is extending this solution to the other calendar days. First, I complete the first week as right now it looks like a mishmash of text and crosses from me setting up solution and example code from earlier.

Here is the code of the image above:

As we can see it’s a bit messy. As I’m simply copying the solution into other calendar div class it should not be too hard to fix.

Now, this is the calendar after the editing:

Habit tracker project 2

Habit tracker project part 3

Habit tracker project