Here's the complete code for a responsive and colorful "Sort Text Lines Tool." It includes features like case sensitivity, removing duplicate lines, and sorting in ascending or descending order.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sort Text Lines Tool</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<style>
body {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: #fff;
font-family: 'Arial', sans-serif;
padding: 20px;
}
.container {
background: #ffffff1a;
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
textarea {
resize: none;
}
.btn-primary {
background-color: #ff6f61;
border-color: #ff6f61;
}
.btn-primary:hover {
background-color: #ff4c3a;
border-color: #ff4c3a;
}
.btn-secondary {
background-color: #f8c22e;
border-color: #f8c22e;
color: #fff;
}
.btn-secondary:hover {
background-color: #e6ae0c;
border-color: #e6ae0c;
}
.form-check-label {
color: #fff;
}
.footer {
margin-top: 20px;
text-align: center;
font-size: 0.9rem;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center mb-4">Sort Text Lines Tool</h1>
<div class="mb-3">
<label for="textInput" class="form-label">Enter Text Lines:</label>
<textarea id="textInput" class="form-control" rows="8" placeholder="Enter text here..."></textarea>
</div>
<div class="mb-3">
<div class="form-check">
<input type="checkbox" id="ignoreCase" class="form-check-input">
<label for="ignoreCase" class="form-check-label">Ignore Case</label>
</div>
<div class="form-check">
<input type="checkbox" id="uniqueLines" class="form-check-input">
<label for="uniqueLines" class="form-check-label">Remove Duplicate Lines</label>
</div>
</div>
<div class="d-flex justify-content-between">
<button id="sortAscBtn" class="btn btn-primary">Sort Ascending</button>
<button id="sortDescBtn" class="btn btn-secondary">Sort Descending</button>
</div>
<div class="footer">
<p>Created with ❤️ by Your Name</p>
</div>
</div>
<script>
document.getElementById('sortAscBtn').addEventListener('click', () => {
const input = document.getElementById('textInput').value;
const ignoreCase = document.getElementById('ignoreCase').checked;
const uniqueLines = document.getElementById('uniqueLines').checked;
let lines = input.split('\n');
if (uniqueLines) {
lines = [...new Set(lines)];
}
lines.sort((a, b) => {
if (ignoreCase) {
return a.localeCompare(b, undefined, { sensitivity: 'base' });
}
return a.localeCompare(b);
});
document.getElementById('textInput').value = lines.join('\n');
});
document.getElementById('sortDescBtn').addEventListener('click', () => {
const input = document.getElementById('textInput').value;
const ignoreCase = document.getElementById('ignoreCase').checked;
const uniqueLines = document.getElementById('uniqueLines').checked;
let lines = input.split('\n');
if (uniqueLines) {
lines = [...new Set(lines)];
}
lines.sort((a, b) => {
if (ignoreCase) {
return b.localeCompare(a, undefined, { sensitivity: 'base' });
}
return b.localeCompare(a);
});
document.getElementById('textInput').value = lines.join('\n');
});
</script>
</body>
</html>