JSFiddle - React, Tailwind, and code Playground

by blackpolygon

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Text Storage App</title>
  <style>
    textarea {
      width: 400px;
      height: 200px;
    }
  </style>
</head>
<body>
  <h1>Text Storage App</h1>
  <textarea id="textInput" placeholder="Enter your text here"></textarea>
  <br>
  <button id="saveButton">Save Text</button>
  <button id="retrieveButton">Retrieve Text</button>

  <script>
    // Check if the browser supports IndexedDB
    if (!('indexedDB' in window)) {
      console.log('This browser does not support IndexedDB');
    } else {
      // Open a connection to the IndexedDB database
      const request = indexedDB.open('TextDatabase', 1);

      request.onupgradeneeded = event => {
        const db = event.target.result;
        const objectStore = db.createObjectStore('TextStore', { keyPath: 'id', autoIncrement: true });
        objectStore.createIndex('text', 'text', { unique: false });
      };

      request.onsuccess = event => {
        const db = event.target.result;

        // Save text data
        const saveButton = document.getElementById('saveButton');
        saveButton.addEventListener('click', () => {
          const textInput = document.getElementById('textInput');
          const textData = { text: textInput.value };

          const transaction = db.transaction('TextStore', 'readwrite');
          const objectStore = transaction.objectStore('TextStore');

          const saveRequest = objectStore.put(textData);

          saveRequest.onsuccess = () => {
            console.log('Text data saved successfully');
            textInput.value = ''; // Clear the input field
          };

          saveRequest.onerror = () => {
            console.error('Error saving text data');
          };
        });

        // Retrieve text data
        const retrieveButton = document.getElementById('retrieveButton');
        retrieveButton.addEventListener('click', () => {
          const transaction = db.transaction('TextStore', 'readonly');
          const...