HTMLNotes

HTMLNotes is a lightweight, web-based note-taking application built with HTML, CSS, and JavaScript. It leverages TinyMDE for rich Markdown editing and Font Awesome for a polished, icon-driven interface. Users can create, manage, and organize notes with a clean, intuitive design. Features include a toggleable sidebar, note creation, export/import capabilities in JSON and Markdown formats, and note deletion.

Features

• Create and Manage Notes: Easily create new notes and view all or recent notes via the sidebar.
• Rich Markdown Editing: Powered by TinyMDE for seamless Markdown support.
• Export Notes: Export notes as JSON or Markdown for easy sharing or backup.
• Import Notes: Import notes to restore or share content.
• Delete Notes: Remove unwanted notes with a single click.
• Responsive Sidebar: Toggle the sidebar for a distraction-free experience.
• Icon-Driven UI: Enhanced with Font Awesome icons for intuitive navigation.
• Real-Time Saving: Notes are saved automatically as you type.

Demo

A live demo is available on GitHub Pages: https://htmltoolkit.github.io/HTMLNotes/

Open the demo in your browser or download the latest release for better offline usage.

Gallery

Installation

To run or modify HTMLNotes locally, follow these steps:

1. Clone the Repository:

   git clone https://github.com/HTMLToolkit/HTMLNotes.git

2. Navigate to the Project Directory:

   cd HTMLNotes

3. Include Dependencies:

   • TinyMDE: The Markdown editor is included via CDN in the index.html file. Ensure an internet connection for the CDN, or download the TinyMDE library locally from https://github.com/nextapps-de/tinymde.
   • Font Awesome: Icons are included via CDN. Ensure an internet connection, or download Font Awesome locally from https://fontawesome.com/.

4. Open the Application: Open index.html in a web browser to start using or modifying HTMLNotes. No additional setup is required if using CDNs.

Usage

1. Creating a Note:

   • Click the "New Note" button in the sidebar to start a new note.
   • Use the TinyMDE editor to write and format content in Markdown, with auto-saving enabled.

2. Managing Notes:

   • Use the sidebar to view "All Notes" or "Recent" notes.
   • Select a note to edit or view its content.

3. Exporting/Importing Notes:

   • Click the "Export Note" dropdown to save as JSON or Markdown.
   • Use the "Import Note" button to upload a previously exported note.

4. Deleting Notes:

   • Select a note and click "Delete Note" to remove it.

Contributing

Contributions are welcome! Follow these steps to contribute:

1. Fork the repository.
2. Create a new branch (git checkout -b feature/YourFeature).
3. Make your changes and commit (git commit -m "Add your feature").
4. Push to the branch (git push origin feature/YourFeature).
5. Open a Pull Request.

Please ensure your code follows the project's coding standards, respects TinyMDE and Font Awesome licensing, and includes appropriate documentation.

License

This project is licensed under the GNU General Public License v3.0. See the LICENSE file for details.

Note: TinyMDE and Font Awesome have their own licensing terms. TinyMDE is licensed under the MIT License, and Font Awesome offers free and pro versions with different licenses. Ensure compliance when using or distributing these dependencies.

Acknowledgments

• TinyMDE for providing a lightweight Markdown editor: https://github.com/jefago/tiny-markdown-editor
• Font Awesome for high-quality icons: https://fontawesome.com/
• Inspired by simple, user-friendly note-taking applications.
• Built with vanilla HTML, CSS, and JavaScript for maximum compatibility.

Contact

For questions or feedback, open an issue or reach out to me on GitHub.