How to change the text-decoration to uppercase and back when the button is clicked?

Question

css

I need to press the shift button (now it is empty), all the letters of the keyboard were changed to large and when pressed again, back to small.

Link to the code

And how can I make it so that when opening this chat, the scroll is always scrolled to the bottom?

Answer 1

Answer 2

Purely visual text-transform is fine, but the problem will arise when you need to insert letters from the keyboard into the message form when you click on them. Because this is just stylization, the letters themselves are still lowercase, and we need to issue capital letters to the form when the shift is pressed. There are two methods for this in JS .toLowerCase() and .toUpperCase()
The essence is the same as with styling, only we change the case not only visually, but also in the DOM
Example: