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.)
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.
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.