A PWA Todo-List Web App

A PWA Todo-List Web App: Refining Vanilla JS Abstractions

The app is deployed here.

I embarked on this project to refine my vanilla JavaScript abstractions by applying them in real projects. I have not uploaded the source code for this project, as the focus is on honing my skills rather than the code itself. Instead, you can explore the core JavaScript utilities that I use and update in different projects on this repository.

About the App:

My Todo app, made without any frameworks, offers the following features:

• Create a task
• Edit a task
• Remove a task
• Persist data using local storage

Initially, I planned to implement touch actions like dragging items left or right to delete them. While it worked in isolation, integrating it with other events became too complex. To simplify interactions, I opted for a delete button in the bottom bar.

During development, I encountered issues with viewportHeight when the onscreen keyboard pops up on mobile devices. I discovered that the visualViewport global object resolves this problem.

Another challenge was resizing the textarea height based on the scrollHeight. A default textarea has two lines of height, but I needed just one line at the start. I adjusted the height of the element using the scrollHeight property after each input.

Yet another edge-case emerged with text wrapping, which also affects the number of lines. Since there is no specific event for text wrapping, I considered listening to window resize events or using a ResizeObserver.

Overall, this project was a valuable learning experience. I enhanced my programming and project planning skills. I brainstormed and sketched different UI and interaction ideas, ultimately settling on a design that I felt confident implementing.

Future of the Project:

I aim to improve the app in two aspects: core features and UI/UX enhancements.

Core Features to Add:

• Google login
• Cloud sync for tasks to enable multi-device access
• Additional Todo app features like due dates, finished tasks, and tags, re-order elements, order by due-date or date-created.

UI/UX Enhancements to Add:

• Slide tasks horizontally to mark them as complete
• Show finished tasks only if at least one exists, with scroll snapping to the top of finished tasks

*This blog post was created with the help of an AI assistant. (My English is ok, but my articulation is messy.) *