Skip to content

Commit 6e5793d

Browse files
Add files via upload
1 parent ebafc09 commit 6e5793d

File tree

3 files changed

+216
-0
lines changed

3 files changed

+216
-0
lines changed

code-beautifier.css

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
/* Code Beautifier for HTML, CSS and JavaScript */
2+
/* developed by Tawhidur Rahman Dear, https://www.tawhidurrahmandear.com */
3+
/* Live Preview available at https://www.devilhunter.net/p/code-beautifier.html */
4+
5+
6+
7+
/* Styles */
8+
9+
body {
10+
font-family: Tahoma, "Trebuchet MS", sans-serif;
11+
color: #000000;
12+
}
13+
14+
15+
/* Code Beautifier for HTML, CSS and JavaScript Styles */
16+
17+
#notification {
18+
margin-top: 20px;
19+
margin-bottom: 20px;
20+
}
21+
22+
/* Input & Select Styles */
23+
.code-beautifier_input, .code-beautifier_select {
24+
font-family: Tahoma, "Trebuchet MS", sans-serif;
25+
width: 100%;
26+
padding: 10px;
27+
margin: 10px 0;
28+
border: 1px solid #6600FF;
29+
border-radius: 5px;
30+
font-size: 14px;
31+
background-color: #ffffff;
32+
}
33+
34+
.code-beautifier_input:focus, .code-beautifier_select:focus {
35+
border-color: #6600FF;
36+
outline: none;
37+
}
38+
39+
/* Button Styles */
40+
.code-beautifier_button {
41+
padding: 15px 20px;
42+
background-color: #6600FF;
43+
color: #ffffff;
44+
font-size: 15px;
45+
border: none;
46+
border-radius: 5px;
47+
cursor: pointer;
48+
transition: background-color 0.5s ease;
49+
}
50+
51+
.code-beautifier_button:hover {
52+
background-color: #e0ccff;
53+
color: #000000;
54+
transition: background-color 0.5s ease;
55+
}
56+
57+
/* Textarea Styles */
58+
.code-beautifier_textarea {
59+
font-family: "Roboto Mono", "Source Code Pro", Consolas, Monaco, "Courier New", Courier, "Liberation Mono", monospace;
60+
font-size: 14px;
61+
width: 100%;
62+
height: 400px;
63+
padding: 25px;
64+
margin-top: 20px;
65+
border: 1px solid #6600FF;
66+
border-radius: 5px;
67+
font-size: 14px;
68+
background-color: #EEF3FA;
69+
resize: none;
70+
box-sizing: border-box;
71+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
72+
white-space: pre-wrap;
73+
word-wrap: break-word;
74+
overflow-x: hidden;
75+
}
76+
77+
/* Link Styles */
78+
#code-beautifier p a {
79+
font-family: Tahoma, "Trebuchet MS", sans-serif;
80+
font-size: 10pt;
81+
font-weight: 700;
82+
color: #0078d7;
83+
text-decoration: none;
84+
}
85+
86+
#code-beautifier p a:hover {
87+
text-decoration: none;
88+
}
89+
90+
/* Responsive Styles */
91+
@media (max-width: 768px) {
92+
#code-beautifier {
93+
padding: 25px;
94+
}
95+
96+
.code-beautifier_input, .code-beautifier_select, .code-beautifier_button, .code-beautifier_textarea {
97+
font-size: 12px;
98+
}
99+
}

code-beautifier.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<link rel="stylesheet" type="text/css" href="code-beautifier.css">
2+
<script src="code-beautifier.js"></script>
3+
4+
<!-- Code Beautifier for HTML, CSS and JavaScript -->
5+
<!-- developed by Tawhidur Rahman Dear, https://www.tawhidurrahmandear.com -->
6+
<!-- Live Preview available at https://www.devilhunter.net/p/code-beautifier.html -->
7+
8+
<div style="text-align: justify;"><span style="font-family: Ubuntu;">Format your HTML, CSS or JavaScript code to clean it up and beautify it. Make your HTML, CSS or JavaScript easier to read and validate it.</span></div>
9+
10+
<br />
11+
12+
13+
<textarea class="code-beautifier_textarea" id="inputCode"></textarea>
14+
<br><br>
15+
<div>
16+
<button class="code-beautifier_button" onclick="beautifyCode('html')">Beautify HTML</button>
17+
<button class="code-beautifier_button" onclick="beautifyCode('css')">Beautify CSS</button>
18+
<button class="code-beautifier_button" onclick="beautifyCode('js')">Beautify JavaScript</button>
19+
</div>
20+
<br />
21+
<textarea class="code-beautifier_textarea" id="outputCode" readonly=""></textarea>
22+
<div id="notification"></div>
23+
<div>
24+
<button class="code-beautifier_button" onclick="clearAll()">Clear</button>
25+
<button class="code-beautifier_button" onclick="copyCode()">Copy Code</button>
26+
</div>

