Canlı Kod Düzenleyici

Kodlarınızı herhangi bir editör olmadan online olarak test edebilirsiniz.

php php
Eylül 20, 2021 - 13:47
0 53
Canlı Kod Düzenleyici

index.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Live Code Editor</title>

  <link rel="stylesheet" href="style.css">
</head>
<body>

  <textarea id="html" placeholder="HTML"></textarea>
  <textarea id="css" placeholder="CSS"></textarea>
  <textarea id="js" placeholder="JavaScript"></textarea>

  <iframe id="code"></iframe>

  <script type="text/javascript" src="app.js"></script>

</body>
</html>

style.css

body{
  text-align: center;
}

textarea{
  width: 32%;
  float: top;
  min-height: 250px;
  overflow: scroll;
  margin: auto;
  display: inline-block;
  background: #f4f4f9;
  outline: none;
  font-family: Courier, sans-serif;
  font-size: 14px;
}

iframe{
  bottom: 0;
  position: relative;
  width: 100%;
  height: 35em;
}

app.js

function compile(){
  var html = document.getElementById('html');
  var css = document.getElementById('css');
  var js = document.getElementById('js');
  var code = document.getElementById('code').contentWindow.document;


  document.body.onkeyup = function(){
    code.open();
    code.writeln(
      html.value +
      "<style>" +
      css.value +
      "</style>" +
      "<script>" +
      js.value +
      "</script>"
    );
    code.close();
  };
}

compile();