Javascript Kullanarak Real-Time-Editor yapımı
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;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!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> |
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…