Update index.html

Author: ankitvommune

jsonformatter/index.html

@@ -20,7 +20,7 @@ <h2>JSON Formatter</h2>
     <div class="row my-4">
         <!-- Left Panel -->
         <div class="col-md-4">
-            <textarea class="form-control" rows="15" placeholder="JSON input..."></textarea>
+            <textarea class="form-control" rows="15" placeholder="JSON input..." id="json_input"></textarea>
         </div>
 
         <!-- Center Panel (Upload & Validate Section) -->
@@ -35,7 +35,7 @@ <h2>JSON Formatter</h2>
                         <option>8 Tab Space</option>
                     </select>
                 </div>
-                <button class="btn btn-success mb-3">Format / Beautify</button>
+                <button class="btn btn-success mb-3" onclick="formatJson()" >Format / Beautify</button>
                 <div class="mt-4">
                     <img src="https://via.placeholder.com/300x250" alt="Ad" class="img-fluid">
                 </div>
@@ -44,7 +44,7 @@ <h2>JSON Formatter</h2>
 
         <!-- Right Panel -->
         <div class="col-md-4">
-            <textarea class="form-control" rows="15" placeholder="Formatted JSON..."></textarea>
+            <pre id="formatted_JsonOutput"></pre>
         </div>
     </div>
 
@@ -58,6 +58,20 @@ <h2>JSON Formatter</h2>
 
 <!-- Bootstrap JS -->
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+     <script>
+        function format_json() {
+            const jsonInput = document.getElementById('json_input').value;
+            try {
+                // Parse the input JSON
+                const parsedJson = JSON.parse(jsonInput);
+                // Format JSON with pretty print
+                const formattedJson = JSON.stringify(parsedJson, null, 4);
+                document.getElementById('formatted_JsonOutput').textContent = formattedJson;
+            } catch (error) {
+                document.getElementById('formatted_JsonOutput').textContent = 'Invalid JSON: ' + error.message;
+            }
+        }
+    </script>
 </body>
 </html>