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
- Manipuler le DOM en JavaScript natif (Vanilla JS)
- Comprendre et intégrer le système de grille Bootstrap
- Gérer les événements utilisateurs dynamiquement
- Créer une interface d'édition intuitive
Stack Technique
-
JavaScript : Logique & DOM
-
Bootstrap 5 : UI & Grid System
-
HTML5 : Structure de base
-
CSS3 : Styles personnalisés
Fonctionnalités Clés
L'application permet de simuler un environnement de création de site web. Voici les interactions principales possibles :
1. Création Dynamique
L'utilisateur peut ajouter des éléments HTML à la volée via une interface de commande. Des boutons, des champs de texte ou des conteneurs peuvent être injectés directement dans la page de prévisualisation.
2. Gestion de la Grille
Utilisation intensive des classes Bootstrap (`row`, `col-md-*`) pour structurer le contenu. L'outil permet de visualiser comment les éléments s'empilent ou s'alignent selon l'espace disponible.
3. Personnalisation
Modification des attributs CSS des éléments sélectionnés (couleur de fond, taille du texte, bordures) via des inputs JavaScript qui mettent à jour le style en temps réel.
Les Défis Rencontrés
La sélection d'éléments : Un des défis majeurs a été de créer un système permettant de "cibler" un élément créé dynamiquement pour ensuite lui appliquer des modifications sans affecter les autres composants.
La logique Parent/Enfant : Gérer l'imbrication des éléments (mettre un bouton DANS une colonne, qui est DANS une rangée) a demandé une gestion rigoureuse des nœuds du DOM via `appendChild` et `parentElement`.