Thursday, November 14, 2019

Cara Membuat Realtime Code Editor

Cara Membuat Realtime Code Editor

HobbyTekno - Realtime Code Editor adalah Code Editor yang sangat berguna bagi anda yang ingin mendesain web agar lebih praktis. Gunanya adalah langsung menghasilkan atau menampilkan Output dari Script Web Design yang anda ketik. Seperti Konsep yang digunakan Codepen.io. Langsung saja berikut langkah-langkah cara membuatnya.

Langkah-Langkah Membuat Realtime Code Editor


1. Salin Script berikut, simpan sebagai .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">
<title>Real Time Code Editor</title>
<!-- CSS EXTERNAL -->
<link rel="stylesheet" type="text/css" href="style.css">
<script>
function refresh(){
const textContent = document.getElementById('code-x').value;
document.getElementById('hasil').srcdoc = textContent;
}
</script>
</head>
<body>
<div class="title">
<h2 style="color: black">
Real Time Code Editor
</h2>
<div class="main">
<textarea  id="code-x" onkeyup="refresh()" placeholder="Ketik kode disini"></textarea>
<iframe id="hasil"></iframe>
</div>
</div>
</body>
</html>

2. Salin kode berikut sebagai style.css

*{
padding: 0;
margin: 0;
background: #262626;
color: lightskyblue;
font-size: 21px;
}
.main{
display: inline-flex;
width: 100%;
height: 100%;
background: #ecf0f1;
}
#code-x{
width: 100%;
height: 98%;
margin-top: 5px;
padding: 5px;
}
#hasil{
background: #fff;
border: none;
width: 100%;
height: 98%;
border: 1px solid cyan;
margin-top: 5px;
}
.title h2{
font-family: Google Sans, sans-serif;
text-align: center;
background: dodgerblue;
width: 100%;
height: 70px;
line-height: 70px;
cursor: pointer;
}

3. Lalu buka file .html tadi untuk melihat hasilnya, Tampilannya akan seperti berikut ini.


Code Editor ini sangat bermanfaat bagi kita yang ingin mendesain web, karena kita dapat langsung melihat hasilnya. Nah Script ini juga bisa anda upload ke hosting anda.

Sekian Cara Membuat Realtime Code Editor, semoga postingan Admin kali ini bermanfaat untuk anda. Jika ada kendala tanyakan saja pada komentar

Komentar


EmoticonEmoticon