dwd/tools
2
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

t

Browse Source
This commit is contained in:
Suvodip
2024-07-11 12:45:10 +05:30
parent d368213568
commit 040c4b87c1
33 changed files with 1042 additions and 867 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
letter-case-converter.php
View File

@@ -1,47 +1,75 @@
<div class="container-cc">
<div class="content-cc">
<h2 class="title-cc">Case Converter</h2>
<form class="form-cc">
<label class="label-cc" for="inputString">Input Text:</label>
<textarea id="inputString" class="textarea-cc" name="inputString" rows="4" cols="50" oninput="convertCase()"></textarea>
<div class="case-options-cc">
<div class="case-option-cc" onclick="setActive(this)" data-case="uppercase">Uppercase</div>
<div class="case-option-cc" onclick="setActive(this)" data-case="lowercase">Lowercase</div>
<div class="case-option-cc" onclick="setActive(this)" data-case="titlecase">Titlecase</div>
<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 id="result" class="result-cc"></div>
<P style="display: none; text-align: center;" id="copied-notice"></P>
<button type="button" class="copy-button-cc" onclick="copyToClipboard()" style="background-color: #7d7d7d; width: 100%; margin-top: 10px;">Copy</button>
<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>
<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('.case-option-cc.active').getAttribute('data-case');
var targetCase = document.querySelector('.caseOptionButton.active').getAttribute('data-case');
var result = document.getElementById("result");
if (inputString.trim() === "") {
result.innerHTML = "Please enter a string.";
result.value = "Please enter a string.";
return;
}
if (targetCase === 'uppercase') {
result.innerHTML = inputString.toUpperCase();
result.value = inputString.toUpperCase();
} else if (targetCase === 'lowercase') {
result.innerHTML = inputString.toLowerCase();
result.value = inputString.toLowerCase();
} else if (targetCase === 'titlecase') {
result.innerHTML = inputString.replace(/\w\S*/g, function (txt) {
result.value = inputString.replace(/\w\S*/g, function (txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});
} else {
result.innerHTML = "Invalid target case specified.";
result.value = "Invalid target case specified.";
}
}
function setActive(button) {
var buttons = document.querySelectorAll('.case-option-cc');
var buttons = document.querySelectorAll('.caseOptionButton');
buttons.forEach(function(btn) {
btn.classList.remove('active');
});
@@ -59,111 +87,18 @@
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>
.container-cc {
font-family: Arial, sans-serif;
/* background-color: #3d3d3d; */
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
padding-top: 30px;
/* padding-bottom: 30px; */
}
.content-cc {
/* background-color: #7d7d7d; */
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 500px;
}
.content-cc {
background-color: #3d3d3d;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
padding: 20px;
width: 400px;
}
@media screen and (min-width: 1024px) {
.content-cc {
width: 800px; /* Width for large screens */
}
}
.title-cc {
font-size: 25px;
text-align: center;
}
.form-cc {
display: flex;
flex-direction: column;
}
.label-cc {
margin-bottom: 5px;
/* color: #555; */
}
.textarea-cc {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
resize: none;
margin-bottom: 15px;
background-color: #3d3d3d;
}
.case-options-cc {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
}
.case-option-cc {
flex-grow: 1;
padding: 10px;
text-align: center;
border: 1px solid #007bff;
color: #FFF;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.case-option-cc:hover {
background-color: #007bff;
color: #fff;
}
.result-cc {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
min-height: 100px;
overflow: auto;
}
.copy-button-cc {
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.copy-button-cc:hover {
background-color: #0056b3;
}
.active{
background-color: #05b3a4;
border: 2px solid #4caf50;
background: transparent;
color: #4caf50;
}
</style>