tools/letter-case-converter.php

<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>
            </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>
</div>
<script>
    function convertCase() {
        var inputString = document.getElementById("inputString").value;
        var targetCase = document.querySelector('.case-option-cc.active').getAttribute('data-case');
        var result = document.getElementById("result");

        if (inputString.trim() === "") {
            result.innerHTML = "Please enter a string.";
            return;
        }

        if (targetCase === 'uppercase') {
            result.innerHTML = inputString.toUpperCase();
        } else if (targetCase === 'lowercase') {
            result.innerHTML = inputString.toLowerCase();
        } else if (targetCase === 'titlecase') {
            result.innerHTML = inputString.replace(/\w\S*/g, function (txt) {
                return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
            });
        } else {
            result.innerHTML = "Invalid target case specified.";
        }
    }

    function setActive(button) {
        var buttons = document.querySelectorAll('.case-option-cc');
        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!");
        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;
    }
</style>