Comment créer une application CodePlay interactive avec une sortie en temps réel-tutoriel CSS-php.cn

How to Build Interactive CodePlay App with Real-time Output

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.

Conditions préalables

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.

Configuration du projet

Créer une structure de projet :
- Créez un nouveau répertoire pour votre projet (codeplay-app).
- Dans ce répertoire, créez des sous-répertoires pour CSS et Javascript.
- Créez un fichier index.html dans le répertoire racine.
Inclure les bibliothèques requises :
- Téléchargez Bootstrap CSS et incluez-le dans le répertoire CSS.
- Incluez la bibliothèque jQuery d'un CDN dans votre index.html.
- Créez un fichier main.js dans le répertoire javascript pour la logique de votre application.

Structure HTML

      CodePlay App     
    CodePlayer      
     About Me 
  DaslawCodePlayer 
 
 
 
 
   <p>Hello world!</p> /* Enter your css code here! */ /* Enter your JS code here! */ Hello world!

Copier après la connexion

Style CSS

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; }

Copier après la connexion

Fonctionnalité JavaScript

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() + ""); document.getElementById("outputPanel").contentWindow.eval($("#javascriptPanel").val()); } updateOutput(); $("textarea").on('change keyup paste', function () { updateOutput(); }); function hideAllPanel() { $(".btn-group").children().removeClass("active"); $("#bodyContainer").children().addClass("hidden"); } function mediaChange() { if (mobileScreen.matches) { //for small screen devices (max-width: 500px) hideAllPanel(); $(".btn-group").children(":first-child").addClass("active"); $("#bodyContainer").children(":first-child").removeClass("hidden"); $(".btn-group").children().off("click"); $(".btn-group").children().click(function () { hideAllPanel(); $(this).toggleClass("active"); let panelId = $(this).attr("id") + "Panel"; $("#" + panelId).toggleClass("hidden"); }); } else if (tabScreen.matches) { //for medium screen devices (max-width: 800px) hideAllPanel(); $(".btn-group").children(":first-child").addClass("active"); $("#bodyContainer").children(":first-child").removeClass("hidden"); $(".btn-group").children(":last-child").addClass("active"); $("#bodyContainer").children(":last-child").removeClass("hidden"); let activePanel = ["html", "output"]; $(".btn-group").children().off("click"); $(".btn-group").children().click(function () { let thisID = $(this).attr("id"); if (this.matches(".active")) { //when user clicks on active panel button... $(this).toggleClass("active"); let panelId = $(this).attr("id") + "Panel"; $("#" + panelId).toggleClass("hidden"); if (thisID != activePanel[0]) activePanel[1] = activePanel[0]; activePanel[0] = null; } else { //when user clicks on inactive(hidden) panel button... let selectPanel = activePanel.shift(); $("#" + selectPanel + "Panel").toggleClass("hidden"); $("#" + selectPanel).toggleClass("active"); $(this).toggleClass("active"); let panelId = $(this).attr("id") + "Panel"; $("#" + panelId).toggleClass("hidden"); activePanel.push(thisID); } }); } else { //for other screens... $(".btn-group").children().off("click"); $(".btn-group").children().click(function () { $(this).toggleClass("active"); let panelId = $(this).attr("id") + "Panel"; $("#" + panelId).toggleClass("hidden"); }); } } //media queries; on Screen change. var mobileScreen = window.matchMedia("(max-width: 500px)"); var tabScreen = window.matchMedia("(max-width: 800px)"); mediaChange(); tabScreen.addEventListener("change", mediaChange); mobileScreen.addEventListener("change", mediaChange); });

Copier après la connexion

Démo en direct et référentiel

Démo en direct :Démo en direct de l'application CodePlay
Référentiel GitHub :Référentiel GitHub de l'application CodePlay

Conclusion

Félicitations ! Vous avez créé avec succès une application CodePlay qui permet aux utilisateurs d'écrire et de prévisualiser du code HTML, CSS et JavaScript en temps réel avec des animations fluides et une conception réactive pour une utilisation optimale sur différents appareils.

Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!