test

tugas/javascriptngelu.js

@@ -0,0 +1,62 @@
+let cart = [];
+
+const cartItemsContainer = document.getElementById('cart-items');
+const cartTotalElement = document.getElementById('cart-total');
+const emptyCartMsg = document.getElementById('empty-cart-msg');
+const addButtons = document.querySelectorAll('.add-to-cart-btn');
+
+
+addButtons.forEach(button => {
+  button.addEventListener('click', function() {
+    const name = this.getAttribute('data-name');
+    const price = parseFloat(this.getAttribute('data-price'));
+    
+    cart.push({ name, price });
+    renderCart();
+  });
+});
+
+
+cartItemsContainer.addEventListener('click', function () {
+  if (event.target.matches('.remove-btn') || event.target.closest('.remove-btn')) {
+    const itemIndex = event.target.getAttribute('data-index');
+    cart.splice(itemIndex, 1);
+    renderCart();
+  }
+});
+
+
+function renderCart() {
+  cartItemsContainer.innerHTML = '';
+  
+  let total = 0;
+
+  if (cart.length === 0) {
+    emptyCartMsg.style.display = 'block';
+  } else {
+    emptyCartMsg.style.display = 'none';
+    
+    cart.forEach((item, index) => {
+      total += item.price;
+
+      const li = document.createElement('li');
+      li.className = 'flex justify-between items-center bg-gray-50 p-2 rounded border';
+      
+      const span = document.createElement('span');
+      // Mengubah format harga menjadi style Rupiah (id-ID)
+      span.textContent = `${item.name} - Rp ${item.price.toLocaleString('id-ID')}`;
+      
+      const removeBtn = document.createElement('button');
+      removeBtn.textContent = 'Remove';
+      removeBtn.className = 'remove-btn bg-red-500 text-white px-2 py-1 rounded text-sm hover:bg-red-600';
+      removeBtn.setAttribute('data-index', index);
+      
+      li.appendChild(span);
+      li.appendChild(removeBtn);
+      cartItemsContainer.appendChild(li);
+    });
+  }
+
+
+  cartTotalElement.textContent = total.toLocaleString('id-ID');
+}