首頁 >web前端 >css教學 >如何建立具有即時輸出的互動式 CodePlay 應用程式

如何建立具有即時輸出的互動式 CodePlay 應用程式

WBOY原創: 2024-08-06 01:32:02579瀏覽

How to Build Interactive CodePlay App with Real-time Output

在本教學中，我們將使用 HTML、CSS、JavaScript、Bootstrap 和 jQuery 建立一個名為 CodePlay App 的互動式 Web 應用程式。該應用程式允許用戶用 HTML、CSS 和 JavaScript 編寫程式碼，並在嵌入式 iframe 中即時查看輸出。

我們將專注於實現流暢的動畫、響應式設計和無縫程式碼編輯功能。

先決條件

要學習本教程，您應該具備 HTML、CSS、JavaScript、Bootstrap 和 jQuery 的基本知識。確保您安裝了文字編輯器和現代網頁瀏覽器。

項目設定

建立專案結構：
- 為您的專案（codeplay-app）建立一個新目錄。
- 在此目錄中，為 css 和 javascript 建立子目錄。
- 在根目錄建立index.html檔。
包含所需的函式庫：
- 下載 Bootstrap CSS 並將其包含在 css 目錄中。
- 將 CDN 中的 jQuery 函式庫包含在您的 index.html 中。
- 在 javascript 目錄中為您的應用程式邏輯建立一個 main.js 檔案。

HTML結構

<!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>

CSS 樣式

CSS 檔案 (style.css) 定義應用程式的樣式，包括佈局和麵板可見性。

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

JavaScript 功能

JavaScript 檔案 (main.js) 處理動態行為，包括更新輸出面板和根據螢幕尺寸管理面板可見性。

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

});

現場演示和存儲庫

現場示範： CodePlay 應用程式現場演示
GitHub 儲存庫： CodePlay 應用程式 GitHub 儲存庫

結論

恭喜！您已成功建立了一個 CodePlay 應用程序，該應用程式允許用戶透過流暢的動畫和響應式設計即時編寫和預覽 HTML、CSS 和 JavaScript 程式碼，從而在不同裝置上實現最佳可用性。

編碼愉快！

以上是如何建立具有即時輸出的互動式 CodePlay 應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript jquery css bootstrap html for include Directory using JS this github iframe

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：CSS 的 A 到 Z下一篇：CSS 的 A 到 Z

看更多