body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
color: #333;
background-color: #f9f9f9;
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
}
.container {
background-color: #fff;
border-radius: 10px;
padding: 30px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.form-group {
margin-bottom: 25px;
}
label {
display: block;
margin-bottom: 10px;
font-weight: 600;
color: #2c3e50;
}
textarea {
width: 100%;
padding: 15px;
border: 1px solid #ddd;
border-radius: 6px;
box-sizing: border-box;
font-size: 16px;
resize: vertical;
min-height: 150px;
font-family: inherit;
transition: border-color 0.3s;
}
textarea:focus {
border-color: #3498db;
outline: none;
}
.btn {
background-color: #3498db;
color: white;
border: none;
padding: 12px 20px;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
font-weight: 500;
transition: all 0.3s;
margin-right: 10px;
margin-bottom: 10px;
}
.btn:hover {
background-color: #2980b9;
transform: translateY(-2px);
}
.btn-secondary {
background-color: #95a5a6;
}
.btn-secondary:hover {
background-color: #7f8c8d;
}
.btn-success {
background-color: #2ecc71;
}
.btn-success:hover {
background-color: #27ae60;
}
.result-container {
margin-top: 30px;
border-top: 2px solid #eee;
padding-top: 25px;
}
.result-box {
position: relative;
margin-top: 15px;
}
.result-text {
padding: 15px;
border-radius: 6px;
background-color: #f8f9fa;
border: 1px solid #eee;
white-space: pre-wrap;
font-family: 'Courier New', monospace;
min-height: 100px;
}
.copy-btn {
position: absolute;
top: 10px;
right: 10px;
background-color: #34495e;
color: white;
border: none;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: all 0.2s;
display: flex;
align-items: center;
}
.copy-btn:hover {
background-color: #2c3e50;
}
.copy-btn svg {
margin-right: 5px;
width: 14px;
height: 14px;
}
.stats {
margin-top: 15px;
font-size: 14px;
color: #7f8c8d;
display: flex;
justify-content: space-between;
}
.options {
background-color: #f8f9fa;
padding: 20px;
border-radius: 6px;
margin-bottom: 20px;
border: 1px solid #eee;
}
.radio-group {
margin: 10px 0;
}
.radio-option {
margin-right: 15px;
}
.radio-option input {
margin-right: 5px;
}
.hint {
font-size: 13px;
color: #95a5a6;
margin-top: 5px;
}
.notification {
position: fixed;
top: 20px;
right: 20px;
background-color: #2ecc71;
color: white;
padding: 12px 20px;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transform: translateX(100%);
opacity: 0;
transition: all 0.3s ease;
z-index: 1000;
}
.notification.show {
transform: translateX(0);
opacity: 1;
}
Herramienta de conversión de mayúsculas y minúsculas
Texto de entrada:
Opciones de conversión:
Todo mayúsculas Todo minúsculas Primera letra de cada palabra en mayúscula Formato de título (primera letra de cada oración en mayúscula) Formato de oración (solo la primera letra de la primera palabra en mayúscula) Invertir mayúsculas y minúsculas
Seleccione el método de conversión de mayúsculas y minúsculas que necesita
Convertir texto Limpiar resultado
Resultado de la conversión:
Copiar
Longitud original: 0 caracteres
Longitud convertida: 0 caracteres
Tiempo de conversión: 0ms
¡Texto copiado al portapapeles!
document.addEventListener('DOMContentLoaded', function() {
const inputText = document.getElementById('inputText');
const convertBtn = document.getElementById('convertBtn');
const clearBtn = document.getElementById('clearBtn');
const resultDiv = document.getElementById('result');
const copyBtn = document.getElementById('copyBtn');
const originalLengthSpan = document.getElementById('originalLength');
const convertedLengthSpan = document.getElementById('convertedLength');
const processTimeSpan = document.getElementById('processTime');
const convertOptions = document.querySelectorAll('input[name="convertOption"]');
const notification = document.getElementById('notification');
// Convertir texto
convertBtn.addEventListener('click', function() {
const text = inputText.value.trim();
if (!text) {
alert('Por favor, introduzca el texto a convertir');
return;
}
const startTime = performance.now();
// Obtener la opción de conversión seleccionada
let selectedOption = 'uppercase';
for (const option of convertOptions) {
if (option.checked) {
selectedOption = option.value;
break;
}
}
// Realizar la conversión
let convertedText = text;
switch (selectedOption) {
case 'uppercase':
convertedText = text.toUpperCase();
break;
case 'lowercase':
convertedText = text.toLowerCase();
break;
case 'capitalize':
convertedText = capitalizeWords(text);
break;
case 'titlecase':
convertedText = titleCase(text);
break;
case 'sentencecase':
convertedText = sentenceCase(text);
break;
case 'inverse':
convertedText = inverseCase(text);
break;
default:
convertedText = text.toUpperCase();
}
const endTime = performance.now();
const timeTaken = (endTime - startTime).toFixed(2);
// Mostrar resultado
resultDiv.textContent = convertedText;
originalLengthSpan.textContent = text.length;
convertedLengthSpan.textContent = convertedText.length;
processTimeSpan.textContent = timeTaken;
});
// Limpiar resultado
clearBtn.addEventListener('click', function() {
inputText.value = '';
resultDiv.textContent = '';
originalLengthSpan.textContent = '0';
convertedLengthSpan.textContent = '0';
processTimeSpan.textContent = '0';
});
// Copiar al portapapeles
copyBtn.addEventListener('click', function() {
const textToCopy = resultDiv.textContent;
if (!textToCopy) return;
// Usar la API moderna del portapapeles
if (navigator.clipboard) {
navigator.clipboard.writeText(textToCopy).then(function() {
showNotification();
}).catch(function(err) {
// Si la API falla, usar el método tradicional
fallbackCopyText(textToCopy);
});
} else {
// Método de copia tradicional
fallbackCopyText(textToCopy);
}
});
// Método de copia tradicional
function fallbackCopyText(text) {
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.style.position = 'fixed'; // Evitar desplazarse al final de la página
document.body.appendChild(textarea);
textarea.select();
try {
const successful = document.execCommand('copy');
if (successful) {
showNotification();
} else {
alert('Error al copiar, seleccione el texto manualmente y use Ctrl+C para copiar');
}
} catch (err) {
alert('Error al copiar, seleccione el texto manualmente y use Ctrl+C para copiar');
}
document.body.removeChild(textarea);
}
// Mostrar notificación
function showNotification() {
notification.classList.add('show');
setTimeout(function() {
notification.classList.remove('show');
}, 2000);
}
// Diversas funciones de conversión
function capitalizeWords(text) {
return text.replace(/\b\w+/g, function(word) {
return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
});
}
function titleCase(text) {
// Formato de título simplificado - primera letra de cada oración en mayúscula
// Una implementación más compleja puede manejar excepciones (como "a", "an", "the", etc.)
return text.replace(/(?:^|\. )\w/g, function(match) {
return match.toUpperCase();
});
}
function sentenceCase(text) {
if (!text) return text;
const trimmed = text.trim();
return trimmed.charAt(0).toUpperCase() + trimmed.slice(1).toLowerCase();
}
function inverseCase(text) {
return text.split('').map(function(char) {
if (char === char.toUpperCase() && char !== char.toLowerCase()) {
return char.toLowerCase();
} else if (char === char.toLowerCase() && char !== char.toUpperCase()) {
return char.toUpperCase();
}
return char;
}).join('');
}
// Estadísticas en tiempo real del número de caracteres de entrada (opcional)
inputText.addEventListener('input', function() {
// Si se necesita procesamiento en tiempo real, se puede agregar código aquí
});
});