In this article, we will implement a live coding editor using HTML, CSS, and JavaScript. This project will allow you to write and execute HTML, CSS, and JavaScript code in real-time, making it an excellent tool for learning and testing your code snippets.
Final Output
Prerequisite
Approach
- Begin by defining the HTML, CSS, and JavaScript files in your project.
- Create the HTML structure to build the user interface, including text areas, buttons, and iframes. Use HTML elements such as <textarea>, <button>, and <iframe>.
- Apply CSS styles to the HTML elements for a visually appealing and user-friendly interface. Define fonts, colors, and layouts to enhance the appearance of the editor.
- In JavaScript, we created a function to read the HTML CSS JS code, and to convert it into UI, and will display it in Iframe Tag.
Example: This example illustrates the creation of a Live Coding Editor project using HTML CSS & JavaScript.
HTML
<!-- Index.html --> <!DOCTYPE html> < html >
< head >
< title >Live Coding Editor</ title >
< link rel = "stylesheet" type = "text/css" href = "style.css" >
</ head >
< body >
< div id = "editor" >
< div class = "code-section" >
< label for = "htmlCode" >
HTML Code:
</ label >
< textarea id = "htmlCode" class = "code" placeholder =
"Enter HTML code here" >
</ textarea >
</ div >
< div class = "code-section" >
< label for = "cssCode" >
CSS Code:
</ label >
< textarea id = "cssCode" class = "code" placeholder =
"Enter CSS code here" >
</ textarea >
</ div >
< div class = "code-section" >
< label for = "jsCode" >
JavaScript Code:
</ label >
< textarea id = "jsCode" class = "code" placeholder =
"Enter JavaScript code here" >
</ textarea >
</ div >
< div class = "code-section" >
< label for = "output" >
Output:
</ label >
< div id = "output" class = "code" >
</ div >
</ div >
< div id = "menu" >
< button id = "runButton" >
Run Code
</ button >
< button id = "clearButton" >
Clear Code
</ button >
< a id = "downloadButton" download = "code.zip" >
Download Code
</ a >
</ div >
</ div >
< iframe id = "preview" ></ iframe >
< script src = "script.js" ></ script >
< script src =
</ script >
< script src =
</ script >
</ body >
</ html >
|
CSS
/* Style.css */ body { font-family : Arial , sans-serif ;
margin : 0 ;
padding : 0 ;
background-color : #f4f4f4 ;
} #editor { display : flex;
flex- direction : column;
height : 100 vh;
padding : 10px ;
} label { font-weight : bold ;
color : #007acc ;
} .code-section { margin-bottom : 20px ;
} #htmlCode, #cssCode { background-color : #fff ;
} . code {
width : 100% ;
height : 200px ;
padding : 10px ;
border : none ;
resize: none ;
font-family : "Courier New" ,
monospace ;
border : 1px solid #ccc ;
border-radius: 5px ;
} button { padding : 5px 10px ;
background-color : #007acc ;
color : #fff ;
border : none ;
cursor : pointer ;
margin-right : 10px ;
} #downloadButton { text-decoration : none ;
background-color : #007acc ;
color : #fff ;
padding : 5px 10px ;
margin-right : 10px ;
} iframe { width : 100% ;
height : calc( 100% - 320px );
border : none ;
} #htmlCode::placeholder, #cssCode::placeholder, #jsCode::placeholder { color : hsl( 113 , 100% , 49% );
} /* Styles for responsive UI */ @media ( max-width : 768px ) {
.code-section {
width : 100% ;
margin : 10px 0 ;
}
. code {
width : 100% ;
}
} /* Style for scrollable output box */ #output { background-color : #f0f0f0 ;
border : 1px solid #ccc ;
padding : 10px ;
overflow-y: auto ;
max-height : 300px ;
} |
Javascript
// Script.js const htmlCode = document.getElementById( 'htmlCode' );
const cssCode = document.getElementById( 'cssCode' );
const jsCode = document.getElementById( 'jsCode' );
const output = document.getElementById( 'output' )
const previewFrame = document.getElementById( 'preview' );
const runButton = document.getElementById( 'runButton' );
const clearButton = document.getElementById( 'clearButton' );
const downloadButton = document.getElementById( 'downloadButton' );
const updatePreview = () => { const html = htmlCode.value;
const css =
`<style>${cssCode.value}</style>`; const js =
`<script>${jsCode.value}</script>`; const code = `${html}\n${css}\n${js}`;
output.innerHTML = code;}
const clearCode=() => { htmlCode.value = '' ;
cssCode.value = '' ;
jsCode.value = '' ;
updatePreview()}
const downloadCode = () => { const zip = new JSZip();
zip.file( "index.html" , htmlCode.value);
zip.file( "styles.css" , cssCode.value);
zip.file( "script.js" , jsCode.value);
zip.generateAsync({ type: "blob" }).
then( function (content) {
saveAs(content, "code.zip" );
})}
// Initial preview update updatePreview(); downloadButton.addEventListener( 'click' , () => {
const zip = new JSZip();
zip.file( "index.html" , htmlCode.value);
zip.file( "styles.css" , cssCode.value);
zip.file( "script.js" , jsCode.value);
zip.generateAsync({ type: "blob" })
.then( (content)=> {
saveAs(content, "code.zip" );
})});
runButton.addEventListener( 'click' , updatePreview);
clearButton.addEventListener( 'click' , clearCode);
downloadButton.addEventListener( 'click' , downloadCode);
|
Output