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
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:
<!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>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 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;
}Berikut adalah kode 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};`;
});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
Leave a Reply