string_case_changer.html

<div class="supertool">
<style>
.supertool textarea{
    white-space: pre; 
    overflow: auto;
    border: solid #ddd 2px;
    width: 100%;
}
.supertool a, .supertool button {
    background-color: #d0d0d0;
    border: none;
    color: #5b5b57 !important;
    padding: 10px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    margin-top: 2px;
    margin-bottom: 2px;
    font-size: 14px;
}
.supertool a:hover, .supertool button:hover{
    background-color: #757575;
    color: #fff !important;
}
</style>
<div class="col-md-12">
    <div>
    <label><input type="radio" name="case" value="U" checked> Upper Case</label>
    <label><input type="radio" name="case" value="L"> Lower Case</label>
    </div>
    <textarea autocomplete="off" id="string" cols="80" rows="10" name="string" placeholder="Enter your text..." spellcheck="true"></textarea><br>
    <button type="button" id="convert" name="convert" value="convert">Convert</button>
    <button type="button" name="reload" onclick="location.reload()" value="reload">Reload</button>
</div>
<div class="col-md-12">
    <textarea autocomplete="off" id="result" cols="80" rows="10" name="code" placeholder="Result..." readonly></textarea><br>
    <button type="button" id="copy" name="copy" value="Copy">Copy</button>
    <a type="button" id="download" name="download" >Download</a>
    <span id="status" ></span>
</div>
<script>
const converter = document.querySelector('#convert');
converter.addEventListener("click", function () {
    var stringCase = document.querySelector("input[name=case]:checked");
    var string = document.querySelector('#string'), result = document.querySelector('#result'), data;
    if (stringCase.value == 'L') {
        data = string.value.toLowerCase();
    } else {
        data = string.value.toUpperCase()
    }
    result.value = data;
});
const copy = document.querySelector('#copy');
copy.addEventListener("click", function() {
    elm=document.querySelector("#result");
    elm.select();
    elm.setSelectionRange(0,99999);
    document.execCommand('copy');
});
const download = document.querySelector('#download');
download.addEventListener("click", function () {
    var stringCase = document.querySelector("input[name=case]:checked");
    var string = document.querySelector('#string'), data, file;
    if (stringCase.value == 'L') {
        data = string.value.toLowerCase();
        this.download='lowercase_text.txt'; //download
    } else {
        this.download='uppercase_text.txt'; //download
        data = string.value.toUpperCase()
    }
    file = data;
    var blobData = new Blob([file], {type: 'text/plain'});
    var url = window.URL.createObjectURL(blobData);
    this.href = url;
});
const superTools = {
    title: "Upper Case and Lower Case converter"
};
</script>
</div>