Online Code Editor JavaScript, HTML, CSS

👤 Sharing: AI 
```javascript
<!DOCTYPE html>
<html>
<head>
<title>Online Code Editor</title>
<style>
body {
  font-family: sans-serif;
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh; /* Full viewport height */
}

.container {
  display: flex;
  flex: 1; /* Allow the container to grow and take up remaining space */
}

.editor {
  flex: 1;
  padding: 10px;
  box-sizing: border-box;
}

textarea {
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
  padding: 10px;
  font-family: monospace;
  font-size: 14px;
  resize: none;
  box-sizing: border-box; /* Include padding and border in element's total width and height */
}

iframe {
  flex: 1;
  border: none;
  box-sizing: border-box;
}

.toolbar {
  background-color: #f0f0f0;
  padding: 10px;
  text-align: right;
}

button {
  padding: 5px 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #3e8e41;
}

</style>
</head>
<body>

<div class="toolbar">
  <button onclick="runCode()">Run</button>
</div>

<div class="container">
  <div class="editor">
    <textarea id="htmlCode" placeholder="HTML"></textarea>
  </div>
  <div class="editor">
    <textarea id="cssCode" placeholder="CSS"></textarea>
  </div>
  <div class="editor">
    <textarea id="jsCode" placeholder="JavaScript"></textarea>
  </div>
  <iframe id="output"></iframe>
</div>

<script>
function runCode() {
  const htmlCode = document.getElementById("htmlCode").value;
  const cssCode = document.getElementById("cssCode").value;
  const jsCode = document.getElementById("jsCode").value;

  const outputFrame = document.getElementById("output").contentWindow.document;

  outputFrame.open();
  outputFrame.write(`
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    ${cssCode}
    </style>
    </head>
    <body>
    ${htmlCode}
    <script>
    ${jsCode}
    </script>
    </body>
    </html>
  `);
  outputFrame.close();
}
</script>

</body>
</html>
```
👁️ Viewed: 18

Comments