Checkmark: a beautiful to-do with Materialize

For a long time I’ve wanted to do an impressive web app, and this classic to-do list was the perfect chance! Technologies used are HTML5, Javascript, and Materialize CSS. It also uses HTML5 WebStorage to store the to-do’s until you decide to delete them! Check it out at https://micahlt.github.io/checkmark/. The checklist also sends a notification about where to find information if it’s the first time the user loads the website.

UPDATE

I’ve edited the project a little bit, adding an about page and a fixed action button. The preloader position has also been fixed. And new, smooth animations on page load, plus some other minor UI fixes. Next up is turning it into a PWA!

This project is also under development (I’m adding Firebase auth to sync to-do’s across devices), so be aware that there may be features that don’t work while I implement this.

Comments

[Gabriel Laroche]

It's pretty nice, but I have a few suggestions:

• The user shouldn't be able to create empty todos,
• The site is not very accessible, be sure add focus states on interactive elements
• Some of the icons/buttons/links don't really state their intent, I would either add a label or at the very least a title, so the user knows what the buttons do.

EDIT: I also noticed that you can add the same item over and over and that html isn't escaped, this could lead to cross site scripting

Other than that, Good job, keep it up!

[Micah Lindley]

I created this in about 45 minutes, so it’s a work in progress. But thanks for the suggestions! I’ll definitely try implementing this stuff.

[John Dave Manuel]

Hi! What is the purpose of the Google login?

[Micah Lindley]

I’m currently adding a function that will allow the user to sync to-do’s across devices. However, it doesn’t work yet.

[John Dave Manuel]

I think I can help you with other functions

[Micah Lindley]

Really? @mongopark is already helping, but please submit a pull request on GitHub! I’d really appreciate it. 😇

[John Dave Manuel]

Let me check the repository, and try to make some improvements

[Micah Lindley]

Thanks so much! Warning, my code is... not pretty, or optimized. So be prepared for indention errors!

[John Dave Manuel]

I have indentation tools on my VS code, no worries