Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ashish-simplecoder/js-material-note-app


https://github.com/ashish-simplecoder/js-material-note-app

Last synced: about 24 hours ago
JSON representation

Awesome Lists containing this project

README

        

# js-material-note-app

# See my App in action
- https://ashish-simplecoder.github.io/js-material-note-app/

# Features of this Note App

* Note => This App has CRUD operations functionality.
* This Note App is made with Vanilla JS, with no external libray. It is mobile responsive and also have "Dark mode"
* This Note App has built with code splliting and uses dynamic imports to load the Javascript file when an action is triggred.
* When you will refresh the browser, all of the notes will load with Animation made using Vanilla JS and CSS.
* I have used Intersection Oberserver API to load the notes dynamically.
* The note withing the screen will load and other notes will not be loaded.
* This feature allows to load site very quickly. Don't belive it then just create some notes and refresh the browser tab and you will see how fast the site loads.
* I have included the Search feature to search your notes very quickly.
* You can type your notes keyword and matched notes will be displayed.
* You can also edit your notes and also delete them if you want to.
* To edit a note just click on the note which you want to edit.

# Create notes very easily.

![image](https://user-images.githubusercontent.com/62009244/140534434-c93883e7-da93-48d8-89a8-82ee11326c6f.png)

# search your notes.

![image](https://user-images.githubusercontent.com/62009244/140534589-9b65b610-b9bb-4fb0-bc61-4d2f97ba6114.png)

![image](https://user-images.githubusercontent.com/62009244/140534652-519bc408-d2db-4aba-9b4d-c1f0a34b5db8.png)

# Edit notes very easily, Just click on the note which you wanna edit.

![image](https://user-images.githubusercontent.com/62009244/140534732-a701142b-f83c-4b0c-a207-ae69edf9d055.png)