Membuat Aplikasi Box Shadows CSS Generator dengan JavaScript

Membuat Aplikasi Box Shadows CSS Generator

—

by

Webbiz.ID
in ,

Berikut ini adalah contoh kode untuk membuat aplikasi Box Shadows CSS Generator menggunakan JavaScript. Aplikasi ini akan menghasilkan output CSS yang dapat langsung disalin oleh pengguna. Selain itu, aplikasi ini juga dilengkapi dengan antarmuka pengguna yang menarik dan penjelasan lengkap untuk pemahaman dan implementasinya dalam HTML.

See the Pen Box Shadow CSS Generator by WebbizID (@De-Orchids) on CodePen.

HTML

HTML
<!DOCTYPE html>
<html>
<head>
  <title>Box Shadows CSS Generator</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>Box Shadows CSS Generator</h1>
  
  <div id="box"></div>
  
  <form>
    <label for="horizontal">Horizontal Offset:</label>
    <input type="range" id="horizontal" min="-50" max="50" step="1">
    
    <label for="vertical">Vertical Offset:</label>
    <input type="range" id="vertical" min="-50" max="50" step="1">
    
    <label for="blur">Blur Radius:</label>
    <input type="range" id="blur" min="0" max="50" step="1">
    
    <label for="spread">Spread Radius:</label>
    <input type="range" id="spread" min="0" max="50" step="1">
    
    <label for="color">Shadow Color:</label>
    <input type="color" id="color">
  </form>
  
  <textarea id="output" readonly></textarea>
  
  <script src="script.js"></script>
</body>
</html>
HTML

CSS

Buat file dengan nama style.css dan masukkan css dibawah

CSS
body {
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  margin-top: 50px;
}

#box {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background-color: red;
  box-shadow: 0px 0px 0px 0px #000000;
}

form {
  margin-top: 50px;
}

label {
  display: block;
  margin-bottom: 10px;
}

input[type="range"] {
  width: 200px;
}

textarea {
  width: 400px;
  height: 100px;
  margin: 50px auto;
}
CSS

JavaScript

Buat file dengan nama script.js kemudian masukkan code dibawah

JavaScript
window.addEventListener('DOMContentLoaded', function() {
  var box = document.getElementById('box');
  var horizontal = document.getElementById('horizontal');
  var vertical = document.getElementById('vertical');
  var blur = document.getElementById('blur');
  var spread = document.getElementById('spread');
  var color = document.getElementById('color');
  var output = document.getElementById('output');
  
  function updateBoxShadow() {
    var h = horizontal.value + 'px';
    var v = vertical.value + 'px';
    var b = blur.value + 'px';
    var s = spread.value + 'px';
    var c = color.value;
    
    var boxShadow = h + ' ' + v + ' ' + b + ' ' + s + ' ' + c;
    box.style.boxShadow = boxShadow;
    
    output.value = 'box-shadow: ' + boxShadow + ';';
  }
  
  horizontal.addEventListener('input', updateBoxShadow);
  vertical.addEventListener('input', updateBoxShadow);
  blur.addEventListener('input', updateBoxShadow);
  spread.addEventListener('input', updateBoxShadow);
  color.addEventListener('input', updateBoxShadow);
});
JavaScript

Dengan menggunakan kode di atas, Anda dapat membuat aplikasi Box Shadows CSS Generator yang interaktif dan mudah digunakan. Pengguna dapat mengatur offset horizontal, offset vertikal, blur radius, spread radius, dan warna bayangan menggunakan elemen input yang disediakan. Setiap kali pengguna mengubah nilai input, fungsi updateBoxShadow akan dipanggil untuk memperbarui tampilan kotak dan output CSS.

Semoga contoh kode di atas bermanfaat bagi Anda dalam membuat aplikasi Box Shadow CSS Generator menggunakan JavaScript.

Artikel Terbaru ⭐