How to Build Your Own Live Code Editor using HTML, CSS & JavaScript

Показать описание

In this video, I will show you how you can easily create your own real time live html code editor using HTML, CSS & JavaScript.

Рекомендации по теме

Комментарии

This one is Amazing. I created my own live code editor!!! Thank you.

bhagabatiprasad

How can I add like auto finishing the tag when you write <h1> it automaticly generates

zchceef

Thanks! Now me and my friends have an easier way to learn on how to make websites!

devioun

Super Thanks, I needed this for my website

wombofun

Incredible logic. ❤ can u make a video on IDE

ajaytiwari

I noticed your thumbnail had a console.log statement in the JS but your editor doesnt have a console

PabloHernandez-tfdo

Hi, a question if i want to use css and js in a different page, how i have to added? Thank you for this video was great, i hope ypu can answer my question

steffanynaranjo

this is very helpful for me.
Really Big Thanks to you.
I have used this code in my Project and its working fine, but i also need one favour from you.
In my project on webpage i have displayed HTML code in Syntax Highlighter and there in button "Try It Your Self". When user click on that button, that particular code should be paste in html live editor page.
Like in W3school.
I hope are you understand what i am trying to say.
Please help me out to solve this problem.

pruthachauhan

It's really awesome but it doesn't work with const and let. It can only use var why?

adrielamadi

Can i use this project for resume, placement project?

developmywebsiteo

Question
Why you wrote "<scri"+"pt>" instead of "<script >"

glitchlover

I'm referring to your video for my graduation project, and I think it will help me a lot. But can you please tell me the IDE tool that you used to run the code in?

rehamalbulushi

Hello friend, I do not understand why on the right side of the page where is shown the result of the code like the example of the title you put, it appears undefined

fedepeirano

how to make a html structure and apply it to your website like in w3shools theres snippet codes there how to make that like for display code

MarkTzyML

I am having trouble with the code. Somehow the code I type in the boxes does not show up in the box. Can you please show me where I made a mistake. Thanks
(the code is below)

<!DOCTYPE html>
<html>
<head>
<title>Web Code Editor</title>
<style type=”text/css”>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
}
.code-area {
display: flex;
flex-direction: column;
width: 50%;
border-right: 1px solid #555;
}
.code-area textarea {
resize: none;
outline: none;
width: 100%;
height: 33.33%;
font-size: 18px;
padding: 10px;
}
.preview-area {
width: 50%;
}
.preview-area iframe {
width: 100%;
height: 100%;
border: none;
}

</style>
</head>
<body>
<div class=”code-area”>
<textarea id=”htmlCode” placeholder="HTML Code"
<textarea id=”cssCode” placeholder="CSS Code"
<textarea id=”jsCode” placeholder="JavaScript Code"

</div>
<div class=”preview-area”>
<iframe id=”preview-window”><iframe>
</div>
<script type=”text/javascript”>
function showPreview(){
var htmlCode =
var cssCode = "";
var jsCode =
var frame =
frame.open();

frame.close();
}
</script>
</body>
</html>

hammer

<textarea id="text"></textarea> 

<iframe></iframe> 

<script>

var text =
var iframe =

text.addEventListener("keyup", () => {
iframe.src = `data:text/html, ${text.value}`; // <-- adding listener textarea whenever it changes it will execute this code
});

</script>

notflawffles

if we use div instead of textarea what will be change in js code

GauravSingh-cswo

which software you used in the video to write the html code?

bhuvanvenkatganesh.b

I tried to add a title at the top but it is appearing on the left side of my page. how can I add it to the top??

ankushsangwan

how can i add code under <div class="html-code"></div> jo browser pr run ho jay hmare editor k andar plz tell ASAP

saifisqueen

How to Build Your Own Live Code Editor using HTML, CSS & JavaScript

Build Your Own River Tiny House! $100 vs $2500

Routers Suck. Build Your Own Instead!

Build Your Own House: Maximize Savings

build your own cloud

Should You Build Your Own Keyboard?

Build your own Mechanical Keyboard… the RIGHT Way

Bitcoin ₿ in 100 Seconds // Build your Own Blockchain

Build Your Own Retro 2-Player Game!

Building Your Own AI System | Getting Started With OpenAI Swarm In Python

How To: Build your own board game

How To Build Your Own Desktop Turret Robot!

Should You Build Your Own Watch?

Your Router Sucks. Build Your Own Instead!

Why Can't You Build Your Own Laptop?

DIY | How To Build Your Own Hydroponics System.

What Are GPTs and How to Build your Own Custom GPT

How to build your own drainage gully.

HOW TO BUILD YOUR OWN CLASSIC LIBRARY - A short lecture.

Construction Loan Requirements 2024 - HOW To Build Your OWN House!

Should You Buy An Off-The-Shelf NAS Or Build Your Own?

How to Build Your Own Bot from Team Umizoomi 🖌️ | Stay Home #WithMe | DIY Crafts | Nick Jr.

How to Build Your Own Blaze 🚗 | DIY Crafts | Blaze and the Monster Machines

How to Build Your Own Backyard Calisthenics Gym

Build Your Own Walk-In Cooler with this DIY CoolBot Alternative