json editor added

techy4shri · Jun 7, 2024 · 3848dcb · 3848dcb
1 parent 0648846
commit 3848dcb
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 106 deletions.
diff --git a/FlashCard Maker/popup.html b/FlashCard Maker/popup.html
diff --git a/FlashCard Maker/popup.js b/FlashCard Maker/popup.js
diff --git a/FlashCard Maker/manifest.json → JSON Editor/manifest.json b/FlashCard Maker/manifest.json → JSON Editor/manifest.json
@@ -1,8 +1,8 @@
 {
     "manifest_version": 3,
-    "name": "Flashcard Maker",
+    "name": "JSON Formatter",
     "version": "1.0",
-    "description": "Create, manage, and study flashcards within your browser.",
+    "description": "A Chrome extension to format and validate JSON data.",
     "permissions": ["storage"],
     "action": {
       "default_popup": "popup.html"

diff --git a/JSON Editor/popup.html b/JSON Editor/popup.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>JSON Formatter</title>
+  <link rel="stylesheet" type="text/css" href="styles.css">
+</head>
+<body>
+  <div id="app">
+    <h1>JSON Formatter</h1>
+    <textarea id="json-input" placeholder="Paste your JSON here..."></textarea>
+    <button id="format-button">Format JSON</button>
+    <div id="json-output" class="json-output"></div>
+    <div id="error-message" class="error-message"></div>
+  </div>
+  <script src="popup.js"></script>
+</body>
+</html>
diff --git a/JSON Editor/popup.js b/JSON Editor/popup.js
@@ -0,0 +1,39 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const formatButton = document.getElementById('format-button');
+    const jsonInput = document.getElementById('json-input');
+    const jsonOutput = document.getElementById('json-output');
+    const errorMessage = document.getElementById('error-message');
+
+    formatButton.addEventListener('click', function () {
+      const jsonString = jsonInput.value.trim();
+      try {
+        const json = JSON.parse(jsonString);
+        const formattedJson = JSON.stringify(json, null, 2);
+        jsonOutput.innerHTML = syntaxHighlight(formattedJson);
+        errorMessage.textContent = '';
+      } catch (e) {
+        errorMessage.textContent = 'Invalid JSON: ' + e.message;
+        jsonOutput.textContent = '';
+      }
+    });
+
+    function syntaxHighlight(json) {
+      json = json.replace(/(&)/g, '&amp;').replace(/(>)/g, '&gt;').replace(/(<)/g, '&lt;');
+      return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|\b(\d+)\b)/g, function (match) {
+        var cls = 'number';
+        if (/^"/.test(match)) {
+          if (/:$/.test(match)) {
+            cls = 'key';
+          } else {
+            cls = 'string';
+          }
+        } else if (/true|false/.test(match)) {
+          cls = 'boolean';
+        } else if (/null/.test(match)) {
+          cls = 'null';
+        }
+        return '<span class="' + cls + '">' + match + '</span>';
+      });
+    }
+  });
+
diff --git a/FlashCard Maker/styles.css → JSON Editor/styles.css b/FlashCard Maker/styles.css → JSON Editor/styles.css
@@ -1,17 +1,18 @@
 body {
     font-family: Arial, sans-serif;
     padding: 10px;
-    width: 300px;
+    width: 400px;
   }
 
-  h1, h2 {
+  h1 {
     color: #333;
   }
 
-  input[type="text"] {
+  textarea {
     width: calc(100% - 22px);
+    height: 100px;
     padding: 10px;
-    margin: 5px 0;
+    margin-bottom: 10px;
     box-sizing: border-box;
   }
 
@@ -28,7 +29,20 @@ body {
     background-color: #45a049;
   }
 
-  #decks {
+  .json-output {
+    white-space: pre-wrap;
+    background-color: #f5f5f5;
+    padding: 10px;
+    border: 1px solid #ddd;
+    margin-top: 10px;
+  }
+
+  .error-message {
+    color: red;
     margin-top: 10px;
   }
-
+  .string { color: green; }
+.number { color: darkorange; }
+.boolean { color: blue; }
+.null { color: magenta; }
+.key { color: red; }