ravenloue / TodoApp

A simple browser based task list using javascript

To Do App

A simple todo app that utilizes the local storage to save its contents

Table of Contents

• Overview
  • The Idea
  • Screenshots
• My Process
  • Built With
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

Everyone does to do apps, right? I felt that this was a great way to learn how to better handle TypeScript. I struggled with a few things that I wanted to include, specifically the checkbox and delete button event handlers. Mostly it was just a matter of figuring out how to ensure that each task item had a unique identifier to prevent multiple objects from being deleted at once.

The Idea

• To do list
  • User should be able to name their own list
  • Add, crossout and remove items from the list
  • List should be stored in local storage so that it remains static upon refresh
  • Local storage should be able to be cleared by the user

Screenshots

My Process

Built with

• TypeScript
• SASS\SCSS
• HTML semantic tags
• VSCode

What I learned

I learned how to interact with the browser's local storage and got to really work with TypeScript. I chose to not do modules for this project, but the next one is going to take advantage of them.

I was very proud of getting the scrollbar to be limited to the list itself without hiding the task entry section or the Title.

Continued Development

Possible improvements:

• Make adjustments for longer task names or limit characters

Useful Resources

• W3Schools HTML References - I always keep W3Schools reference sheets close at hand
• Color Palettes - Best Place to find good color palettes for web design
• The Net Ninja's TypeScript Tutorial - Very handy for getting a better understanding of how to work with TypeScript for web

Author

• Website - GitHub/ravenloue
• LinkedIn - Brandie Mallard
• Twitter - @ravenloue