DEV Community

Cover image for Checkmark: a beautiful to-do with Materialize
Micah Lindley
Micah Lindley

Posted on

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.

Top comments (9)

Collapse
 
gablaroche profile image
Gabriel Laroche • 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

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

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

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

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