ZU-TUN

Schreib alles auf, was du erinnern solltest.

Alle deine Aufgaben sind in einem Platz. Du kannst sie nach ihre Fristen sortieren oder mit einer Farbe etikettieren. Außerdem kannst du sie nach deiner benutzerdefinierten Ordner sammeln.

 
 
 

🔗 Website

 

Features

• Dark/Light mode
• Bundled with Webpack 5
• Build with Halfmoon CSS Framework
• All to-dos stored at Google Firebase Hosting
• One click login with Google Accounts
• 8 color to attach on to-dos items
• Show to-dos to their due (Today, Morning, This Week, This Month or Later)
• Create folder to organize items
• Show completed to-dos in navbar dropdown
• Show completed to-dos in list
• Edit to-do items
• Delete to-do items
• Fully resposive design
   

What I Learned

• Using Firebase Emulators.
• Multiple pages with Webpack.
• Loading skeleton while fetching data with CSS :empty pseudo element.
• Using Array.find method to get item via data attributes.
• How to change CSS pseudo elements with JS.
• Attaching current item ID to submit button, in order to use it while setting new infos.