简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > CSS 튜토리얼 > 본문

실시간 출력으로 대화형 CodePlay 앱을 구축하는 방법

WBOY
풀어 주다： 2024-08-06 01:32:02
원래의
464명이 탐색했습니다.

How to Build Interactive CodePlay App with Real-time Output

이 튜토리얼에서는 HTML, CSS, JavaScript, Bootstrap 및 jQuery를 사용하여 CodePlay 앱이라는 대화형 웹 애플리케이션을 만듭니다. 이 애플리케이션을 사용하면 사용자는 HTML, CSS 및 JavaScript로 코드를 작성하고 포함된 iframe 내에서 실시간으로 출력을 볼 수 있습니다.

부드러운 애니메이션, 반응형 디자인, 원활한 코드 편집 기능 구현에 중점을 둘 예정입니다.

전제조건

이 튜토리얼을 진행하려면 HTML, CSS, JavaScript, Bootstrap 및 jQuery에 대한 기본 지식이 있어야 합니다. 텍스트 편집기와 최신 웹 브라우저가 설치되어 있는지 확인하세요.

프로젝트 설정

  1. 프로젝트 구조 만들기:

    • 프로젝트(codeplay-app)에 대한 새 디렉터리를 만듭니다.
    • 이 디렉터리 안에 CSS 및 자바스크립트용 하위 디렉터리를 만듭니다.
    • 루트 디렉토리에 index.html 파일을 생성하세요.

  2. 필수 라이브러리 포함:

    • Bootstrap CSS를 다운로드하여 CSS 디렉토리에 포함시킵니다.
    • index.html에 CDN의 jQuery 라이브러리를 포함하세요.
    • 애플리케이션 로직을 위해 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 파일(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 저장소

결론

축하합니다! 다양한 장치에서 최적의 사용성을 위해 부드러운 애니메이션과 반응형 디자인을 통해 사용자가 HTML, CSS 및 JavaScript 코드를 실시간으로 작성하고 미리 볼 수 있는 CodePlay 앱을 성공적으로 구축했습니다.

즐거운 코딩하세요!

위 내용은 실시간 출력으로 대화형 CodePlay 앱을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：dev.to
이전 기사：CSS의 A부터 Z까지 다음 기사：조엘이 가장 좋아하는 오락
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
2
1370
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
9
1463
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1292
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1185
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1262
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！