Stuff To Do

A simple, quirky but awesome little ToDo list App - View Demo

"Teach me Sensei - I wish to learn the Ways of JavaScript"

What it is

An simple, well-commented, learning oriented, 2-file demo Project to practice JavaScript Programming Fundamentals. Built with:

• HTML
• Vanilla JS - ES5 & ES6
• Materialize CSS - Material Design CSS FrameWork
• Google Material Icons - Icon Font
• LOVE - Strictly for the love of coding Mehn!

What it does

• Add & Delete ToDo Items
• ToDo List Badge Counter
• Search/Filter ToDo List
• Clear ToDo List
• Persist Data in Local Storage
• Quirky, random ToDo suggestions

Learning Points

• DOM Manipulation & Traversal
• Event Handing & Delegation
• Creating & Appending Elements
• Local Storage Object Methods
• Materialize Alerts & Toasts

Some cool stuff

Just about Everyone does a todo list when learning Front End programming), so I figured I'd spice things up - tossed in a random placeholder generating function:

function randomPlaceHolder(){
  const placeHolders = ['array','of','silly','placeholders'];
  const index = Math.floor((Math.random()* placeHolders.length) +1);
  todoInput.setAttribute('placeHolder',placeHolders[index]);
}

Also chose to use Materialize CSS Toasts instead of crappy window methods (like alert() and confirm())

M.init(); // Initializes Materialize JS
M.toast({html:'',displayLength:1200});

Features in Development

Still working on these (its just laziness that's made me not get around to em yet though, but you can tell from the UI they're supposed to be there)

• Edit ToDo List Items
• Undo Clear & Delete Items

Contribution

Contributions are highly welcome. Feel free to fork, clone, make pull requests, report issues etc.

Acknowledgments

• Many thanks to @bradtraversy for his awesome courses - i will not fail you sensei
• Thanks to @torvalds For Making the world a better place
• And To anyone reading this... You're awesome!

That being said

Adieu, I must return to Code mountain to continue my training the Ways of Ninjustu