Cara membuat konverter mata uang menggunakan Bootstrap, TailwindCSS & JavaScript
Minggu, 11 Agustus 2024
Proyek ini bertujuan untuk membuat aplikasi Konverter Mata Uang sederhana yang memungkinkan pengguna mengonversi sejumlah uang dari satu mata uang ke mata uang lainnya. Aplikasi ini menggunakan Bootstrap 5 untuk gaya dasar, TailwindCSS untuk gaya tambahan, dan JavaScript untuk logika konversi mata uang menggunakan API eksternal.
Dalam posting blog ini, saya akan memandu Anda membuat aplikasi konverter mata uang responsif menggunakan Bootstrap, TailwindCSS, dan JavaScript. Kami akan mereplikasi fitur inti aplikasi konverter mata uang, termasuk memasukkan jumlah dan pilihan mata uang, menampilkan hasil konversi, dan mengintegrasikan API untuk mendapatkan nilai tukar mata uang terkini. Selain itu, kami akan memastikan aplikasi responsif dan mudah digunakan di berbagai perangkat, sekaligus mempertahankan desain modern dengan opsi penyesuaian menggunakan TailwindCSS.
Saat mengerjakan proyek ini, Anda akan mempelajari cara menyusun dan menata situs web secara efektif untuk memastikan situs web tampak hebat di semua perangkat.
Fitur Utama:
- Jumlah Input dan Pemilihan Mata Uang: Pengguna dapat memasukkan jumlah dan memilih mata uang sumber dan tujuan dari daftar dropdown.
- Konversi Mata Uang Real-Time: Aplikasi ini menggunakan API eksternal untuk menghitung nilai tukar mata uang terkini dan menampilkan hasil konversi secara real-time.
- Responsif dan Fleksibel: Dengan Bootstrap, aplikasi ini secara otomatis menyesuaikan tata letak untuk berbagai ukuran layar, memastikan pengalaman pengguna yang optimal pada perangkat seluler dan desktop.
- Kustomisasi Desain dengan TailwindCSS: Aplikasi ini menggunakan TailwindCSS untuk memberikan fleksibilitas dalam kustomisasi desain, yang memungkinkan pengembang untuk dengan mudah menambahkan gaya sesuai kebutuhan.
- Navigasi Sederhana dan Mudah Digunakan: Antarmuka sederhana dengan elemen navigasi intuitif, sehingga pengguna dapat dengan mudah memasukkan data dan mendapatkan hasil konversi.
Dengan fitur-fitur ini, konverter mata uang Anda akan memiliki fungsionalitas lengkap dan desain yang menarik, membuatnya tidak hanya berguna tetapi juga menyenangkan untuk digunakan.
Mengapa membuat konverter mata uang di Bootstrap, TailwindCSS & JavaScript?
- Bootstrap: Pelajari cara menggunakan komponen Bootstrap dan sistem grid untuk membuat tata letak responsif dengan cepat.
- TailwindCSS: Kuasai teknik CSS yang mengutamakan utilitas untuk menyesuaikan desain tanpa menulis banyak kode CSS tambahan.
- JavaScript: Pelajari cara membuat aplikasi dinamis dengan JavaScript, termasuk mengambil data dari API eksternal untuk melakukan konversi mata uang secara real-time.
- Pengembangan Aplikasi Responsif: Pahami cara menggabungkan Bootstrap dan Tailwind untuk menciptakan pengalaman pengguna yang responsif dan optimal di seluruh perangkat.
- Interaksi API: Integrasikan API eksternal untuk mendapatkan data nilai tukar mata uang dan perbarui antarmuka secara dinamis berdasarkan masukan pengguna.
Dengan membangun proyek konverter mata uang ini menggunakan Bootstrap, TailwindCSS, dan JavaScript, Anda dapat memperoleh keterampilan berikut:
Proyek ini akan memberikan dasar yang kuat dalam desain web responsif dan pengembangan front-end, yang akan membuka jalan bagi proyek web yang lebih kompleks di masa mendatang. Semoga berhasil dan semoga keterampilan yang Anda peroleh berguna dalam mengembangkan proyek di masa mendatang!
Langkah-langkah membuat konverter mata uang menggunakan Bootstrap, TailwindCSS & JavaScript
- Buat Folder Proyek: Buat folder baru untuk proyek Anda, misalnya currency-converter.
- Buat File HTML: Di dalam folder proyek, buat file HTML, misalnya index.html.
- Buat File JavaScript: Di dalam folder proyek yang sama, buat file JavaScript, misalnya script.js.
- Buat File CSS (Opsional): Jika Anda ingin menambahkan CSS tambahan, buat file CSS, misalnya styles.css.
Berikut langkah-langkah terperinci untuk membuat konverter mata uang menggunakan Bootstrap, TailwindCSS, dan JavaScript:
1. Siapkan Struktur Proyek
2. Tulis Kode HTML
Tambahkan kode HTML berikut ke index.html.
<!DOCTYPE html>
<!-- Coding By CodingIndo - https://codingindo.vercel.app/ -->
<html lang="en">
<head>
<!-- Meta tag for character encoding -->
<meta charset="UTF-8">
<!-- Meta tag for setting the viewport to be responsive on mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Page title -->
<title>Currency Converter</title>
<!-- Link to CSS file for styling -->
<link rel="stylesheet" href="style.css">
<!-- Bootstrap CSS link for styling -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- TailwindCSS link for styling -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-50">
<div class="container mt-5">
<div class="card shadow p-5 rounded-xl border-0">
<!-- Application title -->
<h2 class="text-center mb-5 text-3xl font-extrabold text-gray-800">Currency Converter</h2>
<!-- Form for currency conversion -->
<form id="converter-form">
<div class="mb-4">
<!-- Labels and input for money amounts -->
<label for="amount" class="form-label text-gray-700 font-medium">Amount</label>
<input type="number" class="form-control rounded-lg border-gray-300 focus:ring-2 focus:ring-blue-500" id="amount" placeholder="Enter amount" required>
</div>
<div class="mb-4">
<!-- Label and select for the source currency -->
<label for="from-currency" class="form-label text-gray-700 font-medium">From</label>
<select class="form-select rounded-lg border-gray-300 focus:ring-2 focus:ring-blue-500" id="from-currency">
<option value="USD" selected>USD - United States Dollar</option>
<option value="EUR">EUR - Euro (European Union)</option>
<option value="GBP">GBP - British Pound (United Kingdom)</option>
<option value="IDR">IDR - Indonesian Rupiah (Indonesia)</option>
<option value="JPY">JPY - Japanese Yen (Japan)</option>
<option value="AUD">AUD - Australian Dollar (Australia)</option>
<option value="CAD">CAD - Canadian Dollar (Canada)</option>
<option value="CHF">CHF - Swiss Franc (Switzerland)</option>
<option value="CNY">CNY - Chinese Yuan (China)</option>
</select>
</div>
<div class="mb-4">
<!-- Label and select for destination currency -->
<label for="to-currency" class="form-label text-gray-700 font-medium">To</label>
<select class="form-select rounded-lg border-gray-300 focus:ring-2 focus:ring-blue-500" id="to-currency">
<option value="USD">USD - United States Dollar</option>
<option value="EUR">EUR - Euro (European Union)</option>
<option value="GBP">GBP - British Pound (United Kingdom)</option>
<option value="IDR">IDR - Indonesian Rupiah (Indonesia)</option>
<option value="JPY">JPY - Japanese Yen (Japan)</option>
<option value="AUD">AUD - Australian Dollar (Australia)</option>
<option value="CAD">CAD - Canadian Dollar (Canada)</option>
<option value="CHF">CHF - Swiss Franc (Switzerland)</option>
<option value="CNY">CNY - Chinese Yuan (China)</option>
</select>
</div>
<div class="text-center">
<!-- Button to perform conversion -->
<button type="submit" class="btn btn-primary btn-lg px-5 py-3 shadow-lg hover:shadow-xl rounded-full bg-blue-600 hover:bg-blue-700 transition-transform transform hover:-translate-y-1">Convert</button>
</div>
</form>
<!-- Div to display conversion results -->
<div id="result" class="text-center mt-4 text-gray-800 text-xl font-bold"></div>
</div>
</div>
<!-- JavaScript file link for functionality -->
<script src="script.js"></script>
<!-- Bootstrap JavaScript link for functionality -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Penjelasan
| Nomor | Baris Kode | Penjelasan |
|---|
3. Tambahkan Gaya Tambahan (Opsional)
Jika Anda ingin menambahkan gaya tambahan dengan Tailwind CSS, Anda dapat menambahkan kelas Tailwind CSS ke elemen HTML di index.html. Anda juga dapat menambahkan gaya khusus di styles.css jika diperlukan.
/* Sets the font for the body element */
body {
font-family: 'Inter', sans-serif;
}
/* Sets the background and border radius for elements with class card */
.card {
background-color: #f8f9fa;
border-radius: 1rem;
}
/* Set the background, border, and transition for elements with the form-control and form-select classes */
.form-control,
.form-select {
background-color: #f1f5f9;
border: 1px solid #cbd5e1;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Sets the border and box-shadow when an element with the class form-control and form-select is in focus */
.form-control:focus,
.form-select:focus {
border-color: #6366f1;
box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25);
}
/* Sets the font size for elements with class btn */
.btn {
font-size: 1.125rem;
}
/* Sets the maximum width and margin for the element with the id converter-form */
#converter-form {
max-width: 500px;
margin: 0 auto;
}
Penjelasan
| Nomor | Baris Kode | Penjelasan |
|---|
4. Tulis Kode JavaScript
Tambahkan kode JavaScript berikut ke "script.js":
document.getElementById('converter-form').addEventListener('submit', function(e) {
e.preventDefault(); // Prevent form from default submit
const amount = document.getElementById('amount').value; // Get the amount value from input
const fromCurrency = document.getElementById('from-currency').value; // Get the source currency value from the input
const toCurrency = document.getElementById('to-currency').value; // Get the target currency value from the input
// Store the currency exchange rate in an object
const exchangeRates = {
USD: { USD: 1, EUR: 0.85, GBP: 0.75, IDR: 14500, JPY: 110, AUD: 1.35, CAD: 1.25, CHF: 0.92, CNY: 6.45 },
EUR: { USD: 1.18, EUR: 1, GBP: 0.88, IDR: 17000, JPY: 129, AUD: 1.59, CAD: 1.47, CHF: 1.08, CNY: 7.58 },
GBP: { USD: 1.34, EUR: 1.14, GBP: 1, IDR: 19500, JPY: 146, AUD: 1.81, CAD: 1.67, CHF: 1.22, CNY: 8.62 },
IDR: { USD: 0.000069, EUR: 0.000059, GBP: 0.000051, IDR: 1, JPY: 0.0075, AUD: 0.000077, CAD: 0.000073, CHF: 0.000062, CNY: 0.00053 },
JPY: { USD: 0.0091, EUR: 0.0077, GBP: 0.0068, IDR: 133.33, JPY: 1, AUD: 0.012, CAD: 0.011, CHF: 0.0084, CNY: 0.059 },
AUD: { USD: 0.74, EUR: 0.63, GBP: 0.55, IDR: 10667, JPY: 83.33, AUD: 1, CAD: 0.93, CHF: 0.69, CNY: 4.8 },
CAD: { USD: 0.8, EUR: 0.68, GBP: 0.6, IDR: 11467, JPY: 90.91, AUD: 1.08, CAD: 1, CHF: 0.74, CNY: 5.16 },
CHF: { USD: 1.09, EUR: 0.92, GBP: 0.82, IDR: 15417, JPY: 119.05, AUD: 1.45, CAD: 1.36, CHF: 1, CNY: 6.97 },
CNY: { USD: 0.16, EUR: 0.13, GBP: 0.12, IDR: 1546.15, JPY: 16.95, AUD: 0.21, CAD: 0.19, CHF: 0.14, CNY: 1 },
};
// Calculate currency conversion results
const result = (amount * exchangeRates[fromCurrency][toCurrency]).toFixed(2);
// Display the conversion result into an element with the id 'result'
document.getElementById('result').innerHTML = `
${amount} ${fromCurrency} = ${result} ${toCurrency}
`;
});
Penjelasan
| Nomor | Baris Kode | Penjelasan |
|---|
- Buka index.html di Browser: Anda dapat membuka file HTML di browser untuk melihat seperti apa tampilan konverter mata uang.
- Masukkan Data: Coba masukkan jumlah, pilih mata uang sumber dan tujuan, lalu klik tombol "Konversi" untuk melihat hasil konversi.
5. Jalankan Proyek Anda
- API Nilai Tukar Mata Uang: Kode ini menggunakan API Nilai Tukar untuk mendapatkan data nilai tukar. Anda mungkin perlu mendaftar untuk mendapatkan kunci API jika menggunakan layanan lain.
- Penanganan Kesalahan: Pastikan untuk menangani kemungkinan kesalahan dengan benar, seperti tidak ada koneksi internet atau data tidak valid.
Catatan Tambahan
Dengan memperhatikan catatan tambahan ini, Anda dapat memastikan bahwa konverter mata uang Anda tidak hanya berfungsi dengan baik tetapi juga mudah digunakan, mudah diakses, dan aman.
Kesimpulan dan kata-kata terakhir
Membuat konverter mata uang menggunakan Bootstrap, TailwindCSS, dan JavaScript merupakan pendekatan yang efektif dan efisien untuk membangun aplikasi yang fungsional dan responsif. Bootstrap menyediakan komponen UI yang telah dibuat sebelumnya yang mempercepat pengembangan, TailwindCSS menyediakan fleksibilitas untuk menyesuaikan desain tanpa harus menulis CSS secara manual, dan JavaScript bertindak sebagai mesin yang menggerakkan logika konversi mata uang dan integrasi API. Kombinasi ketiga teknologi ini membantu Anda membangun aplikasi yang tampak modern dan berkinerja tinggi dengan cepat.
Dengan mengikuti langkah-langkah ini, Anda dapat membuat aplikasi konverter mata uang yang responsif, fleksibel, dan mudah dirawat. Aplikasi ini tidak hanya menyediakan pengalaman pengguna yang intuitif tetapi juga memungkinkan Anda untuk memperluas fungsinya di masa mendatang. Kombinasi Bootstrap, TailwindCSS, dan JavaScript merupakan pilihan yang tepat untuk membuat aplikasi web yang cepat, elegan, dan interaktif.
Jika Anda ingin menambahkan lebih banyak fitur, seperti menyimpan hasil konversi atau mengintegrasikan lebih banyak mata uang, proyek ini menyediakan fondasi yang kokoh untuk dikembangkan. Selamat membuat kode!
Jika Anda mengalami kesulitan membuat konverter mata uang menggunakan Bootstrap, TailwindCSS, dan JavaScript, Anda dapat mengunduh kode sumber proyek ini secara gratis dengan mengeklik tombol "Unduh". Anda juga dapat melihat demo langsung konverter mata uang ini dengan mengeklik tombol "Lihat Langsung" untuk melihat bagaimana desain dan fungsionalitas aplikasi bekerja dalam praktiknya.
Dengan mengakses kode sumber dan demo langsung, Anda dapat dengan mudah memahami implementasi kode dan menyesuaikan proyek sesuai dengan kebutuhan Anda. Jangan ragu untuk menjelajahi kode, bereksperimen dengan gaya, dan memodifikasi fitur untuk meningkatkan keterampilan Anda dalam HTML, CSS, dan JavaScript.
Ini adalah kesempatan yang bagus untuk mempelajari lebih lanjut tentang cara mengintegrasikan kerangka kerja CSS dengan JavaScript dan memperdalam pemahaman Anda tentang desain web responsif. Selamat belajar dan bereksperimen!
TINGGALKAN BALASAN