Case convert (text-transform) on click using HTML and CSS - html

Question

I am trying to create a text area in WordPress where I can type/paste any text and by clicking on the button, all of them should be UPPER/lower CASE (using HTML and CSS).
Here is the code I have added to the top of the content:
HTML area;
<div id="form">
<textarea placeholder="Type or paste text here"></textarea>
<div class="wp-block-columns">
<div class="wp-block-column"><button type="button" class="uppercase">UPPER CASE</button></div>
<div class="wp-block-column"><button type="button" class="lowercase">lower case</button></div>
</div>
</div>
Here is the CSS that I used in theme custom CSS setting:
#form textarea {
height: 25vh;
min-height: 7.25em;
max-height: 67vh;
resize: vertical;
}
#form .wp-block-columns {
margin: 0;
}
#form .wp-block-column {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
#form button {
width: 100%;
}
.wp-block-column.uppercase {
text-transform: uppercase;
}
.wp-block-column.lowercase {
text-transform: lowercase;
}
The text area is fine, buttons are good but the text is not converting. I am new and tried many things all day so now I need expert advice. Thanks

Answer 1

You can easily do it using input and label HTML tags. Here's the code:
HTML:
HTML area;
<input type="radio" name="case" id="upper-case">
<input type="radio" name="case" id="lower-case">
<div id="form">
<textarea class="a" placeholder="Type or paste text here"></textarea>
<div class="wp-block-columns">
<div class="wp-block-column">
<label class="uppercase" for="upper-case">
UPPER CASE
</label>
</div>
<div class="wp-block-column">
<label class="lowercase" for="lower-case">
lower case
</label>
</div>
</div>
</div>
CSS:
#form textarea {
height: 25vh;
min-height: 7.25em;
max-height: 67vh;
resize: vertical;
}
#form .wp-block-columns {
margin: 0;
}
#form .wp-block-column {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
#form button {
width: 100%;
}
#upper-case:checked ~ #form textarea {
text-transform: uppercase;
}
#lower-case:checked ~ #form textarea {
text-transform: lowercase;
}
input {
visibility: hidden;
}
label {
display: block;
text-align: center;
background-color: lightgrey;
padding: 5px;
border-radius: 20px;
cursor: pointer;
}