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
Reseter le menu déroulant quand on appuie sur "Echap"
Contenu verrouillé
Si vous êtes déjà inscrit
vous devrez vous connecter
.
S'inscrire à la formation pour déverrouiller