¿Cuál es el script, html y css para hacer un JavaScript and CSS minifier con <textarea>, pero que solo lo junte en una sola linea, sin quitarle los espacios necesarios, con <input> Select Language: JS CSS y con boton comprimir, copiar y borrar?
Por supuesto, aquí te proporciono un ejemplo de cómo puedes crear un minificador de JS y CSS en HTML, CSS y JavaScript, que cumpla con las especificaciones mencionadas:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>Minificador de JS y CSS</title>
<style>
label {
display: block;
}
textarea {
width: 100%;
height: 200px;
}
</style>
</head>
<body>
<form>
<label for="language">Selecciona el Lenguaje:</label>
<select id="language">
<option value="js">JS</option>
<option value="css">CSS</option>
</select>
<label for="compress">Inserta el código aquí:</label>
<textarea id="compress" placeholder="Escribe o pega tu código aquí"></textarea>
<label for="output">Aquí está el código comprimido:</label>
<textarea id="output"></textarea>
<button type="button" id="compress-btn">Comprimir</button>
<button type="button" id="copy-btn">Copiar</button>
<button type="button" id="clear-btn">Borrar</button>
</form>
<script src="index.js"></script>
</body>
</html>
```
En el HTML, creamos un formulario con dos elementos `<textarea>`, uno para el código de entrada y otro para el código de salida comprimido, una etiqueta de selección para elegir el lenguaje (JS o CSS) y tres botones: uno para comprimir, otro para copiar y otro para limpiar.
CSS:
```css
#compress-btn, #copy-btn, #clear-btn {
display: inline-block;
margin-top: 10px;
}
```
En el CSS, simplemente definimos algunas reglas de estilo para los botones del formulario.
JavaScript:
```js
const MINIFY_MAP = {
js: /(;|\}|\n)\s*/g,
css: /([^\{])\s+/g
};
const languageSelect = document.querySelector('#language');
const compressInput = document.querySelector('#compress');
const outputArea = document.querySelector('#output');
const compressBtn = document.querySelector('#compress-btn');
const copyBtn = document.querySelector('#copy-btn');
const clearBtn = document.querySelector('#clear-btn');
function minify() {
const language = languageSelect.value;
const minifyMap = MINIFY_MAP[language];
let output = compressInput.value.trim();
if (minifyMap) {
output = output.replace(minifyMap, '$1');
}
outputArea.value = output;
}
function copyOutput() {
if (outputArea.value) {
outputArea.select();
document.execCommand('copy');
}
}
function clearOutput() {
compressInput.value = '';
outputArea.value = '';
}
compressBtn.addEventListener('click', minify);
copyBtn.addEventListener('click', copyOutput);
clearBtn.addEventListener('click', clearOutput);
```
En el JavaScript, primero definimos un objeto `MINIFY_MAP` que mapea lenguajes a expresiones regulares para minificarlos. En este caso, se utiliza una expresión regular específica para JS y otra para CSS.
A continuación, recuperamos las referencias a los elementos de entrada, salida y botones y definimos tres funciones de devolución de llamada. La función `minify()` comprime el código de entrada según el lenguaje seleccionado y muestra el resultado en el área de salida. La función `copyOutput()` copia el código comprimido al portapapeles si está presente. La función `clearOutput()` borra el código de entrada y de salida.
Finalmente, agregamos los controladores de eventos para los botones de compression, copia y limpieza.
¡Espero que esto te ayude a crear un minificador de JS y CSS en tu proyecto!
