Wie kann man Bibeltexte in HTML mithilfe von JavaScript interaktiv kommentieren?

In diesem Beispiel wird gezeigt, wie man Bibeltexte in HTML so darstellen kann, dass einzelne Verse interaktiv mit Kommentaren versehen werden können. Durch Klicken auf einen Vers öffnet sich ein kleines Eingabefenster, in dem ein Kommentar hinzugefügt, bearbeitet oder gelöscht werden kann. Der Kommentar wird lokal im Browser gespeichert, so dass dieser beim erneuten Laden der Seite erhalten bleibt.

Und die Erde war wüst und leer, und es war finster auf der Tiefe; und der Geist Gottes schwebte auf dem Wasser. 2

Und Gott sprach: Es werde Licht! Und es ward Licht. 3

Und Gott sah, dass das Licht gut war. Da schied Gott das Licht von der Finsternis. 4

Diese Lösung betrachtet jeden Vers als eigenes Element mit einem `data-vers` Attribut, das eine eindeutige Identifikation beinhaltet. Wird auf einen Vers geklickt, so öffnet sich ein kleines Popup-Fenster mit einem Textfeld, wo der Benutzer einen Kommentar eingeben, speichern oder löschen kann. Die Kommentare werden mittels `localStorage` im Browser gespeichert, sodass sie auch nach einem Reload der Seite erhalten bleiben. Visuelle Hinweise (ein kleines Icon oder eine Markierung) zeigen an, welche Verse bereits kommentiert wurden. Die Position des Popups wird dynamisch berechnet, damit es neben dem ausgewählten Vers erscheint und sich gut ins Layout einfügt. So erzeugt man auf einfache Weise eine interaktive Kommentarfunktion in einer HTML-Darstellung von Bibeltexten mit JavaScript.