Berikut adalah contoh kode untuk membuat aplikasi Filter Grayscale dengan 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.
Aplikasi Filter Grayscale
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aplikasi Filter Grayscale</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.grayscale {
filter: grayscale(0%);
}
</style>
</head>
<body>
<div class="container mt-5">
<h1>Aplikasi Filter Grayscale</h1>
<div class="form-group">
<label for="grayscaleRange">Presentase Grayscale:</label>
<input type="range" class="form-control-range" id="grayscaleRange" min="0" max="100" step="1" value="0">
</div>
<div class="form-group">
<label for="codeOutput">Code Output:</label>
<textarea class="form-control" id="codeOutput" rows="3" readonly></textarea>
</div>
<div class="mt-3">
<img src="path/to/image.jpg" alt="Image" class="grayscale">
</div>
</div>
</body>
</html>JavaScript
const grayscaleRange = document.getElementById('grayscaleRange');
const codeOutput = document.getElementById('codeOutput');
const image = document.querySelector('.grayscale');
grayscaleRange.addEventListener('input', function() {
const grayscaleValue = this.value;
image.style.filter = `grayscale(${grayscaleValue}%)`;
codeOutput.value = `filter: grayscale(${grayscaleValue}%);`;
});Silakan salin kode di atas ke dalam file HTML Anda dan gantilah path/to/image.jpg dengan path gambar yang ingin Anda gunakan. Aplikasi ini akan menampilkan gambar dengan filter Grayscale yang dapat diatur menggunakan range slider. Presentase Grayscale akan ditampilkan secara live pada gambar dan kode outputnya akan ditampilkan di textarea yang dapat disalin oleh pengguna.
Pastikan Anda telah menyertakan library Bootstrap dengan menggunakan link stylesheet yang sesuai pada bagian <head> untuk memastikan tampilan aplikasi yang lebih menarik.
Semoga contoh kode di atas bermanfaat untuk Anda dalam membuat aplikasi Filter Grayscale menggunakan JavaScript.
Leave a Reply