Yaw biz yazılımcı değilmiyiz niye kendi code editörümüzü yapmıyoruz?
o zaman geçelim...
js kodları:
js kodları:
css kodları :
artık kod editörümüz var işte şimdi full stack olduk
o zaman geçelim...
Kod:
<html>
<head>
<title>Kodumun Editoru</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
<style>
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: violet;
color: white;
}
</style>
</head>
<body>
<textarea id="html" placeholder="HTML"></textarea>
<textarea id="css" placeholder="CSS"></textarea>
<textarea id="js" placeholder="JavaScript"></textarea>
<iframe id="code"></iframe>
<script type="text/javascript" src="app.js"></script>
<button onclick="myFunction()">Renk butonu</button>
<script>
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
</body>
</html>js kodları:
Kod:
<html>
<head>
<title>Kodumun Editoru</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
<style>
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: violet;
color: white;
}
</style>
</head>
<body>
<textarea id="html" placeholder="HTML"></textarea>
<textarea id="css" placeholder="CSS"></textarea>
<textarea id="js" placeholder="JavaScript"></textarea>
<iframe id="code"></iframe>
<script type="text/javascript" src="app.js"></script>
<button onclick="myFunction()">Renk butonu</button>
<script>
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
</body>
</html>js kodları:
Kod:
function compile() {
var html = document.getElementById("html");
var css = document.getElementById("css");
var js = document.getElementById("js");
var code = document.getElementById("code").contentWindow.document;
document.body.onkeyup = function() {
code.open();
code.writeln(
html.value +
"<style>" +
css.value +
"</style>" +
"<script>" +
js.value +
"</script>"
);
code.close();
};
}
compile();css kodları :
Kod:
body {
text-align: center;
}
textarea {
width: 32%;
float: top;
min-height: 250px;
overflow: scroll;
margin: auto;
display: inline-block;
background: #f4f4f9;
outline: none;
font-family: Courier, sans-serif;
font-size: 14px;
}
iframe {
bottom: 0;
position: relative;
width: 100%;
height: 35em;
}artık kod editörümüz var işte şimdi full stack olduk