Membuat Aplikasi Filter Saturate dengan JavaScript

Membuat Aplikasi Filter Saturate dengan JavaScript

—

by

Webbiz.ID
in ,

Berikut adalah contoh kode untuk membuat aplikasi Filter Saturate 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. Berikut adalah implementasinya dalam HTML:

Aplikasi Filter Saturate

Aplikasi Filter Saturate

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 Saturate</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    .preview {
      width: 300px;
      height: 300px;
      background-image: url('image.jpg');
      background-size: cover;
      filter: saturate(100%);
    }
  </style>
</head>
<body>
  <div class="container mt-5">
    <h1>Aplikasi Filter Saturate</h1>
    <div class="form-group">
      <label for="saturateRange">Presentase Saturasi:</label>
      <input type="range" class="form-control-range" id="saturateRange" min="0" max="200" value="100">
    </div>
    <div class="form-group">
      <label for="codeOutput">Code Output:</label>
      <textarea class="form-control" id="codeOutput" rows="3" readonly></textarea>
    </div>
    <div class="form-group">
      <label for="preview">Preview:</label>
      <div class="preview" id="preview"></div>
    </div>
  </div>
</body>
</html>
HTML

JavaScript

JavaScript

    const saturateRange = document.getElementById('saturateRange');
    const codeOutput = document.getElementById('codeOutput');
    const preview = document.getElementById('preview');

    saturateRange.addEventListener('input', function() {
      const saturateValue = this.value;
      codeOutput.value = `filter: saturate(${saturateValue}%);`;
      preview.style.filter = `saturate(${saturateValue}%)`;
    });
JavaScript

Anda dapat mengganti image.jpg dengan URL gambar yang ingin Anda gunakan sebagai background. Aplikasi ini menggunakan elemen <input type="range"> untuk mengatur presentase saturasi, dan akan menghasilkan output kode CSS yang sesuai dengan presentase yang dipilih. Preview akan secara langsung menampilkan efek saturasi sesuai dengan presentase yang dipilih.

Silakan salin kode di atas ke dalam file HTML Anda dan sesuaikan dengan kebutuhan Anda. Anda juga dapat menyesuaikan tampilan aplikasi dengan menggunakan CSS tambahan atau mengubah struktur HTML sesuai kebutuhan Anda.

Itulah cara Membuat Aplikasi Filter Saturate dengan JavaScript, Semoga bermanfaat!

Artikel Terbaru ⭐