Membuat Aplikasi Filter Contrast dengan JavaScript

Membuat Aplikasi Filter Contrast dengan JavaScript

—

by

Webbiz.ID
in ,

Berikut ini adalah contoh kode untuk membuat aplikasi Filter Contrast dengan menggunakan JavaScript dengan live preview presentase dan code output yang bisa langsung disalin pengguna. User interface aplikasi ini menggunakan Bootstrap untuk tampilan yang lebih menarik.

Filter Contrast

Filter Contrast

HTML

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Filter Contrast</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    .container {
      margin-top: 50px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Filter Contrast</h1>
    <div class="form-group">
      <label for="contrastRange">Contrast:</label>
      <input type="range" class="form-control-range" id="contrastRange" min="0" max="100" value="50">
    </div>
    <div class="form-group">
      <label for="outputCode">Output Code:</label>
      <textarea class="form-control" id="outputCode" rows="3" readonly></textarea>
    </div>
    <div class="form-group">
      <label for="outputPreview">Output Preview:</label>
      <div id="outputPreview" style="width: 200px; height: 200px; background-color: #000;"></div>
    </div>
  </div>
</body>
</html>
HTML

JavaScript

JavaScript
const contrastRange = document.getElementById('contrastRange');
    const outputCode = document.getElementById('outputCode');
    const outputPreview = document.getElementById('outputPreview');

    contrastRange.addEventListener('input', function() {
      const contrastValue = this.value;
      outputCode.value = `filter: contrast(${contrastValue}%);`;
      outputPreview.style.filter = `contrast(${contrastValue}%)`;
    });
JavaScript

Anda dapat menyalin kode di atas ke dalam file HTML dan menjalankannya di browser untuk melihat aplikasi Filter Contrast dalam aksi. Ketika pengguna menggeser slider pada input range, presentase contrast akan diperbarui secara real-time di textarea output code dan tampilan preview.

Pastikan Anda telah menyertakan Bootstrap CSS untuk memastikan tampilan yang konsisten dan menarik.

Semoga contoh kode di atas dapat membantu Anda dalam membuat aplikasi Filter Contrast menggunakan JavaScript dan Bootstrap. Jika Anda memiliki pertanyaan lebih lanjut, jangan ragu untuk bertanya.

Artikel Terbaru ⭐