Neste laboratório, você vai criar um contador de caracteres em tempo real usando JavaScript. O contador de caracteres exibirá o número de caracteres inseridos em um elemento textarea. O contador será atualizado em tempo real à medida que o usuário digita na textarea. Objetivo: Cumprir as user stories abaixo e fazer todos os testes passarem para completar o laboratório. Histórias de Usuário: 1. Você deve ter um elemento textarea com o id de text-input. 2. Deve haver um elemento p com o id de char-count. Ele deve conter inicialmente o texto Contagem de Caracteres: 0/50. Este texto placeholder deve ser substituído pela contagem atual de caracteres no elemento textarea. 3. Quando o elemento #text-input contiver o texto hello coder, o elemento #char-count deverá conter o texto "Character Count: 11/50" 4. Quando o elemento #text-input contiver o texto i am a programmer, o elemento #char-count deverá conter o texto "Character Count: 17/50" 5. Quando o elemento #text-input contiver o texto hello world, o elemento #char-count deverá conter o texto "Character Count: 11/50" 6. Quando o elemento #text-input contiver o texto I am learning a new language and it is called c++. o elemento #char-count deve conter o texto "Character Count: 50/50". NOTA: Embora o atributo maxlength alcance a funcionalidade correta, este laboratório requer uma solução apenas em JavaScript. 7. O usuário não deve ser capaz de inserir mais de 50 caracteres no elemento textarea. Quando a contagem de caracteres atingir 50, qualquer entrada extra deve ser automaticamente cortada e o texto Contagem de Caracteres: 50/50 deve ser exibido em vermelho. Nota: Certifique-se de vincular sua folha de estilos e o arquivo JavaScript no seu HTML.

Testes:

• Você deve ter um elemento `textarea` com o `id` de `text-input`.
• Você deve ter um elemento `p` com o `id` de `char-count`.
• O elemento `#char-count` deve conter inicialmente o texto `Contagem de Caracteres: 0/50`.
• Quando o elemento `#text-input` contiver o texto `hello coder`, o elemento `#char-count` deverá conter o texto `"Character Count: 11/50"`
• Quando a contagem de caracteres for `50`, o texto deve ser exibido na cor `red`.
• Se a contagem de caracteres for maior ou igual a `50`, a entrada extra deve ser cortada.