Six tâches pour un développeur Front-End

1. Formulaire de carte de crédit

Une forme de carte de crédit sympa avec des micro-interactions fluides et agréables. Comprend le formatage des numéros, la vérification et la détection automatique du type de carte. Il est construit sur Vue.js et est également entièrement réactif. (Tu peux voir ici.)

formulaire de carte de crédit

Ce que vous apprendrez :

• Traiter et valider les formulaires
• Gérer les événements (par exemple, lorsque les champs changent)
• Comprendre comment afficher et placer des éléments sur la page, notamment les informations de carte bancaire qui apparaissent en haut du formulaire

L'article a été traduit avec le soutien d'EDISON Software, qui prend soin de la santé des programmeurs et de leur petit-déjeuneret développe des logiciels personnalisés.

2. Histogramme

Un histogramme est un tableau ou un graphique qui représente des données catégorielles avec des barres rectangulaires dont les hauteurs ou les longueurs sont proportionnelles aux valeurs qu'elles représentent.

Ils peuvent être appliqués verticalement ou horizontalement. Un graphique à barres verticales est parfois appelé graphique linéaire.

Ce que vous apprendrez :

• Afficher les données de manière structurée et compréhensible
• De plus : découvrez comment utiliser l'élément canvas et comment dessiner des éléments avec

il est vous pouvez trouver des données sur la population mondiale. Ils sont triés par année.

3. Animation du cœur sur Twitter

En 2016, Twitter a introduit cette étonnante animation pour ses tweets. Depuis 2019, il a toujours l'air d'être à la hauteur, alors pourquoi ne pas en créer un vous-même ?

Ce que vous apprendrez :

• Travailler avec l'attribut CSS keyframes
• Manipuler et animer des éléments HTML
• Combinez JavaScript, HTML et CSS

4. Dépôts GitHub avec fonction de recherche

Il n'y a rien d'extraordinaire ici : les référentiels GitHub ne sont qu'une liste glorifiée.
Le but est d'afficher les référentiels et de permettre à l'utilisateur de les filtrer. Utiliser API GitHub officielle pour obtenir des référentiels pour chaque utilisateur.

Page de profil GitHub - github.com/indreklasn

Ce que vous apprendrez :

• Recevoir des données de l'API
• Afficher les données de l'API
• Filtrer et afficher les données pertinentes pour chaque recherche
• Facultatif : Si vous êtes prêt à relever un défi, utilisez API v4, construit à l'aide de GraphQL. Si vous souhaitez apprendre GraphQL, rendez-vous sur un de mes articles précédents.

5. Discussions de style Reddit

Les chats sont un moyen de communication populaire en raison de leur simplicité et de leur facilité d’utilisation. Mais qu’est-ce qui alimente réellement les forums de discussion modernes ? WebSockets !

Ce que vous apprendrez :

• Utilisez les WebSockets, la communication en temps réel et les mises à jour des données
• Travailler avec les niveaux d'accès des utilisateurs (par exemple, le propriétaire d'un canal de discussion a le rôle admin, et d'autres dans la pièce - user)
• Traitez et validez les formulaires - n'oubliez pas que la fenêtre de discussion pour envoyer un message est input
• Créez et rejoignez différentes discussions
• Travaillez avec des messages personnels. Les utilisateurs peuvent discuter avec d'autres utilisateurs en privé. Essentiellement, vous établirez une connexion WebSocket entre deux utilisateurs.

6. Navigation de style rayé

Ce qui rend cette navigation unique, c'est que le conteneur popover se transforme pour s'adapter au contenu. Il y a une élégance dans cette transition par rapport au comportement traditionnel d'ouverture et de fermeture d'un nouveau popover.

Ce que vous apprendrez :

• Combinez des animations CSS avec des transitions
• Atténuer le contenu et appliquer la classe active à l'élément flottant

Essayez d'abord de le faire vous-même, mais si vous avez besoin d'aide, consultez ceci guide étape par étape.

Source: habr.com