Creating TaskPal — a Simple To-Do App

In November of 2022, I started teaching myself Frontend web development via YouTube and Udemy courses, and since then I’ve appreciated (and still do appreciate) the capabilities of these wonderful technologies I’ve come to learn, and still learning — HTML, CSS, and JavaScript. I’ve made a few dud websites & projects to drill in concepts I learned; concepts like structuring layouts, applying styling, and little interactions here and there.

As a Product Designer who’s been super interested in learning to code, this to-do app — TaskPal, stretched me. I mean, literally. I feel this is a defining moment in this journey of mine and thought to document it; hence, this writeup.

First Impression

I stumbled on this YouTube tutorial for the project, and loved how simple the features were:

- Theme-changer menu
- Add a task
- Delete a task

After watching the entire tutorial, I didn’t grasp most of what the person made as his JS programming was way different from what I’d learned, and I decided to take on the challenge of replicating the project but doing it in my own way. I knew Grid & Flexbox in CSS, and how to traverse the DOM, createElement, etc. so I gave it a go. I hadn’t anticipated the roadblocks I’d meet on the way. 😊

Design and Functionality

First, I started by taking screenshots of all interactions, in the video, that occurred in the app so as to know how the UI will be built and the interactions involved, this is where being a Product Designer came in handy as I could easily visualize the box model concept and how the icons, modals, texts, popups, and inputs are placed on the page, and put them in their rightful positions.

Sample Screenshot of Test UI

Challenges and Solutions

I quickly set out to create the foundation for the app using HTML, and made sure to use the HTML5 syntax and styled it with CSS. For the layout, I mostly used grid or flexbox, depending on the area I was styling — flexbox did most of the job, though. JavaScript was smooth until I had issues looping over an array to make the checkmark visible on all the created tasks — I kept getting an Uncaught TypeError. ChatGPT came to the rescue here after over 10mins of me trying to figure it out to no avail. 🎉

Screenshot of a ChatGPT’s response to an array loop problem I encountered for the Checkmark area

Another small challenge I came across was switching the ‘+ Add task’ to the circular ring when one clicks the input to type in a task.

I managed to figure it out by grouping the ‘+ Add task’ in its own div displayed in Flex, and putting it together with the circular ring in another div, also displayed in Flex. This way I could easily use JS to target each and swap on click.

To delete tasks, I had studied Event Bubbling and that came in handy as previously I attached the addEventListener() to the delete button and found that when I added a task, the delete button for that newly added task didn’t work. Event Bubbling made me understand that the addEventListener() needed to be on the div holding the entire added tasks together so as for any operation to affect subsequently added tasks.

Bugs😬

Although I was able to get most of the app done, I noticed some bugs (which I’m still tackling):

• when I create more than one task and try to delete it, the welcome statement shows up; I’d tried severally to make it happen only when the last task item is deleted but couldn’t. 😥

The welcome note appears when deleting an item [BUG]

• the checkmarks do not come up when clicked in the created tasks, only the hover state functions.

The checkmark doesn’t come up on click [BUG]

Conclusion

I’m really glad about this project, the learning, unlearning, and relearning that’s occurred throughout, and how concepts are becoming concrete. For me, this — writing about projects I build, would continue, as I plan to improve my Frontend development skill with a long-term goal of transitioning fully to UX Engineering.

For now, I’m still a Product Designer who’s learning Frontend Development (and loves design).

Feel free to test the project below and share feedback or advice (I could use some🙏🏽):

https://classy-douhua-e39c69.netlify.app/

You can check out my GitHub repository and fork the code (if you wish 😉)

See you in the next one!