Pages

JSON Viewer Tool

 

Explanation

  1. HTML Structure:

    • <textarea>: Input area for users to paste JSON text.

    • Button: Triggers the formatJSON function to parse and format JSON.

    • <div id="jsonOutput">: Displays the formatted JSON with collapsible structure.

  2. CSS Styling:

    • Container & Colors: Gradient background and blue-themed button styling.

    • Button Hover Effect: Changes colour on hover.

    • Responsive: Adjusts to smaller screens with dynamic font sizes.

  3. JavaScript Function:

    • formatJSON:

      • Parse JSON: If successful, it uses the json-viewer-js library to format JSON with a structured view.

      • Error Handling: Displays an error message if the JSON is invalid.

How to Use

  1. Paste JSON: Copy and paste a JSON object into the textarea. For example:

 { "name": "Alice", "age": 25, "city": "Wonderland", "attributes": { "height": "5'6\"", "skills JSON Viewer Tool

JSON Viewer Tool

Subscribe to: Posts (Atom)