This Is A Simple Online Html Editor Where You Can Run Html Css And Javascript
Code For Creating The WebPage
Html Code
<!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">
<link rel="stylesheet" href="style.css">
<title>Online Code Editior</title>
</head>
<body>
<div class="btn">
<button>Run</button>
</div>
<div class="box">
<textarea class="input"></textarea>
<iframe class="output"></iframe>
</div>
<script>
let input = document.querySelector('.input');
let output = document.querySelector('.output');
let btnEle = document.querySelector('button')
btnEle.onclick = execute;
function execute() {
let code = input.value;
output.contentWindow.document.body.innerHTML = "";
output.contentWindow.document.write(code)
}
</script>
</body>
</html>
Here's The Css Code
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
button{
padding: 10px 20px;
background-color: black;
color: white;
text-align: center;
margin: auto;
border-radius: 5px;
}
.box {
display: flex;
justify-content: space-around;
width: 100%;
height: 90vh;
gap: 50px;
padding: 20px;
}
.input, .output {
border: 4px solid grey;
width: 49%;
min-height: 500%;
overflow-y: auto;
}
.input{
resize: none;
}
.btn {
display: flex;
justify-content: center;
margin-top: 50px;
}
With This You Can Create A Simple Online Html Editor
You Watch The The How The Code Is Working -Click Here!
Hope This Helps :)
If Any Wrong In This Code Ping Me
Thank You!
Top comments (0)