👇

💻 Online Code Editor (Like CodePen)

📌 What it is

A web app where users can:

Write HTML, CSS, JavaScript
Instantly see output in a live preview
Just like:
👉 CodePen
👉 JSFiddle

🇮🇳 Amazon India 🌍 Amazon Global

⚙️ Core Features (Must Have)

1️⃣ Code Input Areas

You need 3 editors:

HTML Editor
CSS Editor
JavaScript Editor

👉 Simple way:

<textarea id="htmlCode"></textarea>
<textarea id="cssCode"></textarea>
<textarea id="jsCode"></textarea>

2️⃣ Live Preview (iframe)

Use an <iframe> to show output.

<iframe id="output"></iframe>

3️⃣ Run Button ▶️

When user clicks Run, combine all code and show inside iframe.

function runCode() {
  let html = document.getElementById("htmlCode").value;
  let css = document.getElementById("cssCode").value;
  let js = document.getElementById("jsCode").value;  let output = document.getElementById("output");  output.srcdoc = `
    <html>
      <style>${css}</style>
      <body>
        ${html}
        <script>${js}<\/script>
      </body>
    </html>
  `;
}

4️⃣ Clear / Reset Button 🔄

function clearCode() {
  document.getElementById("htmlCode").value = "";
  document.getElementById("cssCode").value = "";
  document.getElementById("jsCode").value = "";
}

🚀 Advanced Features (Portfolio Boost)

⭐ 1. Live Auto Update (No Run Button)

document.querySelectorAll("textarea").forEach(area => {
  area.addEventListener("input", runCode);
});

⭐ 2. Syntax Highlighting (Pro Level)

Use:
👉 Monaco Editor (VS Code engine)

CDN:

<script src="https://unpkg.com/monaco-editor@latest/min/vs/loader.js"></script>

⭐ 3. Save Code (LocalStorage)

localStorage.setItem("html", html);
localStorage.setItem("css", css);
localStorage.setItem("js", js);

Load on refresh:

document.getElementById("htmlCode").value = localStorage.getItem("html") || "";

⭐ 4. Download Code as File

Allow user to download .html file.

⭐ 5. Theme Switch (Dark/Light)

Adds UI polish → important for portfolio

🧠 Skills You Learn

🔹 iframe usage

Rendering dynamic content
Safe sandbox execution

🔹 DOM Manipulation

Handling inputs
Updating UI in real-time

🔹 JavaScript Logic

String templates
Event handling

🔹 Advanced Tools

Monaco Editor integration
LocalStorage (data persistence)

🏗️ Project Structure

/online-editor
 ├── index.html
 ├── style.css
 └── script.js

🎯 Bonus Ideas (Make it Unique)

Split screen layout (like VS Code)
Console output panel
Auto-save feature
Share code via link
Multiple tabs (HTML/CSS/JS switch)