In this project, we'll be building a live code editor similar to Codepen or JsFiddle.


Have you seen w3schools code editorial manager we are building like that however in the basic rendition. 

See how our HTML Editor Look like (Demo):-



What properties, qualities, and components we need to use to accomplish this? 

Contenteditable: in the event that you add contenteditable trait to a component it gets editable in the program. 

TextContent: it is utilized to get the textContent present inside the dom hub. 

InnerHtml: The innerHtml property is utilized to get the HTML content rather than text.


Source Code:-

HTML File (save as index.html)


<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>HTML Editor</title>
     <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main-editor">
        <button class="btn">
            Run
        </button>
        <div class="first" contenteditable></div>
        <iframe class="second"></iframe>
    </div>
     <script src="main.js"></script>
</body>
</html>



CSS File (save as style.css)

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 30px;
}
.btn{
  position: fixed;
  right: 0;
  padding: 0.4rem;
  width: 4rem;
  background: rgb(0,0,0);
  color: gold;
  font-size: 1rem;
  outline: none;
  cursor: pointer;
  height: 90vh;
}
.btn:hover{
  color: white;
  background: linear-gradient(#ff1a75, #ff0066);
}
.main-editor{
  background: rgba(0,0,0,0.91);
  display: flex;
  width: 100%;
  padding: 1rem;
  box-shadow: 0 2px 3px black;
  position: fixed;
  height: 100vh;
  justify-content: center;
  align-items: center;
  border: 7px solid #36383f;
}
.first{
  background-color: #fff;
  width: 50%;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: pre;
  box-shadow: 0 1px 1px rgb(22, 22, 22);
  outline: none;
    padding: 0.4rem;
    height: 90vh;
}
.second{
  background-color: rgb(255, 255, 255);
  width: 50%;
  overflow-y: auto;
  white-space: pre;
  right: 0;
  box-shadow: 0 1px 1px rgb(22, 22, 22);
  padding: 0.4rem;
  height: 90vh;
}


Javascript File (save as main.js)

const first = document.querySelector('.first');
const iframe = document.querySelector('iframe');
const btn = document.querySelector('button');

btn.addEventListener('click', () => {
   var html = first.textContent;
  iframe.src = "data:text/html;charset=utf-8," + encodeURI(html);
});


first.addEventListener('Keyup',()=> {
var html = first.textContent;
iframe.src = "data:text/html;charset=utf-8," + encodeURI(html);
})

first.addEventListener('paste', function(e){
  e.preventDefault();
  var text = e.clipboardData.getData('text/plain');
  document.execCommand('insertText', false, text);
})


Or, 

Click here to get free files




Thanks For Watching