Aplikasi Generator Gradient CSS dengan JavaScript

Aplikasi Generator Gradient CSS dengan JavaScript

—

by

Webbiz.ID
in ,

Dalam tutorial ini, kita akan membuat sebuah aplikasi generator gradient CSS sederhana menggunakan JavaScript. Aplikasi ini akan memungkinkan pengguna untuk menginput beberapa warna dan menghasilkan kode CSS gradient yang bisa langsung disalin oleh pengguna.

Generator Gradient CSS

Generator Gradient CSS

Sebelum memulai, pastikan Anda memiliki pengetahuan dasar tentang HTML, CSS, dan JavaScript. Selain itu, kita akan menggunakan Bootstrap untuk mempercantik tampilan aplikasi. Pastikan Anda telah mengunduh dan menyertakan file Bootstrap CSS dan JavaScript dalam proyek Anda.

Struktur HTML

Berikut adalah struktur dasar HTML untuk aplikasi kita:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Generator Gradient CSS</title>
  <link rel="stylesheet" href="path/to/bootstrap.css">
  <style>
    /* CSS untuk tampilan aplikasi */
  </style>
</head>
<body>
  <div class="container">
    <h1>Generator Gradient CSS</h1>
    <div class="form-group">
      <label for="color-input">Masukkan Warna:</label>
      <input type="color" id="color-input" class="form-control">
      <button id="add-color-btn" class="btn btn-primary">Tambah Warna</button>
    </div>
    <div id="color-list" class="mt-4">
      <!-- Daftar warna akan ditampilkan di sini -->
    </div>
    <div class="mt-4">
      <button id="generate-btn" class="btn btn-success">Generate Gradient</button>
    </div>
    <div id="gradient-preview" class="mt-4">
      <!-- Preview gradient akan ditampilkan di sini -->
    </div>
    <div id="output-code" class="mt-4">
      <!-- Kode CSS gradient akan ditampilkan di sini -->
    </div>
  </div>

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

CSS dan JavaScript

Tambahkan kode CSS dan JavaScript di dalam tag <style> dan <script> pada file HTML Anda. Kode CSS akan digunakan untuk mengatur tampilan aplikasi, sedangkan kode JavaScript akan digunakan untuk mengatur logika aplikasi.

Berikut adalah contoh kode CSS:

CSS
/* CSS untuk tampilan aplikasi */
.container {
  max-width: 600px;
  margin: 0 auto;
}

.form-group {
  display: flex;
  align-items: center;
}

#color-list {
  display: flex;
  flex-wrap: wrap;
}

.color-item {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 50%;
}

#gradient-preview {
  width: 200px;
  height: 200px;
  border-radius: 10px;
}

#output-code {
  white-space: pre;
  font-family: monospace;
  background-color: #f8f9fa;
  padding: 10px;
}
CSS

Berikut adalah kode JavaScript:

JavaScript
// JavaScript untuk logika aplikasi
const colorInput = document.getElementById('color-input');
const addColorBtn = document.getElementById('add-color-btn');
const colorList = document.getElementById('color-list');
const generateBtn = document.getElementById('generate-btn');
const gradientPreview = document.getElementById('gradient-preview');
const outputCode = document.getElementById('output-code');

const colors = [];

addColorBtn.addEventListener('click', () => {
  const color = colorInput.value;
  colors.push(color);
  const colorItem = document.createElement('div');
  colorItem.style.backgroundColor = color;
  colorItem.classList.add('color-item');
  colorList.appendChild(colorItem);
});

generateBtn.addEventListener('click', () => {
  const gradient = `linear-gradient(to right, ${colors.join(', ')})`;
  gradientPreview.style.background = gradient;
  outputCode.textContent = `background: ${gradient};`;
});
JavaScript

Penjelasan Singkat

  • Aplikasi ini menggunakan Bootstrap untuk tampilan yang lebih menarik.
  • Pengguna dapat memasukkan warna menggunakan input color dan menambahkannya dengan mengklik tombol “Tambah Warna“.
  • Daftar warna yang telah ditambahkan akan ditampilkan di bawah input color.
  • Ketika pengguna mengklik tombol “Generate Gradient“, aplikasi akan menghasilkan preview gradient dan kode CSS gradient yang bisa langsung disalin oleh pengguna.

Kesimpulan

Dalam tutorial ini, kita telah membuat sebuah aplikasi generator gradient CSS sederhana menggunakan JavaScript. Aplikasi ini memungkinkan pengguna untuk menginput beberapa warna dan menghasilkan kode CSS gradient yang bisa langsung disalin oleh pengguna. Dengan me

Artikel Terbaru ⭐