Sort line text tool
Sure, here is a complete responsive code for a Sort Text Lines Tool using HTML, CSS, and JavaScript.
HTML Code:
php
Copy code
Sort Text Lines Tool
CSS Code:
css
Copy code
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #f2f2f2;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
textarea {
width: 100%;
height: 200px;
padding: 10px;
margin-bottom: 20px;
}
button {
display: block;
margin: 0 auto;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #3e8e41;
}
JavaScript Code:
lua
Copy code
function sortLines() {
// Get the input and output elements
var input = document.getElementById("input");
var output = document.getElementById("output");
// Split the input value into an array of lines
var lines = input.value.split("\n");
// Sort the lines in alphabetical order
lines.sort();
// Join the sorted lines and set the output value
output.value = lines.join("\n");
}
This code will create a responsive Sort Text Lines Tool that allows users to enter text in a textarea, sort the lines in alphabetical order, and display the sorted text in another textarea. The tool will work on desktop and mobile devices thanks to the responsive CSS design
Comments
Post a Comment