Skip to content

OnkarPawar1/TheDigitalNapkin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 

Repository files navigation

The Digital Napkin napkin:

Pin your genius, drag your chaos, and never lose a fleeting thought again.

The Digital Napkin Screenshot

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.


✨ Key Features

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 .xml file for backup or migration.
    • Individual Export: Export single notes as .xml or download them as .txt files.
  • 📋 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.

🛠️ Tech Stack

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.

🚀 Getting Started

Since this is a client-side-only application, getting it running is as simple as it gets.

  1. Clone the repository:
    git clone https://github.com/OnkarPawar1/TheDigitalNapkin.git
  2. Navigate to the project directory:
    cd TheDigitalNapkin
  3. Open the index.html file in your favorite web browser.

That's it! You're ready to start jotting down your thoughts.


💡 The "Technology" Explained

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.


🤝 Contributing

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".

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

📜 License

Distributed under the MIT License. See LICENSE for more information.


🙏 Acknowledgements

  • Font Awesome for the icons.
  • Every developer who has ever answered a question on Stack Overflow.

Made with ❤️ and a lot of JavaScript.

About

The Digital Napkin is a fun, private notepad that lives in your browser. Organize ideas with drag & drop, colors, and pinning. Paste images, search instantly, and use the XML import/export to back up your genius. No sign-up, no cloud, just your notes.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages