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;
}
Character Case Conversion Tool
Input Text:
Conversion Options:
ALL UPPERCASE all lowercase Capitalize Each Word Title Case (Capitalize First Letter of Each Sentence) Sentence case (Capitalize only the first word) Invert Case
Select the text case conversion method you need
Convert Text Clear Results
Conversion Result:
Copy
Original Length: 0 characters
Converted Length: 0 characters
Conversion Time: 0ms
Text copied to clipboard!
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');
// Convert text
convertBtn.addEventListener('click', function() {
const text = inputText.value.trim();
if (!text) {
alert('Please enter text to convert');
return;
}
const startTime = performance.now();
// Get selected conversion option
let selectedOption = 'uppercase';
for (const option of convertOptions) {
if (option.checked) {
selectedOption = option.value;
break;
}
}
// Perform conversion
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);
// Display result
resultDiv.textContent = convertedText;
originalLengthSpan.textContent = text.length;
convertedLengthSpan.textContent = convertedText.length;
processTimeSpan.textContent = timeTaken;
});
// Clear results
clearBtn.addEventListener('click', function() {
inputText.value = '';
resultDiv.textContent = '';
originalLengthSpan.textContent = '0';
convertedLengthSpan.textContent = '0';
processTimeSpan.textContent = '0';
});
// Copy to clipboard
copyBtn.addEventListener('click', function() {
const textToCopy = resultDiv.textContent;
if (!textToCopy) return;
// Use modern clipboard API
if (navigator.clipboard) {
navigator.clipboard.writeText(textToCopy).then(function() {
showNotification();
}).catch(function(err) {
// If API fails, use traditional method
fallbackCopyText(textToCopy);
});
} else {
// Traditional copy method
fallbackCopyText(textToCopy);
}
});
// Traditional copy method
function fallbackCopyText(text) {
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.style.position = 'fixed'; // Avoid scrolling to bottom of page
document.body.appendChild(textarea);
textarea.select();
try {
const successful = document.execCommand('copy');
if (successful) {
showNotification();
} else {
alert('Copy failed, please manually select text and press Ctrl+C to copy');
}
} catch (err) {
alert('Copy failed, please manually select text and press Ctrl+C to copy');
}
document.body.removeChild(textarea);
}
// Show notification
function showNotification() {
notification.classList.add('show');
setTimeout(function() {
notification.classList.remove('show');
}, 2000);
}
// Various conversion functions
function capitalizeWords(text) {
return text.replace(/\b\w+/g, function(word) {
return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
});
}
function titleCase(text) {
// Simplified title case - capitalize first letter of each sentence
// More complex implementation could handle exceptions (like "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('');
}
// Real-time input character count (optional)
inputText.addEventListener('input', function() {
// If real-time processing is needed, code can be added here
});
});