HTML Code Tester Sederhana dengan Fungsi Preview Dinamis

 Dalam era digital saat ini, kemampuan untuk menguji dan menampilkan kode HTML secara cepat dan efisien menjadi sangat penting bagi pengembang web, pendidik, dan bahkan hobiis. HTML Code Tester adalah alat yang dirancang untuk memenuhi kebutuhan ini. 

Membuat HTML Code Tester Sederhana dengan HTML dan Javascript

Fitur Utama HTML Code Tester Sederhana

• HTML Code Tester yang kita bangun memiliki fitur-fitur sebagai berikut:
• Editor Kode: Sebuah area teks tempat pengguna dapat menulis atau menempelkan kode HTML.
• Tombol Eksekusi: Untuk menjalankan kode HTML yang ditulis di editor.
• Area Hasil: Sebuah frame tempat hasil dari kode HTML yang dijalankan ditampilkan.
• Pilihan Tampilan Responsif: Tombol untuk mengubah ukuran tampilan hasil antara layar penuh, ukuran ponsel, ukuran tablet, dan ukuran default.

Struktur Kode

Kode ini terdiri dari tiga bagian utama: HTML, CSS, dan JavaScript.

Script HTML

Bagian HTML mengandung elemen-elemen dasar seperti editor teks, tombol untuk menjalankan kode, dan iframe untuk menampilkan hasil.

<div>
  <h2>Code</h2>
  <textarea id="editor" placeholder="Type your HTML here..." class="form-control"></textarea><br />
  <button onclick="runCode()" class="btn btn-primary">Run Code</button>
</div>

<h2>Result</h2>
<button onclick="setFullScreen()" class="btn btn-secondary">Full Screen</button>
<button onclick="setPhoneSize()" class="btn btn-secondary">Phone Size</button>
<button onclick="setTabletSize()" class="btn btn-secondary">Tablet Size</button>
<button onclick="setDefaultSize()" class="btn btn-secondary">Default Size</button>
<div id="result">
  <iframe id="resultFrame"></iframe>
</div>

Script CSS

CSS digunakan untuk memberikan tampilan yang menarik dan responsif pada editor dan area hasil.

<style>
  #editor {
    /* Styling untuk editor */
  }
  #result {
    /* Styling untuk area hasil */
  }
  .full-screen, .phone-size, .tablet-size {
    /* Responsif style untuk area hasil */
  }
  iframe {
    /* Styling untuk iframe */
  }
</style>

Script Javascript

JavaScript bertanggung jawab untuk interaktivitas, termasuk menjalankan kode HTML dan mengubah ukuran tampilan hasil.

<script>
  function runCode() {
    // Fungsi untuk menjalankan kode HTML
  }

  function setFullScreen() {
    // Fungsi untuk mengatur tampilan layar penuh
  }

  // Fungsi tambahan untuk ukuran ponsel, tablet, dan default
</script>

Cara Kerja

• Menulis Kode: Pengguna menulis atau menempelkan kode HTML di editor.
• Menjalankan Kode: Setelah menekan tombol 'Run Code', fungsi `runCode()` akan dijalankan. Fungsi ini mengambil kode dari editor dan menampilkan hasilnya di iframe.
• Mengubah Tampilan Hasil: Pengguna dapat memilih tampilan layar penuh, ponsel, tablet, atau default untuk melihat bagaimana kode HTML mereka bereaksi di berbagai ukuran layar.

Keseluruhan Code

<style>
  #editor {
    font-family: monospace;
    height: 300px;
    white-space: nowrap;
    overflow: auto;
    background: #000;
    color: #d5d5d5;
  }
  #result {
    border: 1px solid #ccc;
    padding: 5px;
    overflow: auto;
    margin-top: 10px;
  }
  .full-screen {
    width: 100%;
    height: 100vh; /* Full height of the viewport */
  }
  .phone-size {
    width: 360px;
    height: 640px;
  }
  .tablet-size {
    width: 768px;
    height: 1024px;
  }
  iframe {
    border: none;
    width: 100%;
    height: 100vh;
    overflow-y: hidden; /* Hide the vertical scrollbar */
  }
</style>

<div>
  <h2>Code</h2>
  <textarea id="editor" placeholder="Type your HTML here..." class="form-control"></textarea><br />
  <button onclick="runCode()" class="btn btn-primary">Run Code</button>
</div>

<h2>Result</h2>
  <button onclick="setFullScreen()" class="btn btn-secondary">Full Screen</button>
  <button onclick="setPhoneSize()" class="btn btn-secondary">Phone Size</button>
  <button onclick="setTabletSize()" class="btn btn-secondary">Tablet Size</button>
  <button onclick="setDefaultSize()" class="btn btn-secondary">Default Size</button>
<div id="result">
  <iframe id="resultFrame"></iframe>
</div>

<script>
  function runCode() {
    const code = document.getElementById('editor').value;
    const resultFrame = document.getElementById('resultFrame').contentDocument;
    resultFrame.open();
    resultFrame.write(code);
    resultFrame.close();
  }

  function setFullScreen() {
    const result = document.getElementById('result');
    result.className = 'full-screen';
  }

  function setPhoneSize() {
    const result = document.getElementById('result');
    result.className = 'phone-size';
  }

  function setTabletSize() {
    const result = document.getElementById('result');
    result.className = 'tablet-size';
  }

  function setDefaultSize() {
    const result = document.getElementById('result');
    result.className = '';
  }
</script>

Preview

Result

Full Screen Phone Size Tablet Size Default Size

HTML Code Tester ini adalah alat yang sangat berguna untuk pengujian dan demonstrasi kode HTML. Dengan kemampuan untuk mengedit dan melihat hasil secara real-time di berbagai ukuran layar, ini menjadi alat yang tak ternilai bagi pengembang web untuk menguji dan menyempurnakan kode kamu.