Autoplay
Autocomplete
Vidéo précédente
Terminer et continuer
Programmez votre propre outil no-code
Introduction
Création de utils.js et installation de Jest et d'un premier test unitaire (17:48)
Création de tests unitaires vérifiant que les ids générés sont uniques (6:05)
Création et gestion d'un menu contextuel personnalisé
Détection de la touche slash (8:53)
Création d'un menu contextuel personnalisé (13:46)
Affichage du menu contextuel à l'endroit du click droit (7:34)
Utilisation d'un dataset afin d'ajouter des clés/valeurs sur nos items (10:33)
Création d'un titre programmatiquement (5:59)
Création d'un titre et d'un sous-titre (5:05)
Ajout d'un attribut permettant de modifier un texte (5:52)
Création d'une image et de son attribut "src" (7:46)
Disparation du menu contextuel sur l'appui de la touche 'Echap' (2:37)
Création et gestion d'une fonctionnalité de recherche
Création d'un menu de recherche (5:56)
Suggestion d'options en fonction des saisies de l'utilisateur (13:52)
Affichage des options qui correspondent à la saisie de l'utilisateur (9:49)
Ajout de styles aux options de notre menu et amélioration de l'ergonomie (13:28)
Enrichissement des éléments du DOM générés
Refactorisation : supprimer le 'onClick' du HTML (4:27)
Ajout d'un id unique sur chaque élément du DOM généré (7:56)
Création d'une media query pour changer les marges dynamiquement (3:43)
Créer un menu de dev tools
Ajout d'un header toujours visible dédié aux dev tools (6:26)
Création de la source de données de notre menu déroulant listant les éléments du DOM créés (7:40)
Ajout d'une option au menu déroulant pour chaque nouvel élément créé (5:36)
Utilisation de Font Awesome + ajout conditionnel de menu déroulant (15:05)
Mise en lumière de l'élément du DOM correspondant à l'option sélectionnée depuis le menu déroulant (15:20)
Mise en lumière d'un élément du DOM ajouté lorsqu'il est survolé (5:46)
Créer des sous-menus spécialisés
Ajout de deux menus d'options (un pour le texte un pour les images) (12:55)
Afficher le menu de modification d'elements de type texte (15:01)
Afficher/masquer le menu de modification d'elements de type image (5:35)
Gérer le "focus" et le "blur" sur les éléments du DOM créés (9:00)
Changer la couleur du curseur clignotant (1:40)
Reseter le menu déroulant quand on appuie sur "Echap" (4:56)
Modifier les sélections de l'utilisateur
Récupérer un ou plusieurs mots sélectionnés par l'utilisateur (10:43)
Rendre le texte sélectionné "gras" (8:56)
Changer la couleur d'un extrait de texte sélectionné (11:07)
Styliser le color picker (2:04)
Remplacer l'image de démo par une véritable image (5:14)
Suppression d'éléments d'une page
Supprimer un élément texte d'une page et du menu déroulant récapitulatif (14:36)
Supprimer une image (5:48)
Remplacer une image
Utilisation d'Alertify.js pour récupérer une saisie utilisateur (14:21)
Drag and Drop
Implémenter le drag and drop grâce à interact.js (8:11)
Divers
Sélectionner un élément suite à un mouseup (5:03)
Personnaliser votre police (2:29)
Dernière mise à jour le 11 sep. 2021
Création de la source de données de notre menu déroulant listant les éléments du DOM créés
Contenu verrouillé
Si vous êtes déjà inscrit
vous devrez vous connecter
.
S'inscrire à la formation pour déverrouiller