Dans ce didacticiel, nous allons créer une application Web interactive appelée CodePlay App en utilisant HTML, CSS, JavaScript, Bootstrap et jQuery. Cette application permet aux utilisateurs d'écrire du code en HTML, CSS et JavaScript et de voir le résultat en temps réel dans une iframe intégrée.
Nous nous concentrerons sur la mise en œuvre d'animations fluides, d'une conception réactive et de capacités d'édition de code transparentes.
Pour suivre ce didacticiel, vous devez avoir des connaissances de base en HTML, CSS, JavaScript, Bootstrap et jQuery. Assurez-vous d'avoir installé un éditeur de texte et un navigateur Web moderne.
Créer une structure de projet :
Inclure les bibliothèques requises :
CodePlay App
Le fichier CSS (style.css) définit les styles de l'application, y compris la mise en page et la visibilité des panneaux.
*, *::before, *::after { margin: 0; padding: 0; } .inlineMenu { display: inline; } .active { background-color: green !important; } .hidden { display: none; } .panel { resize: none; border: none; outline: none; border-top: 1.3px solid grey; transition: opacity 0.5s ease-in-out; } .panel:not(:last-child) { border-right: 1.3px solid grey; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { animation: fadeIn 0.5s; }
Le fichier JavaScript (main.js) gère le comportement dynamique, notamment la mise à jour du panneau de sortie et la gestion de la visibilité du panneau en fonction de la taille de l'écran.
$(document).ready(function () { $(".panel").height($(window).height() - $("header").height() - 10); function updateOutput() { $("iframe").contents().find("html").html(" " + $("#htmlPanel").val() + "