JSON Viewer Tool
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #333;
}
.container {
background-color: white;
padding: 20px;
border-radius: 8px;
width: 70%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.title {
text-align: center;
font-size: 24px;
margin-bottom: 20px;
color: #4CAF50;
}
.upload-section {
text-align: center;
margin-bottom: 20px;
}
.upload-section input[type="file"] {
padding: 8px;
font-size: 16px;
background-color: #fff;
border: 2px solid #ddd;
border-radius: 4px;
}
.textarea-section {
margin-bottom: 20px;
text-align: center;
}
.textarea-section textarea {
width: 100%;
padding: 12px;
border-radius: 8px;
border: 1px solid #ccc;
font-family: 'Courier New', monospace;
font-size: 16px;
color: #333;
}
.json-output {
background-color: #f0f0f0;
padding: 20px;
border-radius: 8px;
font-size: 16px;
max-height: 400px;
overflow-y: auto;
white-space: pre-wrap;
}
.json-output .json-viewer {
color: #333;
font-size: 16px;
}
.json-output .json-viewer .key {
color: #d32f2f; /* Red for keys */
}
.json-output .json-viewer .value {
color: #388e3c; /* Green for values */
}
.json-output .json-viewer .string {
color: #1976d2; /* Blue for string values */
}
.json-output .json-viewer .number {
color: #fbc02d; /* Yellow for numbers */
}
.json-output .json-viewer .boolean {
color: #0288d1; /* Blue for booleans */
}
document.addEventListener('DOMContentLoaded', function () {
const fileInput = document.getElementById('fileInput');
const jsonInput = document.getElementById('jsonInput');
const jsonOutput = document.getElementById('jsonOutput');
// Function to format and display JSON
function formatJSON(jsonData) {
try {
const jsonViewer = new JSONViewer();
jsonOutput.innerHTML = '';
jsonOutput.appendChild(jsonViewer.getContainer());
jsonViewer.showJSON(jsonData);
} catch (e) {
jsonOutput.innerHTML = 'Invalid JSON format.';
}
}
// Event listener for file upload
fileInput.addEventListener('change', function (e) {
const file = e.target.files[0];
if (file && file.name.endsWith('.json')) {
const reader = new FileReader();
reader.onload = function () {
const jsonData = JSON.parse(reader.result);
formatJSON(jsonData);
};
reader.readAsText(file);
} else {
alert('Please upload a valid JSON file.');
}
});
// Event listener for manual JSON input
jsonInput.addEventListener('input', function () {
const jsonData = jsonInput.value.trim();
if (jsonData) {
try {
const parsedData = JSON.parse(jsonData);
formatJSON(parsedData);
} catch (e) {
jsonOutput.innerHTML = 'Invalid JSON format.';
}
} else {
jsonOutput.innerHTML = '';
}
});
});
