Open In App

How to make Live Coding Editor using HTML CSS and JavaScript ?

Last Updated : 23 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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

ppp

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 JavaScript

Output


Next Article

Similar Reads