Le Contexte
Ce projet est né de la volonté de maîtriser la manipulation du DOM (Document Object Model) sans utiliser de frameworks lourds comme React ou Vue dans un premier temps. L'objectif était de créer un éditeur visuel permettant de générer des mises en page web dynamiquement.
En s'appuyant sur le système de grille robuste de Bootstrap, cet outil permet à l'utilisateur de construire des pages web bloc par bloc directement depuis le navigateur, offrant une approche "No-Code" simplifiée développée entièrement en JavaScript natif.
Les Objectifs
- DOM Manipulation : Création et injection d'éléments en Vanilla JS.
- Logique de Grille : Intégration dynamique des classes Bootstrap (Rows/Cols).
- Event Handling : Gestion complexe des événements utilisateurs (click, input).
- UX/UI : Création d'une interface d'édition intuitive et réactive.
Stack Technique
-
JavaScript (ES6+)
-
Bootstrap 5
-
HTML5 DOM API
-
CSS3 Custom
Fonctionnalités & Défis
L'application permet de simuler un environnement de création de site web avec une logique parent/enfant stricte.
Fonctionnalités Clés
- Création Dynamique : Injection de boutons, inputs et conteneurs via une interface de commande.
- Gestion de la Grille : Visualisation immédiate de l'empilement des éléments (`col-md-*`).
- Édition en Temps Réel : Modification des styles (couleur, bordure, taille) des éléments sélectionnés.
Le Défi Technique
Le défi majeur a été la sélection contextuelle : pouvoir cliquer sur un élément généré dynamiquement pour le cibler, puis appliquer des modifications uniquement à cet élément spécifique sans affecter ses voisins, tout en gérant l'imbrication correcte dans le DOM.
Interface & Styles
L'interface repose sur la clarté de Bootstrap combinée à une touche personnalisée pour les zones d'interaction.
Aperçu de l'interface
Voici un aperçu de l'outil en action :
