How to make Live Coding Editor using HTML CSS and JavaScript ?
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 = "https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.min.js" > </ script > < script src = "https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js" > </ 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
Contact Us