Pin your genius, drag your chaos, and never lose a fleeting thought again.
The Digital Napkin is a feature-rich, client-side-only notepad application built with pure Vanilla JavaScript. It's designed to be your go-to place for quick thoughts, brilliant ideas, and everything in between. No sign-up, no cloud, no fuss—just your notes, right in your browser.
This isn't just a simple notepad. It's packed with features to make note-taking a breeze:
- 📝 Create & Edit Notes: Instantly create new notes and edit them on the fly.
- 📌 Pin Important Notes: Keep essential notes at the top of your board with a single click.
- 🎨 Customizable Colors: Personalize your notes with a palette of beautiful, soft colors.
- 🌙 Dark & Light Mode: A sleek theme switcher for your inner night owl (or early bird).
- ✋ Drag & Drop: Intuitively reorder your notes by dragging them around the grid.
- 🖼️ Paste Images: Copy and paste images directly into your notes.
- 🔍 Instant Search: Quickly find notes by searching through titles and content.
- 📥 Rich Import/Export:
- XML Export/Import: Save all your notes to a single
.xmlfile for backup or migration. - Individual Export: Export single notes as
.xmlor download them as.txtfiles.
- XML Export/Import: Save all your notes to a single
- 📋 Advanced Copying:
- Copy note content as plain text.
- Copy the full note, including images and formatting, as HTML.
- 💣 Nuke It All (Safely!): A "Clear All" button with a humorous confirmation modal to prevent disasters.
- 👻 Data Persistence Warning: The app transparently uses
localStorage, reminding users that their data is browser-bound. - 😂 Humorous UI/UX: Witty tooltips and confirmation messages add a touch of personality.
- 📊 Note Metadata: Each note displays a character count and a "Last Modified" timestamp.
- 📱 Fully Responsive: Looks and works great on devices of all sizes.
This project is a testament to the power of web fundamentals. It's built with:
- HTML5: For the core structure.
- CSS3: For styling, including Flexbox, Grid, and custom properties for theming.
- Vanilla JavaScript (ES6+): For all the logic and interactivity. No frameworks, no libraries, just pure JS.
- Font Awesome: For the beautiful icons used throughout the UI.
Since this is a client-side-only application, getting it running is as simple as it gets.
- Clone the repository:
git clone https://github.com/OnkarPawar1/TheDigitalNapkin.git
- Navigate to the project directory:
cd TheDigitalNapkin - Open the
index.htmlfile in your favorite web browser.
That's it! You're ready to start jotting down your thoughts.
Quick Note: Your brilliant thoughts are saved right here in your browser using
localStorage. They'll ghost you forever if you clear your site data! 👻
The Digital Napkin is designed for speed and privacy. It achieves this by storing all your notes directly in your browser's localStorage.
What this means for you:
-
✅ Pros:
- Blazing Fast: No network requests needed to save or load notes.
- Offline First: Works perfectly without an internet connection.
- Private: Your notes never leave your computer.
- No Account Needed: Just open the page and start typing.
-
⚠️ Cons:- Browser-Specific: Your notes are tied to the browser you use on a specific device.
- Data Loss Risk: Clearing your browser's cache or site data will permanently delete all your notes.
Solution: Use the Export All feature regularly to back up your notes to an .xml file! You can use the Import feature to restore them anytime.
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
- Font Awesome for the icons.
- Every developer who has ever answered a question on Stack Overflow.
Made with ❤️ and a lot of JavaScript.
