104 lines
5.1 KiB
PHP
104 lines
5.1 KiB
PHP
<section class="diZContainer diZmxAuto">
|
|
<h2 class="diZBorderBottom">Case Converter</h2>
|
|
<p class="diZTextJustify">The Letter Case Converter tool allows you to effortlessly change the case of your text to Uppercase, Lowercase, or Title Case. Whether you're writing a document, formatting code, or preparing content for publication, this tool provides a quick and easy way to ensure your text is in the desired case format.</p>
|
|
<div class="diZMaxW600 diZmxAuto toolsSection diZmt20 ">
|
|
<form class="diZFlexColumn">
|
|
<label class="" for="inputString">Input Text:</label>
|
|
<textarea id="inputString" class="diZTextAreaResizeNone" name="inputString" rows="8" oninput="convertCase()"></textarea>
|
|
<div class="diZFlexBetween diZmt4">
|
|
<div class="caseOptionButton diZButtonDefault" onclick="setActive(this)" data-case="uppercase"><span>Uppercase</span></div>
|
|
<div class="caseOptionButton diZButtonDefault" onclick="setActive(this)" data-case="lowercase"><span>Lowercase</span></div>
|
|
<div class="caseOptionButton diZButtonDefault" onclick="setActive(this)" data-case="titlecase"><span>Titlecase</span></div>
|
|
</div>
|
|
</form>
|
|
<div class="diZFlexColumn">
|
|
<textarea id="result" rows="7" readonly class="result-cc diZTextAreaResizeNone diZmt4"></textarea>
|
|
<p class="diZDisplayNone diZmt4" id="copied-notice"></p>
|
|
<button type="button" class="copy-button-cc diZmt4 diZmxAuto" onclick="copyToClipboard()"><span>Copy</span></button>
|
|
</div>
|
|
</div>
|
|
<div class="diZmb20">
|
|
<h3>Usage:</h3>
|
|
<ul>
|
|
<li><strong>Enter Text:</strong> Input your desired text into the text area provided.</li>
|
|
<li><strong>Choose Case Conversion:</strong> Select the type of conversion you want: Uppercase, Lowercase, or Title Case.</li>
|
|
<!-- <li><strong>Convert Text:</strong> Click the "Convert" button to apply the selected case transformation to your text.</li> -->
|
|
<li><strong>Copy Converted Text:</strong> Once converted, the text will appear in the output text area. Click the "Copy" button to copy it to your clipboard.</li>
|
|
<li><strong>Paste and Use:</strong> Paste the copied text into your document, email, or any other text field where you need the transformed text.</li>
|
|
</ul>
|
|
|
|
<h3>Features:</h3>
|
|
<ul>
|
|
<li>Converts text to uppercase.</li>
|
|
<li>Converts text to lowercase.</li>
|
|
<li>Converts text to title case.</li>
|
|
<li>Provides instant feedback with a "Text copied to clipboard!" notification upon copying.</li>
|
|
</ul>
|
|
|
|
<h3>Example Use Cases:</h3>
|
|
<ul>
|
|
<li>Writers ensuring consistent capitalization in their documents.</li>
|
|
<li>Developers needing text transformations for various programming tasks.</li>
|
|
<li>Students formatting essays and assignments according to specific case requirements.</li>
|
|
<li>Content creators adjusting the text case for social media posts, emails, or presentations.</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
<script>
|
|
function convertCase() {
|
|
var inputString = document.getElementById("inputString").value;
|
|
var targetCase = document.querySelector('.caseOptionButton.active').getAttribute('data-case');
|
|
var result = document.getElementById("result");
|
|
|
|
if (inputString.trim() === "") {
|
|
result.value = "Please enter a string.";
|
|
return;
|
|
}
|
|
|
|
if (targetCase === 'uppercase') {
|
|
result.value = inputString.toUpperCase();
|
|
} else if (targetCase === 'lowercase') {
|
|
result.value = inputString.toLowerCase();
|
|
} else if (targetCase === 'titlecase') {
|
|
result.value = inputString.replace(/\w\S*/g, function (txt) {
|
|
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
|
|
});
|
|
} else {
|
|
result.value = "Invalid target case specified.";
|
|
}
|
|
}
|
|
|
|
function setActive(button) {
|
|
var buttons = document.querySelectorAll('.caseOptionButton');
|
|
buttons.forEach(function(btn) {
|
|
btn.classList.remove('active');
|
|
});
|
|
button.classList.add('active');
|
|
|
|
convertCase();
|
|
}
|
|
|
|
function copyToClipboard() {
|
|
var result = document.getElementById("result");
|
|
var range = document.createRange();
|
|
range.selectNode(result);
|
|
window.getSelection().removeAllRanges();
|
|
window.getSelection().addRange(range);
|
|
document.execCommand("copy");
|
|
window.getSelection().removeAllRanges();
|
|
// alert("Copied to clipboard!");
|
|
|
|
setTimeout(() => {
|
|
document.getElementById('copied-notice').style.display = 'none';
|
|
}, 1000);
|
|
document.getElementById('copied-notice').style.display = 'block';
|
|
document.getElementById('copied-notice').innerHTML = 'Copied to clipboard!';
|
|
}
|
|
</script>
|
|
<style>
|
|
.active{
|
|
border: 2px solid #4caf50;
|
|
background: transparent;
|
|
color: #4caf50;
|
|
}
|
|
</style> |