Update script.js

script.js

@@ -1,13 +1,21 @@
-document.getElementById('currencyForm').addEventListener('submit', async function (event) {
-  event.preventDefault();
+// Ambil elemen
+const amountInput = document.getElementById('amount');
+const fromCurrency = document.getElementById('fromCurrency');
+const toCurrency = document.getElementById('toCurrency');
+const resultDiv = document.getElementById('result');
+const convertButton = document.createElement('button');
+convertButton.textContent = 'Convert';
+convertButton.type = 'button';
+convertButton.id = 'convertButton';
+document.getElementById('currencyForm').appendChild(convertButton);
 
-  // Ambil nilai input dari user
-  const amount = document.getElementById('amount').value;
-  const fromCurrency = document.getElementById('fromCurrency').value;
-  const toCurrency = document.getElementById('toCurrency').value;
-  const resultDiv = document.getElementById('result');
+// Tombol tampil secara default
+let isInitialConversion = true;
 
-  // Validasi jumlah yang dimasukkan
+async function convertCurrency() {
+  const amount = amountInput.value;
+
+  // Validasi input jumlah
   if (!amount || amount <= 0) {
     resultDiv.innerHTML = "Please enter a valid amount!";
     return;
@@ -15,64 +23,64 @@ document.getElementById('currencyForm').addEventListener('submit', async functio
 
   try {
     const apiKey = '3ebe2ccf9eeea2aaef280201'; // API Key
-    const url = `https://v6.exchangerate-api.com/v6/${apiKey}/latest/${fromCurrency}`;
+    const url = `https://v6.exchangerate-api.com/v6/${apiKey}/latest/${fromCurrency.value}`;
 
-    // Mengambil data dari API
+    // Ambil data dari API
     const response = await fetch(url);
     const data = await response.json();
 
-    // Menangani respon API yang error
+    // Tangani error API
     if (data.result === 'error') {
       resultDiv.innerHTML = `Error: ${data['error-type']}`;
     } else {
-      // Menyusun nilai konversi dan menampilkannya
-      const rate = data.conversion_rates[toCurrency];
+      const rate = data.conversion_rates[toCurrency.value];
       const convertedAmount = (amount * rate).toFixed(2);
-      resultDiv.innerHTML = `${amount} ${fromCurrency} = ${convertedAmount} ${toCurrency}`;
+      resultDiv.innerHTML = `${amount} ${fromCurrency.value} = ${convertedAmount} ${toCurrency.value}`;
+
+      // Sembunyikan tombol setelah konversi pertama
+      if (isInitialConversion) {
+        convertButton.style.display = 'none';
+        isInitialConversion = false;
+      }
     }
   } catch (error) {
     resultDiv.innerHTML = "Error fetching conversion rate.";
-    console.error("Error:", error); // Menampilkan error di konsol
+    console.error("Error:", error);
   }
-});
+}
 
-// Logika untuk tombol Swap
-document.getElementById('swapButton').addEventListener('click', async function () {
-  const fromCurrency = document.getElementById('fromCurrency');
-  const toCurrency = document.getElementById('toCurrency');
-  const resultDiv = document.getElementById('result');
-
-  // Tukar nilai antara "From" dan "To"
+// Fungsi Swap
+document.getElementById('swapButton').addEventListener('click', function () {
   const tempCurrency = fromCurrency.value;
   fromCurrency.value = toCurrency.value;
   toCurrency.value = tempCurrency;
 
-  // Ambil nilai input amount
-  const amount = document.getElementById('amount').value;
-
-  // Jika ada jumlah yang dimasukkan, langsung lakukan konversi ulang
-  if (amount && amount > 0) {
-    try {
-      const apiKey = '3ebe2ccf9eeea2aaef280201'; // API Key
-      const url = `https://v6.exchangerate-api.com/v6/${apiKey}/latest/${fromCurrency.value}`;
+  if (amountInput.value && amountInput.value > 0) {
+    convertCurrency(); // Konversi ulang setelah swap
+  }
+});
 
-      // Mengambil data dari API
-      const response = await fetch(url);
-      const data = await response.json();
+// Event untuk tombol Convert (klik tombol manual)
+convertButton.addEventListener('click', function () {
+  convertCurrency();
+});
 
-      if (data.result === 'error') {
-        resultDiv.innerHTML = `Error: ${data['error-type']}`;
-      } else {
-        const rate = data.conversion_rates[toCurrency.value];
-        const convertedAmount = (amount * rate).toFixed(2);
-        resultDiv.innerHTML = `${amount} ${fromCurrency.value} = ${convertedAmount} ${toCurrency.value}`;
-      }
-    } catch (error) {
-      resultDiv.innerHTML = "Error fetching conversion rate.";
-      console.error("Error:", error);
-    }
-  } else {
-    // Jika tidak ada amount, hapus hasil konversi
-    resultDiv.innerHTML = "";
+// Event otomatis konversi setelah jumlah diisi
+amountInput.addEventListener('input', function () {
+  if (!isInitialConversion) {
+    convertCurrency(); // Konversi otomatis
   }
 });
+
+// Event tampilkan tombol jika mata uang diubah
+fromCurrency.addEventListener('change', function () {
+  convertButton.style.display = 'block'; // Tampilkan tombol
+  isInitialConversion = true; // Reset status awal
+  resultDiv.innerHTML = ""; // Reset hasil
+});
+
+toCurrency.addEventListener('change', function () {
+  convertButton.style.display = 'block'; // Tampilkan tombol
+  isInitialConversion = true; // Reset status awal
+  resultDiv.innerHTML = ""; // Reset hasil
+});