https://github.com/thecodeholic/vanillajsnotes
Sticky notes app using vanilla javascript
https://github.com/thecodeholic/vanillajsnotes
javascript-notes sticky-notes vanilla-javascript
Last synced: 7 months ago
JSON representation
Sticky notes app using vanilla javascript
- Host: GitHub
- URL: https://github.com/thecodeholic/vanillajsnotes
- Owner: thecodeholic
- Created: 2019-09-06T20:35:12.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-14T00:54:37.000Z (almost 3 years ago)
- Last Synced: 2025-03-21T22:41:30.149Z (8 months ago)
- Topics: javascript-notes, sticky-notes, vanilla-javascript
- Language: JavaScript
- Homepage:
- Size: 1.09 MB
- Stars: 22
- Watchers: 4
- Forks: 25
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Notes app using plain javascript
### Install in your project
```
npm install @thecodeholic/plainjs-notes
```
### Usage
```javascript 1.8
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
```javascript 1.8
// 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
```javascript 1.8
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
1. Clone the project
2. Go to the project root directory
3. Run `npm install`
### Running on development using [dev server](https://github.com/webpack/webpack-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.