Habit tracker project part 1— Tobi Olabode
The idea of this project is to make a project that will simply at ticker for a given day if a person successfully does his tasks. This is based on the concept called the don’t break the chain. Which popularised by Jerry Seinfeld in which the story goes that we wanted to get better at writing jokes so he decided it would be beneficial to write new jokes every day. And had a calendar where on each day he adds an X over the day after doing the task. After a while, a chain will develop the goal would not the break the streak.
There are websites and apps that already do this. There is dontbreakthechain.com and one I used to use called habitbull. In habitbull, it had a percentage score where it will be based on how well steak is going. And gave extra stats like the number of entries, average count for the week etc. My main goal for the website is making a python version of this. I think I would be using Django or flask as it is likely to be an online web application. One of the major issues not sure how to address is the design as the app of habitbull used circles connecting to each other. The dontbreakthechain.com uses a straighter forward design of a simple calendar which I will imagine.
Habitbull design:
Don’t break the chain website design:
From using the inspect element tool from the browser I think the website is mainly writing JavaScript. Which is why I think a don’t break the chain version of the project will easier. As this means it can probably be done with Django.
When I was researching closed thing I found to the habitbull design in HTML form was this demo website. The website is actually a planner but this closest I got to the habitbull type design. One of the issues, if I followed through with this design, is that how will I implement circles connecting to each with HTML and CSS like the app.
This is another demo that similar design to the app, this one is simpler on the code.
Another design I’ve just thought of is having a design based on empty boxes where the user can put a cross over the calendar when the task is complete. Like these paper calendars below. My guess it will be much simpler to develop this with HTML and CSS rather than the earlier mentioned design. As it is closer to the don’t break the chain website with simplicity.
I will be moving ahead with the paper calendar design as it will easier to add the cross over the day or a different colour for the day. The closest HTML equivalent of this is a demo called CSS grid calendar.
So I will make a local version of the calendar. By copying the code from editor section. When copying the code the local version looked like this:
When I worked out you need to copy the links from the settings of the website to add the head tag.
After adding these links to the head tag like so:
Now the website looks like this:
This looks the same as the code pen version which is good. Now from here, I edit the files so I can delete all the unnecessary bits of the website. And making sure the calendar is the main function.
So I don’t break anything on the website won’t be removing anything yet. But will be focusing on add cross or a colour change to the calendar to signify when a task is complete.
For awhile I was trying to create a new line under the number. After fiddling around a simple br tag inside div tag works. It was weird because it was not working earlier.
I added a cross image I found from google to one of the calendar days:
This is done to test the design out. Another option is using a cross that made SVG or HTML using to diagonal lines.
The code of some testing mentioned is below:
To add the lines using the CSS code I copied code from this stack overflow answer. Showing one line got me this:
Then when I added the second-line it was outside the box and it ended up here:
Changing the CSS property of line 2 from absolute to relative got me this:
Which is better but lines not aligned or reach the end of the boxes. From fiddling around with the code a lot did not find a way to make a cross for the calendar day. One of the issues was dealing with increasing the line size without increasing the border’s size.
I over-exaggerated the example below to make the issue clearer:
After more fiddling around with the properties for a while I was able to get this:
The closest I got to make a cross using the CSS and HTML. A beta version of the cross.
I later changed the border-bottom properties to black and making the lines thicker:
The lines are not inline or the correct length but this is enought done for now.
Originally published at https://www.tobiolabode.com on January 19, 2020.
