Membuat aplikasi Border Radius CSS Generator dengan JavaScript

Membuat aplikasi Border Radius CSS Generator dengan JavaScript

—

by

Webbiz.ID
in ,

Berikut ini adalah contoh kode untuk membuat aplikasi Border Radius CSS Generator menggunakan JavaScript. Aplikasi ini akan menghasilkan preview dan code output yang bisa langsung disalin oleh pengguna. User interface aplikasi ini menggunakan Bootstrap untuk tampilan yang lebih menarik.

Border Radius CSS Generator

Border Radius 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>Border Radius CSS Generator</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <div class="container mt-5">
    <h1 class="text-center">Border Radius CSS Generator</h1>
    <div class="form-group">
      <label for="border-radius">Border Radius:</label>
      <input type="range" class="form-control-range" id="border-radius" min="0" max="100" step="1" value="0">
    </div>
    <div class="form-group">
      <label for="preview">Preview:</label>
      <div id="preview" class="border"></div>
    </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>

  <script src="script.js"></script>
</body>
</html>
HTML

Css

CSS
#preview {
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
  margin: 0 auto;
}

.border {
  border-radius: 0;
}
CSS

JavaScript

JavaScript
document.addEventListener('DOMContentLoaded', function() {
  var borderRadiusRange = document.getElementById('border-radius');
  var preview = document.getElementById('preview');
  var codeOutput = document.getElementById('code-output');

  borderRadiusRange.addEventListener('input', function() {
    var borderRadiusValue = borderRadiusRange.value;
    preview.style.borderRadius = borderRadiusValue + '%';
    codeOutput.value = 'border-radius: ' + borderRadiusValue + '%;';
  });
});
JavaScript

Aplikasi Border Radius CSS Generator ini menggunakan HTML, CSS, dan JavaScript. HTML digunakan untuk membuat struktur tampilan aplikasi, CSS digunakan untuk mengatur tampilan elemen-elemen dalam aplikasi, dan JavaScript digunakan untuk mengatur interaksi pengguna dan menghasilkan code output.

Pada HTML, kita menggunakan Bootstrap untuk mempercantik tampilan aplikasi. Terdapat sebuah input range yang digunakan untuk mengatur nilai border radius, sebuah div dengan id “preview” untuk menampilkan preview border radius, dan sebuah textarea dengan id “code-output” untuk menampilkan code output.

Pada CSS, kita mengatur tampilan dari preview dengan memberikan lebar, tinggi, warna latar belakang, dan margin. Selain itu, kita juga memberikan class “border” pada div preview untuk mengatur border radius.

Pada JavaScript, kita menggunakan event listener untuk mendeteksi perubahan pada input range. Ketika input range berubah, kita mengubah nilai border radius pada preview sesuai dengan nilai input range yang dipilih oleh pengguna. Selain itu, kita juga mengupdate nilai code output dengan code CSS yang sesuai.

Dengan menggunakan kode di atas, Anda dapat membuat aplikasi Border Radius CSS Generator yang interaktif dan mudah digunakan. Pengguna dapat mengatur nilai border radius sesuai dengan keinginan mereka dan langsung mendapatkan code output yang bisa mereka salin untuk implementasi dalam proyek mereka.

Artikel Terbaru ⭐