Membuat Aplikasi Border CSS Generator dengan JavaScript

Aplikasi Border CSS Generator adalah sebuah alat yang memungkinkan pengguna untuk membuat kode CSS untuk border dengan mudah. Aplikasi ini menggunakan JavaScript untuk menghasilkan preview dan kode output yang dapat langsung disalin oleh pengguna. User interface aplikasi ini menggunakan framework Bootstrap untuk tampilan yang lebih menarik. Berikut adalah contoh Membuat Aplikasi Border CSS Generator dengan JavaScript.

Border CSS Generator

Border Width:

Border Style:

Border Color:

CSS Output:

Implementasi dalam HTML

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Border CSS Generator</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    /* CSS khusus untuk aplikasi */
    .border-preview {
      width: 200px;
      height: 200px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div class="container mt-5">
    <h1>Border CSS Generator</h1>
    <div class="form-group">
      <label for="border-width">Border Width:</label>
      <input type="number" id="border-width" class="form-control">
    </div>
    <div class="form-group">
      <label for="border-style">Border Style:</label>
      <select id="border-style" class="form-control">
        <option value="solid">Solid</option>
        <option value="dotted">Dotted</option>
        <option value="dashed">Dashed</option>
        <option value="double">Double</option>
      </select>
    </div>
    <div class="form-group">
      <label for="border-color">Border Color:</label>
      <input type="color" id="border-color" class="form-control">
    </div>
    <div class="form-group">
      <button id="generate-btn" class="btn btn-primary">Generate</button>
    </div>
    <div class="form-group">
      <label for="border-output">CSS Output:</label>
      <textarea id="border-output" class="form-control" readonly></textarea>
    </div>
    <div class="border-preview"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>

HTML

Code JavaScript

Buat file dengan nama script.js file ini yang akan di panggil pada form html di atas.

JavaScript

document.getElementById('generate-btn').addEventListener('click', function() {
  var borderWidth = document.getElementById('border-width').value + 'px';
  var borderStyle = document.getElementById('border-style').value;
  var borderColor = document.getElementById('border-color').value;

  var borderCSS = borderWidth + ' ' + borderStyle + ' ' + borderColor;

  document.querySelector('.border-preview').style.border = borderCSS;
  document.getElementById('border-output').value = 'border: ' + borderCSS + ';';
});

JavaScript

Penjelasan Singkat

Aplikasi Border CSS Generator menggunakan JavaScript untuk mengambil nilai dari input pengguna seperti lebar border, jenis border, dan warna border. Kemudian, aplikasi ini menghasilkan kode CSS yang sesuai dengan input pengguna dan mengubah tampilan preview dengan menggunakan kode CSS tersebut. Selain itu, kode CSS juga ditampilkan di textarea sebagai output yang dapat langsung disalin oleh pengguna.

Dengan menggunakan aplikasi ini, pengguna dapat dengan mudah membuat kode CSS untuk border sesuai dengan preferensi mereka tanpa harus menulis kode CSS secara manual. Aplikasi ini sangat berguna bagi pengembang web yang ingin menghemat waktu dan usaha dalam membuat border yang sesuai dengan desain mereka.

Kesimpulan

Aplikasi Border CSS Generator adalah alat yang berguna untuk membuat kode CSS untuk border dengan mudah. Dengan menggunakan JavaScript dan Bootstrap, aplikasi ini memberikan user interface yang intuitif dan tampilan yang menarik. Pengguna dapat menghasilkan kode CSS yang sesuai dengan preferensi mereka dan langsung menggunakannya dalam proyek web mereka.