JavaScript Beautifier Tool
JavaScript Beautifier Tool
/* Global Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #f4f7f9;
color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 80%;
max-width: 900px;
}
header {
text-align: center;
margin-bottom: 20px;
}
h1 {
font-size: 24px;
color: #4CAF50;
}
/* Section Styles */
.input-output {
display: flex;
flex-direction: column;
gap: 20px;
}
.section {
display: flex;
flex-direction: column;
}
label {
font-weight: bold;
margin-bottom: 5px;
}
textarea {
width: 100%;
height: 200px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 14px;
color: #333;
resize: vertical;
}
textarea:focus {
outline: none;
border-color: #4CAF50;
}
/* Button Styles */
.actions {
display: flex;
justify-content: space-between;
gap: 10px;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
button:active {
background-color: #3e8e41;
}
/* Clear Button */
#clearButton {
background-color: #f44336;
}
#clearButton:hover {
background-color: #e53935;
}
// DOM elements
const beautifyButton = document.getElementById("beautifyButton");
const clearButton = document.getElementById("clearButton");
const inputCode = document.getElementById("inputCode");
const outputCode = document.getElementById("outputCode");
// Function to beautify JavaScript code
function beautifyCode() {
const code = inputCode.value;
if (code.trim() === "") {
alert("Please enter some JavaScript code to beautify.");
return;
}
// Use js-beautify library to beautify the input code
const beautifiedCode = js_beautify(code);
// Display the beautified code
outputCode.value = beautifiedCode;
}
// Function to clear both text areas
function clearTextAreas() {
inputCode.value = "";
outputCode.value = "";
}
// Event Listeners
beautifyButton.addEventListener("click", beautifyCode);
clearButton.addEventListener("click", clearTextAreas);
