Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Custom Code Editor" project using HTML, CSS & JavaScript.
Preview
In the above video, you’ve seen the preview of the "Custom Code Editor" project and I hope now you are able to create this type of project. If not, I have provided all the HTML CSS and JavaScript code below.
Custom Code Editor [Source Code]
To get the following HTML, CSS & JS code for the Custom Code Editor project. You need to create three files one is a HTML file, second one is a CSS file and the another one is JS file. After creating these three files then you can copy-paste the given codes on your document.
Remember, you’ve to create a file with .html extension for HTML code, .css extension for CSS code and .js for JavaScript code.
You can also download all source code files from the given download button.
<!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>Custom Code Editor</title>
<link rel="stylesheet" href="style.css">
<!-- cdn link for font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="container">
<div class="left">
<div>
<label for="html"><i class="fa-brands fa-html5"></i>HTML</label>
<textarea name="html" id="html"></textarea>
</div>
<div>
<label for="css"><i class="fa-brands fa-css3-alt"></i>CSS</label>
<textarea name="css" id="css"></textarea>
</div>
<div>
<label for="js"><i class="fa-brands fa-square-js fa-css3-alt"></i>JavaScript</label>
<textarea name="js" id="js"></textarea>
</div>
</div>
<div class="right">
<label for="output"><i class="fa-solid fa-code"></i>Output</label>
<iframe src="" id="output"></iframe>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: bisque;
color: white;
}
.container {
display: flex;
}
.left,
.right {
width: 50%;
padding: 10px;
}
.left {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: -10px;
}
label {
display: block;
padding: 2px 0 2px 10px;
background-color: gray;
border-radius: 5px 5px 0 0;
font-weight: 500;
}
i {
margin-right: 5px;
}
.fa-html5 {
color: orange;
}
.fa-css3-alt {
color: blue;
}
.fa-square-js {
color: yellow;
}
textarea {
resize: none;
width: 100%;
height: 190px;
padding: 10px;
border: 2px solid gray;
border-radius: 0 0 5px 5px;
}
iframe {
width: 100%;
height: 97%;
background-color: white;
border: 2px solid gray;
border-radius: 0 0 5px 5px;
}
textarea:focus {
outline: none;
}
const htmlCodeEl = document.querySelector("#html");
const cssCodeEl = document.querySelector("#css");
const jsCodeEl = document.querySelector("#js");
const outputEl = document.querySelector("#output");
function run() {
// Storing the data in Local Storage
localStorage.setItem('htmlCodeEl', htmlCodeEl.value);
localStorage.setItem('cssCodeEl', cssCodeEl.value);
localStorage.setItem('jsCodeEl', jsCodeEl.value);
// executing & Evaluating HTML, CSS & JS code
outputEl.contentDocument.body.innerHTML = `<style>${localStorage.cssCodeEl}</style>` + localStorage.htmlCodeEl;
outputEl.contentWindow.eval(localStorage.jsCodeEl);
}
// If user type anything in the respective code element then it automatically runs and it will show in the output
htmlCodeEl.addEventListener("keyup",()=>{run()})
cssCodeEl.addEventListener("keyup",()=>{run()})
jsCodeEl.addEventListener("keyup",()=>{run()})
// Accessing data stored in Local Storage.
htmlCodeEl.value = localStorage.htmlCodeEl;
cssCodeEl.value = localStorage.cssCodeEl;
jsCodeEl.value = localStorage.jsCodeEl;