This is a Note-taking application where users can create, save, and delete notes. The notes are saved in the browser's local storage, ensuring they persist even after the page is refreshed.
- Screenshots
- Add Notes: Users can easily add new notes using the "Add Note" button.
- Save Notes: Notes are automatically saved to the browser's local storage.
- Delete Notes: Notes can be deleted using the trash icon.
- Responsive Design: The app is responsive and adapts to different screen sizes.
- Stylish UI: The app features a modern and clean interface with Bootstrap integration and custom CSS.
- HTML5: Provides the structure of the app.
- CSS3: For custom styling and layout.
- Bootstrap 5: Used for responsive design and UI components.
- JavaScript: Handles the functionality, including adding, saving, and deleting notes.
- Font Awesome: Used for icons like the cloud (save) and trash (delete).
-
Adding a Note:
- Click the "Add Note" button to create a new note.
- A new note will appear with a textarea for writing.
-
Saving a Note:
- Notes are automatically saved when the textarea loses focus, or when the save icon (cloud) is clicked.
- The notes are stored in the browser's local storage.
-
Deleting a Note:
- Click the trash icon to delete a note.
- The note will be removed from both the UI and local storage.
- Clone the Repository:
git clone https://github.com/prasxor/Note-App.git
- Navigate to the Project Directory:
cd note-app - Open
index.htmlin Your Browser:- Simply double-click the
index.htmlfile to open it in your default web browser.
- Simply double-click the
note-app/
├── index.html
├── styles.css
├── script.js
└── Assets/
├── note-sticky-solid.svg
├── cloud-solid.svg
└── trash-solid.svg
You can view a live demo of the app https://prasxor-noteapp.netlify.app/ .
- Edit Note Title: Allow users to add a title to each note.
- Search Functionality: Implement a search feature to filter notes by content.
- Multiple Categories: Organize notes into different categories or folders.