code-beautifier.js

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
// Code Beautifier for HTML, CSS and JavaScript
2+
// developed by Tawhidur Rahman Dear, https://www.tawhidurrahmandear.com
3+
// Live Preview available at https://www.devilhunter.net/p/code-beautifier.html
4+
5+
const getElement = (id) => document.getElementById(id);
6+
const notify = (message, duration = 2000) => {
7+
const notification = getElement('notification');
8+
notification.textContent = message;
9+
setTimeout(() => (notification.textContent = ''), duration);
10+
};
11+
12+
const beautifyHTML = (html) => {
13+
let formatted = '';
14+
let indentLevel = 0;
15+
const indentSize = ' ';
16+
html.split(/>\s*</).forEach((element) => {
17+
if (element.match(/^\/\w/)) {
18+
indentLevel--;
19+
formatted += `${indentSize.repeat(indentLevel)}<${element}>\n`;
20+
} else if (element.match(/^<?\w[^>]*[^/]$/)) {
21+
formatted += `${indentSize.repeat(indentLevel)}<${element}>\n`;
22+
indentLevel++;
23+
} else {
24+
formatted += `${indentSize.repeat(indentLevel)}<${element}>\n`;
25+
}
26+
});
27+
return formatted.trim();
28+
};
29+
30+
const beautifyCSS = (css) =>
31+
css
32+
.replace(/\s+/g, ' ')
33+
.replace(/;\s*/g, ';\n ')
34+
.replace(/\{\s*/g, ' {\n ')
35+
.replace(/\}\s*/g, '\n}\n')
36+
.replace(/,\s*/g, ',\n ')
37+
.trim();
38+
39+
const beautifyJS = (js) => {
40+
let formatted = '';
41+
let indentLevel = 0;
42+
const indentSize = ' ';
43+
js.split(/([{};])/).forEach((token) => {
44+
token = token.trim();
45+
if (token === '{') {
46+
formatted += `${indentSize.repeat(indentLevel)}${token}\n`;
47+
indentLevel++;
48+
} else if (token === '}') {
49+
indentLevel--;
50+
formatted += `${indentSize.repeat(indentLevel)}${token}\n`;
51+
} else if (token === ';') {
52+
formatted += `${token}\n`;
53+
} else if (token) {
54+
formatted += `${indentSize.repeat(indentLevel)}${token}`;
55+
}
56+
});
57+
return formatted.trim();
58+
};
59+
60+
const beautifyCode = (type) => {
61+
const inputCode = getElement('inputCode').value.trim();
62+
if (!inputCode) {
63+
notify('Please paste your code in the input box.', 3000);
64+
return;
65+
}
66+
67+
let outputCode = '';
68+
if (type === 'html') outputCode = beautifyHTML(inputCode);
69+
else if (type === 'css') outputCode = beautifyCSS(inputCode);
70+
else if (type === 'js') outputCode = beautifyJS(inputCode);
71+
72+
getElement('outputCode').value = outputCode;
73+
notify('Code beautified successfully!');
74+
};
75+
76+
const clearAll = () => {
77+
getElement('inputCode').value = '';
78+
getElement('outputCode').value = '';
79+
notify('We cleared all fields.');
80+
};
81+
82+
const copyCode = () => {
83+
const outputCode = getElement('outputCode').value;
84+
if (!outputCode) {
85+
notify('There is nothing to copy!', 3000);
86+
return;
87+
}
88+
navigator.clipboard.writeText(outputCode)
89+
.then(() => notify('Copied successfully ...'))
90+
.catch(() => notify('Failed to copy!', 3000));
91+
};

0 commit comments

Comments
 (0)