Membuat Aplikasi Button Generator Bootstrap dengan JavaScript

Membuat Aplikasi Button Generator Bootstrap dengan JavaScript

—

by

Webbiz.ID
in ,

Berikut ini adalah contoh kode untuk membuat aplikasi Button Generator Bootstrap dengan menggunakan JavaScript yang menghasilkan live preview dan code output button Bootstrap yang bisa langsung disalin oleh pengguna. User interface aplikasi ini menggunakan Bootstrap untuk tampilan yang lebih menarik dan responsif.

Button CSS Generator

Button CSS Generator

HTML

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Button CSS Generator</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <h1>Button CSS Generator</h1>
    <div class="form-group">
      <label for="btnText">Text Button</label>
      <input type="text" class="form-control" id="btnText" placeholder="Masukkan teks button">
    </div>
    <div class="form-group">
      <label for="btnColor">Warna Button</label>
      <select class="form-control" id="btnColor">
        <option value="primary">Primary</option>
        <option value="secondary">Secondary</option>
        <option value="success">Success</option>
        <option value="danger">Danger</option>
        <option value="warning">Warning</option>
        <option value="info">Info</option>
        <option value="light">Light</option>
        <option value="dark">Dark</option>
      </select>
    </div>
    <div class="form-group">
      <label for="btnSize">Ukuran Button</label>
      <select class="form-control" id="btnSize">
        <option value="btn-sm">Small</option>
        <option value="">Default</option>
        <option value="btn-lg">Large</option>
      </select>
    </div>
    <div class="form-group">
      <label for="btnOutline">Outline Button</label>
      <input type="checkbox" id="btnOutline">
    </div>
    <div class="form-group">
      <label for="btnBlock">Block Button</label>
      <input type="checkbox" id="btnBlock">
    </div>
    <div class="form-group">
      <label for="btnDisabled">Disabled Button</label>
      <input type="checkbox" id="btnDisabled">
    </div>
    <div class="form-group">
      <button class="btn btn-primary" id="btnGenerate">Generate Button</button>
    </div>
    <div class="form-group">
      <label>Button Preview:</label>
      <div id="previewContainer"></div>
    </div>
    
    <div class="form-group">
      <label>Code Output:</label>
      <textarea id="codeOutput" class="form-control" readonly></textarea>
    </div>
    
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
HTML

CSS

CSS
   .container {
      width: default;
      padding: 20px;
      background-color: #f2f2f2;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-bottom: 30px;
      margin-top: 30px;
    }
    .btn-preview {
      margin-bottom: 20px;
      text-color: white;
    }
CSS

JavaScript

JavaScript
 document.getElementById('btnGenerate').addEventListener('click', function() {
      var btnText = document.getElementById('btnText').value;
      var btnColor = document.getElementById('btnColor').value;
      var btnSize = document.getElementById('btnSize').value;
      var btnOutline = document.getElementById('btnOutline').checked;
      var btnBlock = document.getElementById('btnBlock').checked;
      var btnDisabled = document.getElementById('btnDisabled').checked;

      var btnClass = 'btn btn-' + btnColor + ' ' + btnSize;
      if (btnOutline) {
        btnClass += ' btn-outline-' + btnColor;
      }
      if (btnBlock) {
        btnClass += ' btn-block';
      }
      if (btnDisabled) {
        btnClass += ' disabled';
      }

      var previewContainer = document.getElementById('previewContainer');
      previewContainer.innerHTML = '<button class="' + btnClass + '">' + btnText + '</button>';

      var codeOutput = document.getElementById('codeOutput');
      codeOutput.textContent = '<button class="' + btnClass + '">' + btnText + '</button>';
    });
JavaScript

Dengan menggunakan kode di atas, Anda dapat membuat aplikasi Button Generator Bootstrap dengan JavaScript yang menghasilkan live preview dan code output button Bootstrap. Pengguna dapat memasukkan teks button, memilih warna, ukuran, dan mengatur apakah button tersebut outline, block, atau disabled. Setelah mengatur semua opsi, pengguna dapat mengklik tombol “Generate Button” untuk melihat live preview dan code output button yang dihasilkan.

Pastikan Anda telah menyertakan library Bootstrap dan jQuery pada kode HTML Anda untuk memastikan tampilan dan fungsionalitas yang benar.

Selamat mencoba!

Artikel Terbaru ⭐