From 5cd265d5be57566627914afed1daeb1e28dbf694 Mon Sep 17 00:00:00 2001
From: Hadi sopandi <92625676+Pandi20@users.noreply.github.com>
Date: Fri, 31 May 2024 21:56:52 +0700
Subject: [PATCH] ADD: prototype
---
index.css | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
index.html | 27 ++++++++++++++++++++++++
index.js | 33 ++++++++++++++++++++++++++++++
3 files changed, 120 insertions(+)
create mode 100644 index.css
create mode 100644 index.html
create mode 100644 index.js
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..8956b69
--- /dev/null
+++ b/index.css
@@ -0,0 +1,60 @@
+body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: #f5f5f5;
+ color: #333;
+}
+
+header {
+ background-color: #4CAF50;
+ color: white;
+ padding: 20px;
+ text-align: center;
+}
+
+.search-container {
+ text-align: center;
+ margin: 20px;
+}
+
+.search-container input {
+ width: 80%;
+ padding: 10px;
+ font-size: 16px;
+}
+
+.product-list {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+.product-item {
+ background-color: white;
+ border: 1px solid #ddd;
+ margin: 10px;
+ padding: 20px;
+ width: calc(33% - 40px);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ transition: transform 0.2s;
+}
+
+.product-item:hover {
+ transform: scale(1.05);
+}
+
+.product-item img {
+ max-width: 100%;
+ height: auto;
+}
+
+footer {
+ background-color: #4CAF50;
+ color: white;
+ text-align: center;
+ padding: 10px 0;
+ position: fixed;
+ width: 100%;
+ bottom: 0;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..995371a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+ AlatPraktisID
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..439ec31
--- /dev/null
+++ b/index.js
@@ -0,0 +1,33 @@
+const products = [
+ { name: 'Portable Blender', image: 'images/blender.jpg', link: '#', description: 'Perfect for smoothies on the go.' },
+ { name: 'Wireless Earbuds', image: 'images/earbuds.jpg', link: '#', description: 'Experience music wirelessly.' },
+ { name: 'Smart Watch', image: 'images/smartwatch.jpg', link: '#', description: 'Track your fitness and notifications.' },
+ { name: 'Electric Screwdriver', image: 'images/screwdriver.jpg', link: '#', description: 'Handy tool for DIY projects.' },
+ { name: 'Portable Charger', image: 'images/charger.jpg', link: '#', description: 'Keep your devices charged on the go.' }
+];
+
+function displayProducts(filteredProducts) {
+ const productList = document.getElementById('productList');
+ productList.innerHTML = '';
+
+ filteredProducts.forEach(product => {
+ const productItem = document.createElement('div');
+ productItem.className = 'product-item';
+ productItem.innerHTML = `
+ 
+ ${product.name}
+ ${product.description}
+ Buy Now
+ `;
+ productList.appendChild(productItem);
+ });
+}
+
+function searchProducts() {
+ const query = document.getElementById('searchInput').value.toLowerCase();
+ const filteredProducts = products.filter(product => product.name.toLowerCase().includes(query));
+ displayProducts(filteredProducts);
+}
+
+// Initial display of all products
+displayProducts(products);