Sort Text Lines Tool
<* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(to right, #f7b42c, #fc575e);
color: #333;
padding: 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
text-align: center;
}
header h1 {
color: #fc575e;
font-size: 24px;
margin-bottom: 10px;
}
header p {
font-size: 14px;
color: #777;
}
textarea {
width: 100%;
height: 150px;
margin: 10px 0;
padding: 10px;
border: 2px solid #fc575e;
border-radius: 8px;
font-size: 14px;
resize: none;
outline: none;
transition: border-color 0.3s ease;
}
textarea:focus {
border-color: #f7b42c;
}
.buttons {
display: flex;
justify-content: space-between;
margin: 10px 0;
}
.btn {
flex: 1;
padding: 10px 15px;
margin: 0 5px;
background: #f7b42c;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background 0.3s ease;
}
.btn:hover {
background: #fc575e;
}
.btn.danger {
background: #e74c3c;
}
.btn.danger:hover {
background: #c0392b;
}
footer p {
font-size: 12px;
color: #777;
margin-top: 10px;
}>
{
e {
line.trim());
a.localeCompare(b));
{
< const lines = inputText.value.split('\n').filter(line => line.trim());
< const sortedLines = lines.sort((a, b) => b.localeCompare(a));
< outputText.value = sortedLines.join('\n');
});
// Clear all text
clearTextBtn.addEventListener('click', () => {
< inputText.value = '';
outputText.value = '';
});
});
Features:
1. Sorting Options:
A-Z (Ascending)
Z-A (Descending)
2. Input/Output Areas:
Input field for pasting or typing text.
Output field to display the sorted text.
3. Clear Button:
Clears both input and output fields.
4. Responsive Design:
Fits well on all devices with a clean and user-friendly interface.
5. Styling:
Gradient background, colorful buttons, and smooth interactions.
6. Free FontAwesome Icons:
Adds icons to buttons for a better user experience.
You can copy and paste these files into your project folder, ensuring the proper file structure.
.webp)
Top 5 Upcoming New Electric Cars: 2024 in USA 2024: A Promising Year for Electric Car Enthusiasts There is a lot of enthusiasm in the autom...
रांझणा" फिल्म की कहानी: एक अमर प्रेम कथा रांझणा": एक अमर प्रेम कहानी और सामाजिक संदेश रांझणा " केवल एक फिल्म नहीं, बल्कि ए...
Bangladesh vs Netherlands, Match 27, T20 World Cup 2024 in Hindi) बांग्लादेश बनाम नीदरलैंड्स, मैच 27, टी20 विश्व कप 2024 BAN vs NED 1. परिच...
No comments:
Post a Comment