Simple Todo List

I am not a frontend developer. I like data, systems, and backend architecture. Unfortunately, it's hard to see that sort of work, and so I wanted a reason to keep on stretching my JavaScript/React chops while also playing with Bootstrap a bit more. This project, the canonical "Make a Todo List Application" that so many people tackle as they're learning a language, was a way to do just that.

This is a "simple" todo list because it's just a single task list without a persistent database. So there's no way to save multiple lists or associate your list with something like an account so you could log in from any browser and see your saved items. Instead, you come to the webpage, do some CRUDing around, leave the webpage, and only find your task list again if you come back to it from the same browser. Each task has the date it was created, the provided name, the current status (all tasks start out as ToDo), and options to edit/delete the task.

Some fun bits about this project:

• The task list is stored in localstorage, so you can at least come back to your list from the same browser and see your current list.
• Editing the list pops up a Bootstrap modal, which was somewhat difficult to work into the React code, but I didn't want to download the React Bootstrap dependency, so I made it work.
• The table holding the tasks is just a Bootstrap table with some striped hovering and active styles for hovers. The icons for edit/delete are from Bootstrap Icons.

To get going, just enter a task name and click Add Task (clicking Delete List will remove all of the list items.