Seis tarefas para um desenvolvedor Front-End

1. Formulário de cartão de crédito

Um formato legal de cartão de crédito com microinterações suaves e divertidas. Inclui formatação de números, verificação e detecção automática de tipo de cartão. Ele é construído em Vue.js e também é totalmente responsivo. (Você pode ver aqui.)

formulário de cartão de crédito

O que você aprenderá:

• Processar e validar formulários
• Lidar com eventos (por exemplo, quando os campos mudam)
• Entenda como exibir e colocar elementos na página, principalmente as informações do cartão de crédito que aparecem no topo do formulário

O artigo foi traduzido com o apoio da EDISON Software, que cuida da saúde dos programadores e do seu café da manhãE desenvolve software personalizado.

2. Histograma

Um histograma é um gráfico ou gráfico que representa dados categóricos com barras retangulares com alturas ou comprimentos proporcionais aos valores que representam.

Eles podem ser aplicados verticalmente ou horizontalmente. Um gráfico de barras verticais às vezes é chamado de gráfico de linhas.

O que você aprenderá:

• Exiba dados de forma estruturada e compreensível
• Além disso: Aprenda como usar o elemento canvas e como desenhar elementos com ele

é você pode encontrar dados da população mundial. Eles são classificados por ano.

3. Animação de coração no Twitter

Em 2016, o Twitter introduziu esta animação incrível para seus tweets. Em 2019, ele ainda parece perfeito, então por que não criar um você mesmo?

O que você aprenderá:

• Trabalhar com atributo CSS keyframes
• Manipular e animar elementos HTML
• Combine JavaScript, HTML e CSS

4. Repositórios GitHub com função de pesquisa

Não há nada sofisticado aqui – os repositórios do GitHub são apenas uma lista glorificada.
O objetivo é exibir os repositórios e permitir ao usuário filtrá-los. Usar API oficial do GitHub para obter repositórios para cada usuário.

Página de perfil do GitHub - github.com/indreklasn

O que você aprenderá:

• Receber dados da API
• Exibir dados da API
• Filtre e mostre dados relevantes para cada pesquisa
• Opcional: se você estiver pronto para um desafio, use API v4, construído usando GraphQL. Se você quiser aprender GraphQL, vá para um dos meus artigos anteriores.

5. Bate-papos no estilo Reddit

Os bate-papos são uma forma popular de comunicação devido à sua simplicidade e facilidade de uso. Mas o que realmente alimenta as salas de chat modernas? WebSockets!

O que você aprenderá:

• Use WebSockets, comunicação em tempo real e atualizações de dados
• Trabalhe com níveis de acesso do usuário (por exemplo, o proprietário de um canal de chat tem a função admin, e outros na sala - user)
• Processar e validar formulários - lembre-se, a janela de chat para envio de mensagem é input
• Crie e participe de diferentes chats
• Trabalhe com mensagens pessoais. Os usuários podem conversar com outros usuários em particular. Essencialmente, você estabelecerá uma conexão WebSocket entre dois usuários.

6. Navegação estilo listra

O que torna esta navegação única é que o contêiner popover se transforma para se ajustar ao conteúdo. Há uma elegância nesta transição em comparação com o comportamento tradicional de abrir e fechar um novo popover.

O que você aprenderá:

• Combine animações CSS com transições
• Escureça o conteúdo e aplique a classe ativa ao elemento flutuante

Tente fazer isso sozinho primeiro, mas se precisar de ajuda, dê uma olhada nisso guia passo a passo.

Fonte: habr.com