Widget

Notizzettel-Widget für digitale Notizen auf Webseiten

Das Notizzettel-Widget ist eine eigenständige JavaScript-Lösung, die es ermöglicht, digitale Notizzettel direkt auf Webseiten anzulegen, zu bearbeiten und zu verwalten – ohne zusätzliche Bibliotheken oder Serveranbindung.

Funktionsübersicht

Beim Laden der Webseite wird das Widget automatisch gestartet und überprüft, ob es bereits aktiv ist, um Mehrfachinitialisierungen zu vermeiden. Anschließend werden im lokalen Browser-Speicher abgelegte Notizen und Einstellungen geladen. Das Widget fügt folgende Elemente in die Webseite ein:

  • Runder Launcher-Button am unteren rechten Rand
  • Ausklappbares Verwaltungsmenü zur Notizzettelverwaltung
  • Unsichtbarer Container für die Notizzettel
  • Hinweisfeld für Statusmeldungen
  • Alle erforderlichen CSS-Styles

Notizzettel erstellen und bearbeiten

Neue Notizzettel lassen sich direkt im Menü oder per Tastenkombination Alt + N anlegen. Jeder Notizzettel ist eine frei verschiebbare Karte mit folgenden Merkmalen:

  • Editierbarer Titel
  • Großes Textfeld für Inhalte
  • Kategorien- und Farbauswahl
  • Funktion zur Termin- und Uhrzeiteingabe
  • Anzeige des letzten Änderungsdatums
  • Schaltflächen für Wichtig-Markierung, Minimieren, Duplizieren und Löschen

Alle Änderungen werden automatisch und fortlaufend im localStorage des Browsers gespeichert und bleiben dauerhaft erhalten.

Interaktive Bedienung

Notizzettel können per Maus oder Touch verschoben und über einen Griff am unteren rechten Rand in der Größe verändert werden. Das System sorgt dafür, dass Notizzettel stets sichtbar bleiben und setzt den zuletzt bearbeiteten Zettel mit einer Ebenenverwaltung (z-index) in den Vordergrund. Bei Anpassung der Fenstergröße werden Zettel neu positioniert, um Sichtbarkeit sicherzustellen.

Speicheroptionen und Verwaltung

Die Speicherung erfolgt lokal im Browser. Es stehen zwei Modi zur Verfügung:

  • Nur aktuelle Seite: Die Notizen sind nur für die spezifische URL gespeichert.
  • Ganze Domain: Notizen werden domainweit synchronisiert und stehen auf allen Seiten der Webseite zur Verfügung.

Das umfangreiche Verwaltungsmenü ermöglicht das Erstellen, Durchsuchen, Kategorisieren, Filtern, Duplizieren und Löschen von Notizen sowie die Nutzung des Papierkorbs, Import- und Exportfunktionen, Aktivierung des Dark Modes, Umschaltung der Speicherart und mehr.

Erinnerungsfunktionen und Benachrichtigungen

Das Widget überwacht fällige Termine anhand eingegebener Daten. Bei Fälligkeit werden Notizzettel hervorgehoben, automatisch wieder geöffnet und in den Vordergrund geholt. Der Launcher-Button zeigt eine animierte Hervorhebung und eine Badge mit Anzahl fälliger Erinnerungen. Zudem kann der Browser-Titel blinken und optional Browser-Benachrichtigungen werden ausgesendet.

Die Fälligkeit kann vom Nutzer direkt am Notizzettel oder im Menü bestätigt werden, danach verschwindet die Alarmanzeige.

Notizzettel-Widget

Schwerpunkte

Digitale Notizzettel direkt auf Webseiten speichern und verwalten – lokal im Browser, ohne Serverbindung.

Leistungsbereiche

Download

Notizzettel-Widget als ZIP herunterladen

Enthält das komplette Notizzettel-Widget als ZIP-Datei. Das JavaScript-Widget kann in Webseiten eingebunden werden und ermöglicht digitale Notizzettel direkt auf der Seite – inklusive Speicherung im Browser, Kategorien, Farben, Erinnerungen, Papierkorb sowie Import- und Exportfunktion.

Datei: notizzettel.zip
Format: ZIP-Archiv
Inhalt: JavaScript-Widget zur direkten Einbindung in Webseiten
Speicherung: lokal im Browser per localStorage
ZIP herunterladen

