start data collection

Author: caroldinh

Frankenstein Diff.pdf:Zone.Identifier

@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://docs.google.com/
+HostUrl=https://doc-0o-3c-docstext.googleusercontent.com/export/0d5c1vuqimaigp22084hfjljbo/98mlgbaglh0qakb6n0lfqb0gpc/1735860640000/117830336670017105682/117830336670017105682/1ED0E2q-_Jgn2gPARCn1ujxXirNNR5oZGSjPFJ6iIUrc?format=pdf&id=1ED0E2q-_Jgn2gPARCn1ujxXirNNR5oZGSjPFJ6iIUrc&token=AC4w5VhMrxY677DvGzGN6LzaTDKzqGb9oQ:1735860570194&includes_info_params=true&usp=drive_web&cros_files=false&tab=t.0&inspectorResult=%7B%22pc%22:145,%22lplc%22:36%7D&dat=AOBvIb2T6Ml0o2MmvMikU7j0nluscVP0oUr7xmnbx-uwURYv6O88L1-VrZnJi03xn9yG6TaOtTifA1u0cFBFTsEUTJVHSwvipAVi4vwv_eQNrCKXKcmNCJOhmJJjy1Beg3JUbTxaaFPT7MtkPeIGbJd4AOtjNkH_m85DtjX_dHYHMXLuSL_D7HmFCr3XxQLTqyUTXC853C1GUB2nONRG0GpqMcoKjl9SwiTmVuFfg7PxlTxUKrDEffu2-sh5CnkVO395ChCrkqIm2_HetsO6VMbOWMMdIL6lPTAa7_Gqzi3WqS1RjKwnm1WKq-68wan6UzCzocW_iqERvcTgY5KnMeUIjqNyCKuq06rD-NgeKWmLwwxxC-qusWZKAKOttJYyl3SZlg6OmPNnvsbjDinSjFHnms7D4gt0jjlcTZe-1_ZjJGPkd3xlU02wCiHwo1f-XIhVkCO42J_QVCXvJAjMQecFG8Q13r9zXdaOZb9lLO0f32AfJxjnkD9PM7XlKJPuNY1FwuT779eZP3SG3giVgsGL33X6DtjlHVF6NY1DnO-9e_wuF2DbJ7lfd4HLZiuSxke_lidpqQxzsEaoVyhOQG_ZAG8F4-mpJOHv0u1lDP0RZHptNK_4-Yd6HL3UYxHypa7A0YmsLwZjgnn8XIQWNGQk_Wjw_leNN1U2QT4IyBqaxXHmckGlvQMFoa8J2tAYfzivp6GutgAmLpXOZ-_2osZSUZIy5KmSfMLiiX5xc4DwUnIbUbJgSooFJXw0QNZDY0jKQ1mcLELVzWQwDQmPaC6i8gClxW_J0PU0qkzgzFfBHApcH9p3XF2Y7wmvQYSlki4bsyR0ptaJFv1LGm1-9SLdF7ReMODOrVHR5StxWK3Hr7Hi02vmTBmv75135NmfVf-w5W2_Xyz8hr5EAFLRnaiEWSwfd-LJdAZL-f96SQyZuH7sDC_x1c3O8qYhQq8Mu-WQlMDfFlvhvQQyL6dKDLNUKzYwSfSM_hMFy-NhTX961W7H0EeQOGbXRLQCQ7QGrv1OAvE

diff_visual.pdf

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "cra-template": "1.2.0",
+    "diff": "^7.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-scripts": "5.0.1"
@@ -31,5 +32,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "web-vitals": "^4.2.4"
   }
 }

frankenstein-diffs.csv

@@ -1,23 +1,58 @@
 import logo from './logo.svg';
 import './App.css';
 
-function App() {
+import text1818 from './texts/frankenstein1818.txt';
+import text1831 from './texts/frankenstein1831.txt';
+import { useEffect, useState } from 'react';
+import { diffWords } from 'diff';
+
+const App = () => {
+
+  let [frankenstein1818, setFrankenstein1818] = useState("");
+  let [frankenstein1831, setFrankenstein1831] = useState("");
+
+  useEffect(() => {
+
+    fetch(text1818).then(res => res.text()).then(text => setFrankenstein1818(text));
+    fetch(text1831).then(res => res.text()).then(text => setFrankenstein1831(text));
+
+  }, [])
+
+  useEffect(() => {
+
+    if (frankenstein1818 !== "" && frankenstein1831 !== "") {
+
+      const diff = diffWords(frankenstein1818, frankenstein1831);
+      const display = document.getElementById('display'),
+            fragment = document.createDocumentFragment();
+      let diffStr = "";
+
+      diff.forEach((part, index) => {
+        const color = part.added ? 'green' :
+          part.removed ? 'red' : 'grey';
+        let span = document.createElement('span');
+        span.style.color = color;
+        span.appendChild(document
+          .createTextNode(part.value));
+        fragment.appendChild(span);
+        /*
+        if (part.added || part.removed) {
+          diffStr += `${index}, ${part.added ? "ADDED" : "REMOVED"}, \"${
+            part.value.replaceAll("\"", "&quot;").replaceAll("\n", "<br>")
+              .replaceAll("\t", "&emsp;").replaceAll(",", "&comma;")
+          }\", ${part.count}\n`
+        }
+          */
+      })
+      display.appendChild(fragment);
+      
+    }
+
+  }, [frankenstein1818, frankenstein1831])
+
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <pre id="display"></pre>
     </div>
   );
 }