Javascript Kullanarak Real-Time-Editor yapımı

Ocak 13, 2019Ocak 13, 2019 Emre ÖZTÜRK 0 yorum css, css3, editor, html, html5, java, javascript, js, kendi editörüm, real, real time editor, script, time, web

Arkadaşlar bir önceki yazımızda JavaScript ile basit hesap makinesi yapımı gerçekleştirmiştik, şimdi ise bu projemizi kendi yaptığımız Real-Time-Editorümüz de derleyeceğiz. Şimdi projemize geçelim;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Real Time Editor</title>
    <script >
        function refresh() {
            var text = document.getElementById('editor').value;
            document.getElementById('viewer').srcdoc = text;
        }
    </script>
    <style>
        *{
            padding: 0;
            margin: 0;
            height: 100%;
        }
        .main{
            background: #ecf0f1;
            width: 100%;
            height: 100%;
            display: inline-flex;
        }
        #editor{
            width: 100%;
            height: 95%;
            margin: 10px;
            padding: 5px;
        }
        #viewer{
            background: white;
            border: none;
            width: 100%;
            height: 96%;
            margin: 10px;
            border: 1px solid #3498db;
        }
    </style>
</head>
<body>
    <div class="main">
        <textarea id="editor" onkeyup="refresh()" placeholder="Hadi kod yazalım :D"></textarea>
        <iframe id="viewer"></iframe>
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Real Time Editor</title>

function refresh() {

var text = document.getElementById('editor').value;

document.getElementById('viewer').srcdoc = text;

}

</script>

<style>

padding: 0;

margin: 0;

height: 100%;

}

.main{

background: #ecf0f1;

width: 100%;

height: 100%;

display: inline-flex;

}

#editor{

width: 100%;

height: 95%;

margin: 10px;

padding: 5px;

}

#viewer{

background: white;

border: none;

width: 100%;

height: 96%;

margin: 10px;

border: 1px solid #3498db;

}

</style>

</head>

<body>

</div>

</body>

</html>

Kodumuz görüldüğü kısa ve anlaşılır. Çıktımız şekilde ki gibi yer almaktadır. Takıldığınız veya anlayamadığınız noktalarda yorum ekleyebilirsiniz. TeknoKafe.Net i takip etmeye devam edin… Bol kodlu günler…

Görüntüleme Sayısı: 309

Bir cevap yazın Cevabı iptal et