VanillaJsNotes
VanillaJsNotes copied to clipboard
Sticky notes app using vanilla javascript
Notes app using plain javascript
Install in your project
npm install @thecodeholic/plainjs-notes
Usage
const noteManager = new NoteManager({
el: document.getElementById('your_wrapper_element_id'),
notes: [
{
title: 'sunt aut facere repellat',
body: 'uia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto'
},
// ...
]
});
Methods
// Add the note at the bottom
noteManager.addNote({
title: '',
body: ''
});
// Add the note at the top
noteManager.prependNote({
title: '',
body: ''
});
// Remove the first note
noteManager.removeNote(noteManager.notes[0]);
// Update all notes and rerender
noteManager.notes = [...];
noteManager.renderNotes();
Events
noteManager.onNoteAdd = (note) => {
console.log("Note added ", note);
};
noteManager.onNoteChange = (note) => {
console.log("Note changed ", note);
};
noteManager.onNoteRemove = (note) => {
console.log("Note removed ", note);
};
Installation and view demo
- Clone the project
- Go to the project root directory
- Run
npm install
Running on development using dev server
Run npm run start to start to webpack dev server with HMR ready
Build For production
Run npm run build to build project's all assets in dist folder.