#TID:
A feature I worked on today was the “Main focus” feature. The Momentum app has an input field underneath the question, “What is your main focus for today?” Once you fill out the text input field (e.g. “Finally finish this Momentum clone coding!”) and hit enter, the prompting question and the input field disappears, and a checkbox with that said task is rendered instead.
Honestly, it’s not too difficult a task, but I honestly was initially at a loss as to how to develop this feature. Something that helped me immensely was to take that said feature and break it down even more:
Breakdown of this “Main Focus” prompt/rendering feature:
- Create a text input field
- There should be an eventListener that ONLY fires when the enter button is pressed when a) the focus is on the input (rather than focused on another element), AND b) when the input field is NOT empty (in other words, I don’t want anything to happen when I press enter while the cursor is focused on the input field UNLESS there is some text written on it).
- Once the eventListener fires ONLY with those two requirements, my app has to store the text input as ‘the focus of the day’ as well as hide the display of the question prompt & input field.
- Finally, rendering the main focus task as a checklist with the checkbox icon on the left, and the ellipsis(more info/details)
I was quite happy with how I was able to break down this simple feature into even more manageable chunks. Thanks to this, I quickly realized that my eventListener’s first requirement — “a) the focus is on the input (rather than focused on another element)” — is easily resolved by simply adding the eventlistener directly on the <input> element. That way, even if I press the enter key on another element, the eventListener does not fire.
While creating the eventListener, I was trying to think of which event-type the eventListener should listen to. Now, I am still on my journey of mastering event-types and eventlisteners — the most I’ve used thus far is the click event — so I went ahead to MDN and searched for different event types… And voila, I remembered that I need to be listening to the keydown event and ONLY having the callback function fire if the event.key === 'Enter' AND if the input.value.length > 0 to make sure the eventListener doesn’t call the callback if the enter was pressed with a blank input. :-)
- Refactored
updateClockfunction to utilizesetInterval - Added fontAwesome kit to utilize icons for the app (e.g. ellipsis and checkbox)
- Created visible/invisible display class to elements(**)
- BONUS: If and ONLY if I click on the “checkbox” icon of the ‘main focus task,’ the text of the Main Focus Task has a strikethrough text-decoration.
You can witness my joy of getting my #TID accomplished through this short video snippet.
Next Steps
- Visible/invisible display(**) - I want to refactor this part a bit, because I don’t think I’m toggle/add/removing the invisible/visible classes in the most efficient way. Right now, it is working, but my brain was thinking that there MUST be something more concise. Do I even need both classes? Hm. More refactoring on the way!
- Utilize fetch API to render inspirational quote.
- Utilize geolocation for location/weather functionality
- Adding eventListener to the ellipsis - once clicked, it allows you to delete the task or edit it (for typos or change of mind).