Membuat Aplikasi Filter Invert dengan JavaScript

Membuat Aplikasi Filter Invert dengan JavaScript

—

by

Webbiz.ID
in ,

Berikut adalah contoh kode untuk membuat aplikasi Filter Invert 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 Invert

Aplikasi Filter Invert

Live Preview:

Image
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 Invert</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    .invert-filter {
      filter: invert(0%);
    }
  </style>
</head>
<body>
  <div class="container mt-5">
    <h1>Aplikasi Filter Invert</h1>
    <div class="form-group">
      <label for="invert-range">Presentase Invert:</label>
      <input type="range" class="form-control-range" id="invert-range" min="0" max="100" step="1" value="0">
    </div>
    <div class="form-group">
      <label for="code-output">Code Output:</label>
      <textarea class="form-control" id="code-output" rows="3" readonly></textarea>
    </div>
    <div class="mt-3">
      <h3>Live Preview:</h3>
      <img src="path/to/image.jpg" alt="Image" class="invert-filter">
    </div>
  </div>
</body>
</html>
HTML

JavaScript

JavaScript
const invertRange = document.getElementById('invert-range');
    const codeOutput = document.getElementById('code-output');
    const image = document.querySelector('.invert-filter');

    invertRange.addEventListener('input', function() {
      const invertPercentage = this.value;
      image.style.filter = `invert(${invertPercentage}%)`;
      codeOutput.value = `filter: invert(${invertPercentage}%);`;
    });
JavaScript

Anda dapat menyalin kode di atas dan menyimpannya dalam file HTML untuk melihat aplikasi Filter Invert dalam tindakan. Pastikan untuk mengganti path/to/image.jpg dengan path gambar yang ingin Anda gunakan.

Dengan menggunakan kode di atas, pengguna dapat menggeser range slider untuk mengatur presentase invert. Live preview akan menampilkan gambar dengan filter invert sesuai dengan presentase yang dipilih. Code output juga akan diperbarui secara otomatis dan dapat disalin oleh pengguna untuk implementasi lebih lanjut.

Semoga contoh kode di atas bermanfaat bagi Anda dalam membuat aplikasi Filter Invert menggunakan CSS.

Artikel Terbaru ⭐