DEV Community

loading...
Cover image for Checkmark: a beautiful to-do with Materialize

Checkmark: a beautiful to-do with Materialize

Micah Lindley
Self-taught teen designer, developer, and musician. Linux + Android lover and JavaScript enthusiast. Creator of Itchy and Modchat. Hack the world! 💪
・1 min read

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.

Discussion (9)

Collapse
gablaroche profile image
Gabriel Laroche (he/they) • Edited

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!

Collapse
micahlt profile image
Micah Lindley Author

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.

Collapse
johndavemanuel profile image
John Dave Manuel

Hi! What is the purpose of the Google login?

Collapse
micahlt profile image
Micah Lindley Author

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

Collapse
johndavemanuel profile image
John Dave Manuel

I think I can help you with other functions

Thread Thread
micahlt profile image
Micah Lindley Author

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

Thread Thread
johndavemanuel profile image
John Dave Manuel

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

Thread Thread
micahlt profile image
Micah Lindley Author

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

Thread Thread
johndavemanuel profile image
John Dave Manuel

I have indentation tools on my VS code, no worries