Membuat Aplikasi Background CSS Generator dengan JavaScript

Membuat Aplikasi Background CSS Generator dengan JavaScript

—

by

Webbiz.ID
in ,

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

Background CSS Generator

Background 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>Background 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>Background CSS Generator</h1>
    <div class="form-group">
      <label for="color">Warna Latar Belakang:</label>
      <input type="color" id="color" class="form-control">
    </div>
    <div class="form-group">
      <label for="output">Code Output:</label>
      <textarea id="output" class="form-control" readonly></textarea>
    </div>
    <div class="form-group">
      <button id="copyBtn" class="btn btn-primary">Salin Code</button>
    </div>
  </div>

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

CSS

CSS
body {
  background-color: #ffffff;
}

.container {
  margin-top: 50px;
}

.form-group {
  margin-bottom: 20px;
}

#copyBtn {
  width: 100%;
}
CSS

JavaScript (script.js)

JavaScript
document.getElementById('color').addEventListener('input', function() {
  var color = this.value;
  document.body.style.backgroundColor = color;
  document.getElementById('output').value = 'background-color: ' + color + ';';
});

document.getElementById('copyBtn').addEventListener('click', function() {
  var output = document.getElementById('output');
  output.select();
  document.execCommand('copy');
  alert('Code berhasil disalin!');
});
JavaScript

Dengan menggunakan kode di atas, Anda dapat membuat aplikasi Background CSS Generator yang dapat menghasilkan live preview dan code output yang bisa langsung disalin oleh pengguna. Aplikasi ini menggunakan user interface Bootstrap untuk tampilan yang lebih menarik.

Artikel Terbaru ⭐