So erstellen Sie eine interaktive CodePlay-App mit Echtzeitausgabe-CSS-Tutorial-php.cn

How to Build Interactive CodePlay App with Real-time Output

In diesem Tutorial erstellen wir eine interaktive Webanwendung namens CodePlay App mit HTML, CSS, JavaScript, Bootstrap und jQuery. Mit dieser Anwendung können Benutzer Code in HTML, CSS und JavaScript schreiben und die Ausgabe in Echtzeit in einem eingebetteten Iframe sehen.

Wir konzentrieren uns auf die Implementierung reibungsloser Animationen, reaktionsfähiges Design und nahtlose Codebearbeitungsfunktionen.

Voraussetzungen

Um diesem Tutorial folgen zu können, sollten Sie über Grundkenntnisse in HTML, CSS, JavaScript, Bootstrap und jQuery verfügen. Stellen Sie sicher, dass Sie einen Texteditor und einen modernen Webbrowser installiert haben.

Projektaufbau

Projektstruktur erstellen:
- Erstellen Sie ein neues Verzeichnis für Ihr Projekt (Codeplay-App).
- Erstellen Sie in diesem Verzeichnis Unterverzeichnisse für CSS und Javascript.
- Erstellen Sie eine index.html-Datei im Stammverzeichnis.
Erforderliche Bibliotheken einschließen:
- Laden Sie Bootstrap CSS herunter und fügen Sie es in das CSS-Verzeichnis ein.
- Fügen Sie die jQuery-Bibliothek von einem CDN in Ihre index.html ein.
- Erstellen Sie eine main.js-Datei im Javascript-Verzeichnis für Ihre Anwendungslogik.

HTML-Struktur

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

Nach dem Login kopieren

CSS-Styling

Die CSS-Datei (style.css) definiert Stile für die Anwendung, einschließlich Layout und Panel-Sichtbarkeit.

*, *::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; }

Nach dem Login kopieren

JavaScript-Funktionalität

Die JavaScript-Datei (main.js) verwaltet dynamisches Verhalten, einschließlich der Aktualisierung des Ausgabefensters und der Verwaltung der Panel-Sichtbarkeit basierend auf der Bildschirmgröße.

$(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); });

Nach dem Login kopieren

Live-Demo und Repository

Live-Demo:Live-Demo der CodePlay-App
GitHub-Repository:GitHub-Repository für die CodePlay-App

Abschluss

Herzlichen Glückwunsch! Sie haben erfolgreich eine CodePlay-App erstellt, die es Benutzern ermöglicht, HTML-, CSS- und JavaScript-Code in Echtzeit zu schreiben und in der Vorschau anzuzeigen, mit reibungslosen Animationen und ansprechendem Design für optimale Benutzerfreundlichkeit auf verschiedenen Geräten.

Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine interaktive CodePlay-App mit Echtzeitausgabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!