Membuat Aplikasi List Style CSS Generator menggunakan JavaScript

Membuat Aplikasi List Style CSS Generator menggunakan JavaScript

—

by

Webbiz.ID
in ,

Berikut ini adalah contoh kode untuk membuat aplikasi List Style CSS Generator menggunakan JavaScript. Aplikasi ini akan menghasilkan live preview presentase dan code output yang bisa langsung disalin oleh pengguna. User interface aplikasi ini menggunakan Bootstrap untuk tampilan yang lebih menarik.

See the Pen List Style CSS Generator by WebbizID (@De-Orchids) on CodePen.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>List Style CSS Generator</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    /* CSS untuk list style */
    .list-style {
      list-style-type: none;
      padding-left: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>List Style CSS Generator</h1>
    <form>
      <div class="form-group">
        <label for="list-style-type">Pilih jenis list:</label>
        <select class="form-control" id="list-style-type">
          <option value="none">None</option>
          <option value="disc">Disc</option>
          <option value="circle">Circle</option>
          <option value="square">Square</option>
          <option value="decimal">Decimal</option>
          <option value="decimal-leading-zero">Decimal Leading Zero</option>
          <option value="lower-roman">Lower Roman</option>
          <option value="upper-roman">Upper Roman</option>
          <option value="lower-alpha">Lower Alpha</option>
          <option value="upper-alpha">Upper Alpha</option>
        </select>
      </div>
      <button type="submit" class="btn btn-primary">Generate</button>
    </form>
    <hr>
    <h2>Preview:</h2>
    <ul class="list-style" id="preview-list">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
    <hr>
    <h2>Code Output:</h2>
    <pre id="code-output"></pre>
  </div>
</body>
</html>
HTML

JavaScript

JavaScript
    // JavaScript untuk menghasilkan code output
    const form = document.querySelector('form');
    const select = document.querySelector('#list-style-type');
    const previewList = document.querySelector('#preview-list');
    const codeOutput = document.querySelector('#code-output');

    form.addEventListener('submit', function(event) {
      event.preventDefault();
      const listStyleType = select.value;
      previewList.style.listStyleType = listStyleType;
      codeOutput.textContent = `.list-style {\n  list-style-type: ${listStyleType};\n  padding-left: 20px;\n}`;
    });
JavaScript

Artikel Terbaru ⭐