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.
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.
Projektstruktur erstellen:
Erforderliche Bibliotheken einschließen:
CodePlay App
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; }
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() + "