RiDoo

This is a simple todo app made for honing my basic html skills.
And learning typescript(which includes but not limited to DOM manipulation, saving and loading data in local storage, etc.)

Screenshots

About the Project

This is a simple and beautiful todo list app for a day to day use. I made this project following a tutorial as I'm yet to learn how to make it from scratch. But not all was made by watching the video so I added some of my own touches and features. Adding todos to the list and saving them and loading them from Json File in local storage are the only features that I made using tutorials. Below is a list of all the features in this webapp.

Features

Made using tutorials

• Saving and Loading Tasks from local storage
• Creating a Task and adding it to a list

Extended by me

• Tasks List and Completed List
  And moving tasks between both of them depending on their status
• Remove button to remove single task
• Clear All button to remove all tasks from both lists
• Dark theme / Light theme Toggle
• Add Dynamic Time
  ie. displaying hh:mm or MMM dd or dd/mm/yy which is based on current date and time
• Saving user state of the app on changes
  • saving and loading theme changes
  • saving and loading open or closed states for each list

What I Used

• Vanilla Typescript
• Html
• CSS

What I learned

• Types and Interfaces in TypeScript
• Saving and Loading data from local storage using JSON.stringify()
• Using the uuid package to generate unique ids for tasks
• Use CSS over TS/JS whenever possible
• Have good naming conventions when writing codes
• A bit about DATEs, still hard to wrap my head around
• Js's toLocaleString is super good for displaying Date and Time
• Im too dumb to use BEM all variations. I'll stick to flat classes

What's next

I am quite happy with how this project turned out, and I would like to add some

Credits

• Beautiful illustrations by Katerina Limpitsouni see more of here illustrations at undraw.co
• The Lovely Fluent Icons by Colton Grifitth, show them some lova at their github
• The Best CSS Framework I've ever used, PicoCSS, you also can find Pico-chi at github

---

Made with ❤️ by Rajat Iangar

🤖 used for readme only