Sort text line tool

 

Sort Text Lines Tool

Sorted Text

body { font-family: Arial, sans-serif; background-color: #f0f0f0; color: #333; margin: 0; padding: 0; } .container { max-width: 800px; margin: 20px auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); text-align: center; } h1 { color: #4CAF50; } .form-container, .result-container { margin-bottom: 20px; } textarea { width: 100%; height: 150px; padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px; } button { padding: 10px 20px; font-size: 16px; background-color: #4CAF50; color: #fff; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #45A049; } .result-container h2 { margin-top: 20px; } textarea[readonly] { background-color: #e0e0e0; cursor: not-allowed; } function sortLines() { const textInput = document.getElementById('textInput').value; const lines = textInput.split('\n'); const sortedLines = lines.sort(); const resultOutput = document.getElementById('resultOutput'); resultOutput.value = sortedLines.join('\n'); }

Explanation

1. HTML:

   • Contains a text area for input text and another text area for displaying the sorted text.
   • Includes a button to trigger the sorting process.

2. CSS:

   • Styles the text areas, button, and overall layout for a colorful and responsive design.

3. JavaScript:

   • The sortLines function retrieves the text, splits it into lines, sorts the lines, and displays the sorted text in the output text area.

This code provides a complete, responsive, and colorful "Sort Text Lines" tool. You can further customize it by adding more features or styling options as needed.