👇
💻 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
⚙️ 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)
