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
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>CSS
CSS
body {
background-color: #ffffff;
}
.container {
margin-top: 50px;
}
.form-group {
margin-bottom: 20px;
}
#copyBtn {
width: 100%;
}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!');
});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.
Leave a Reply