https://github.com/bankole2000/stuff-to-do
A Simple Learning oriented JS To Do List App
https://github.com/bankole2000/stuff-to-do
crud dom-manipulation event-delegation event-handling filter functions javascript localstorage material-icons materializecss
Last synced: over 1 year ago
JSON representation
A Simple Learning oriented JS To Do List App
- Host: GitHub
- URL: https://github.com/bankole2000/stuff-to-do
- Owner: Bankole2000
- Created: 2019-02-02T09:52:14.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-18T14:33:54.000Z (over 7 years ago)
- Last Synced: 2025-04-09T18:12:55.419Z (over 1 year ago)
- Topics: crud, dom-manipulation, event-delegation, event-handling, filter, functions, javascript, localstorage, material-icons, materializecss
- Language: JavaScript
- Homepage: https://bankole2000.github.io/stuff-to-do/
- Size: 13.7 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Stuff To Do
A simple, quirky but _awesome_ little ToDo list App - [View Demo](https://bankole2000.github.io/stuff-to-do/)
[](https://bankole2000.github.io/stuff-to-do/)
_
"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](http://www.materializecss.com/) - Material Design CSS FrameWork
* [Google Material Icons](https://google.github.io/material-design-icons/) - Icon Font
* [LOVE](https://www.wikihow.com/Love-Programming) - 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:
```javascript
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](https://materializecss.com/toasts.html) instead of crappy window methods (like `alert()` and `confirm()`)
```javascript
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](https://github.com/bradtraversy) for his awesome courses - _i will not fail you sensei_
* Thanks to [@torvalds](https://github.com/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
_