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:
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>CodePlay App</title> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" defer></script> <script src="javascript/main.js" type="text/javascript" defer></script> </head> <body> <header> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">CodePlayer</a> <div class="ml-lg-5 btn-group btn-group-sm" role="group"> <button type="button" id="html" class="btn btn-secondary active">HTML</button> <button type="button" id="css" class="btn btn-secondary">CSS</button> <button type="button" id="javascript" class="btn btn-secondary">JavaScript</button> <button type="button" id="output" class="btn btn-secondary active">Output</button> </div> <button class="navbar-toggler mt-sm-0 mt-2" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item mr-2"> <a class="nav-link" href="https://www.linkedin.com/in/daslaw26/">About Me</a> </li> <li class="nav-item mr-2"> <a class="nav-link" href="https://github.com/Daslaw/codePlayer.git">DaslawCodePlayer</a> </li> </ul> </div> </nav> </header> <main class="container-fluid"> <div class="row" id="bodyContainer"> <textarea id="htmlPanel" class="col panel"><p>Hello world!</p></textarea> <textarea id="cssPanel" class="col panel hidden">/* Enter your css code here! */</textarea> <textarea id="javascriptPanel" class="col panel hidden">/* Enter your JS code here! */</textarea> <iframe id="outputPanel" class="col panel">Hello world!</iframe> </div> </main> <!-- Optional JavaScript; choose one of the two! --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script> </body> </html>
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 Ausgabebereichs und der Verwaltung der Bereichssichtbarkeit basierend auf der Bildschirmgröße.
$(document).ready(function () { $(".panel").height($(window).height() - $("header").height() - 10); function updateOutput() { $("iframe").contents().find("html").html("<html><head><style type='text/css'>" + $("#cssPanel").val() + "</style></head></body>" + $("#htmlPanel").val() + "</body></html>"); 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); });
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!