Was macht das Widget?

Das Notizzettel-Widget fügt einer Webseite eine flexible Notizfunktion hinzu. Nach dem Einbinden erscheint ein kleiner Button, über den Du digitale Notizzettel erstellen, bearbeiten, verschieben, minimieren und verwalten kannst. Die Notizen bleiben im Browser gespeichert und stehen beim nächsten Besuch der Seite wieder zur Verfügung.


Leistungsbereiche

Schwerpunkte

Digitale Notizzettel direkt auf Webseiten erstellen, speichern und organisieren.

  • Notizzettel direkt auf der Webseite erstellen
  • Notizen frei verschieben und in der Größe anpassen
  • Titel, Text, Farbe und Kategorie bearbeiten
  • Automatische Speicherung im Browser
  • Wahlweise seitenbezogene oder domainweite Speicherung
  • Erinnerungen mit Datum und Uhrzeit einrichten
  • Fällige Notizen optisch hervorheben
  • Browser-Benachrichtigungen nutzen
  • Notizen minimieren, duplizieren und löschen
  • Gelöschte Notizen über den Papierkorb wiederherstellen
  • Notizen als JSON exportieren und wieder importieren
  • Dark Mode für die Bedienoberfläche aktivieren

Tipps zur Nutzung

  • Einbindung: Das Widget wird als JavaScript-Datei in die Webseite eingebunden. Es erzeugt die benötigte Oberfläche selbstständig und benötigt keine vorbereiteten HTML-Elemente.
  • Notizen direkt auf der Seite: Du kannst Notizzettel genau dort verwenden, wo sie gebraucht werden – zum Beispiel für Hinweise, Aufgaben, Ideen oder interne Bearbeitungsnotizen.
  • Lokale Speicherung: Die Daten werden im Browser gespeichert. Dadurch ist keine Datenbank und keine Serveranbindung nötig. Die Notizen bleiben auf dem jeweiligen Gerät und im jeweiligen Browser erhalten.
  • Speicherbereich wählen: Du kannst Notizen entweder nur für eine einzelne Seite oder für die gesamte Domain speichern. Das ist praktisch, wenn bestimmte Hinweise auf mehreren Unterseiten verfügbar sein sollen.
  • Erinnerungen nutzen: Für wichtige Notizen kannst Du ein Datum und eine Uhrzeit festlegen. Fällige Notizen werden hervorgehoben und können auf Wunsch auch per Browser-Benachrichtigung gemeldet werden.
  • Kategorien und Farben: Durch Kategorien und farbliche Markierungen lassen sich mehrere Notizen übersichtlich strukturieren, zum Beispiel nach Arbeit, Ideen, Privat oder Merken.
  • Papierkorb: Gelöschte Notizen werden nicht sofort endgültig entfernt, sondern landen zunächst im Papierkorb. So können versehentlich gelöschte Einträge wiederhergestellt werden.
  • Export und Sicherung: Über die Exportfunktion kannst Du Deine Notizen sichern und später wieder importieren. Das ist besonders hilfreich, wenn Du den Browser wechselst oder Daten sichern möchtest.

Technische Details und Bedienungskomfort

Architektur und Bedienung

Das Skript ist als sofort ausgeführte Funktion komplett gekapselt, wodurch keine globalen Variablen erzeugt werden. Eine interne Startmarkierung verhindert Mehrfach-Initialisierungen auf derselben Seite.

Alle UI-Elemente werden dynamisch via JavaScript generiert, einschließlich der CSS-Styles, die in den Dokumentenkopf eingefügt werden. Es werden keine externen Bibliotheken verwendet.

Die Datenvalidierung und Fehlerbehandlung sorgen dafür, dass das Widget stabil arbeitet und die Webseite nicht beeinträchtigt.

Benutzerfreundlichkeit

  • Unterstützung für Tastenkombinationen (z.B. Alt + N zum Erstellen neuer Notizen)
  • Dark Mode für eine augenschonendere Darstellung im Menü
  • Automatische Ebenenverwaltung (z-index) sorgt für intuitive Bedienbarkeit
  • Papierkorb-Funktion mit Wiederherstellung und Begrenzung auf 100 Einträge
  • Synchronisierung der Notizen bei Speicherbereichs-Wechsel