JSFiddle - React, Tailwind, and code Playground

by blackpolygon

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Text Storage App</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
  <style>
    textarea {
      width: 400px;
      height: 200px;
    }

    .entry-section {
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>Text Storage Appa</h1>
  <textarea id="textInput" placeholder="Enter your text here"></textarea>
  <br>
  <input type="text" id="datePicker" placeholder="Select a date">
  <button id="saveButton">Save Text</button>
  <button id="retrieveButton">Retrieve Text</button>

  <div class="entry-section" id="entrySection" style="display: none;">
    <h2>Retrieved Entry</h2>
    <p>Date: <span id="entryDate"></span></p>
    <p>Text: <span id="entryText"></span></p>
    <p>Analysis: <span id="entryAnalysis"></span></p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
  <script>
    class DataManagement {
      constructor(databaseName, databaseVersion) {
        this.databaseName = databaseName;
        this.databaseVersion = databaseVersion;
        this.db = null;
      }

      initialize() {
        if (!('indexedDB' in window)) {
          console.error('This browser does not support IndexedDB');
          return;
        }

        const request = indexedDB.open(this.databaseName, this.databaseVersion);

        request.onupgradeneeded = this.onUpgradeNeeded.bind(this);
        request.onsuccess = this.onSuccess.bind(this);
        request.onerror = this.onError.bind(this);
      }

      onUpgradeNeeded(event) {
        const db = event.target.result;
        if (!db.objectStoreNames.contains('TextStore')) {
          const objectStore = db.createObjectStore('TextStore', { keyPath: 'id', autoIncrement: true });
          objectStore.createIndex('date', 'date', { unique: true });
          objectStore.createIndex('text', 'text', { unique: false });
        }
      }

      onSuccess(event) {
        this.db = event.target.result;
  ...