Skip to content

Commit 94bf69d

Browse files
blueelvisblueelvis
committed
added json beautifier
1 parent 9fd8001 commit 94bf69d

File tree

1 file changed

+199
-0
lines changed

1 file changed

+199
-0
lines changed

‎html/json-beautifier.html

+199
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>JSON Beautifier</title>
8+
<style>
9+
body {
10+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
11+
max-width: 800px;
12+
margin: 0 auto;
13+
padding: 20px;
14+
background-color: #f5f5f5;
15+
}
16+
17+
.container {
18+
background-color: white;
19+
padding: 30px;
20+
border-radius: 10px;
21+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
22+
}
23+
24+
h1 {
25+
color: #333;
26+
text-align: center;
27+
margin-bottom: 30px;
28+
}
29+
30+
textarea {
31+
width: 100%;
32+
height: 200px;
33+
padding: 12px;
34+
border: 1px solid #ddd;
35+
border-radius: 4px;
36+
font-family: monospace;
37+
font-size: 14px;
38+
resize: vertical;
39+
margin-bottom: 20px;
40+
}
41+
42+
.buttons {
43+
margin: 20px 0;
44+
text-align: center;
45+
}
46+
47+
button {
48+
padding: 10px 20px;
49+
margin: 0 10px;
50+
border: none;
51+
border-radius: 4px;
52+
cursor: pointer;
53+
font-size: 14px;
54+
transition: background-color 0.3s;
55+
}
56+
57+
#beautify {
58+
background-color: #2196F3;
59+
color: white;
60+
}
61+
62+
#minify {
63+
background-color: #4CAF50;
64+
color: white;
65+
}
66+
67+
#copy {
68+
background-color: #757575;
69+
color: white;
70+
}
71+
72+
button:hover {
73+
opacity: 0.9;
74+
}
75+
76+
.help-text {
77+
background-color: #f8f9fa;
78+
padding: 15px;
79+
border-radius: 5px;
80+
margin-bottom: 20px;
81+
font-size: 14px;
82+
}
83+
84+
.error {
85+
color: #dc3545;
86+
margin-top: 10px;
87+
text-align: center;
88+
font-size: 14px;
89+
}
90+
91+
.success {
92+
color: #28a745;
93+
margin-top: 10px;
94+
text-align: center;
95+
font-size: 14px;
96+
}
97+
</style>
98+
</head>
99+
100+
<body>
101+
<div class="container">
102+
<h1>JSON Beautifier</h1>
103+
104+
<div class="help-text">
105+
<p>How to use this JSON Beautifier:</p>
106+
<ol>
107+
<li>Paste your JSON in the input area</li>
108+
<li>Click "Beautify" to format with proper indentation</li>
109+
<li>Click "Minify" to compress the JSON</li>
110+
<li>Use "Copy" to copy the result to clipboard</li>
111+
</ol>
112+
<p><strong>Features:</strong></p>
113+
<ul>
114+
<li>Validates JSON syntax</li>
115+
<li>Preserves data types</li>
116+
<li>2-space indentation</li>
117+
<li>Auto-saves your last input</li>
118+
</ul>
119+
</div>
120+
121+
<textarea id="input" placeholder="Paste your JSON here..."></textarea>
122+
123+
<div class="buttons">
124+
<button id="beautify">Beautify</button>
125+
<button id="minify">Minify</button>
126+
<button id="copy">Copy</button>
127+
</div>
128+
129+
<div id="message"></div>
130+
</div>
131+
132+
<script>
133+
const input = document.getElementById('input');
134+
const message = document.getElementById('message');
135+
136+
// Load saved content
137+
document.addEventListener('DOMContentLoaded', () => {
138+
const savedContent = localStorage.getItem('jsonContent');
139+
if (savedContent) {
140+
input.value = savedContent;
141+
}
142+
});
143+
144+
// Save content on change
145+
input.addEventListener('input', () => {
146+
localStorage.setItem('jsonContent', input.value);
147+
});
148+
149+
function showMessage(text, isError = false) {
150+
message.textContent = text;
151+
message.className = isError ? 'error' : 'success';
152+
setTimeout(() => {
153+
message.textContent = '';
154+
message.className = '';
155+
}, 3000);
156+
}
157+
158+
function beautifyJSON() {
159+
try {
160+
const obj = JSON.parse(input.value);
161+
input.value = JSON.stringify(obj, null, 2);
162+
showMessage('JSON beautified successfully!');
163+
} catch (e) {
164+
showMessage('Invalid JSON format!', true);
165+
}
166+
}
167+
168+
function minifyJSON() {
169+
try {
170+
const obj = JSON.parse(input.value);
171+
input.value = JSON.stringify(obj);
172+
showMessage('JSON minified successfully!');
173+
} catch (e) {
174+
showMessage('Invalid JSON format!', true);
175+
}
176+
}
177+
178+
async function copyToClipboard() {
179+
try {
180+
await navigator.clipboard.writeText(input.value);
181+
showMessage('Copied to clipboard!');
182+
} catch (e) {
183+
showMessage('Failed to copy!', true);
184+
}
185+
}
186+
187+
document.getElementById('beautify').addEventListener('click', beautifyJSON);
188+
document.getElementById('minify').addEventListener('click', minifyJSON);
189+
document.getElementById('copy').addEventListener('click', copyToClipboard);
190+
191+
// Handle paste with Ctrl+V
192+
input.addEventListener('paste', (e) => {
193+
// Small delay to let the paste complete
194+
setTimeout(beautifyJSON, 0);
195+
});
196+
</script>
197+
</body>
198+
199+
</html>

0 commit comments

Comments
 (0)