<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>