From c9af41bfed078c65a53ca55a623dff18a2a78051 Mon Sep 17 00:00:00 2001
From: Atif Murtaza Mahmud <atifmahmud95@gmail.com>
Date: Wed, 4 Dec 2024 16:46:24 -0800
Subject: [PATCH] Table size and companies array

---
 index.html                |  2 +-
 scripts/data/companies.js | 65 +++++++++++++++++++++++++++++++++++++++
 scripts/script.js         | 48 ++---------------------------
 styles/styles.css         |  7 +++--
 4 files changed, 72 insertions(+), 50 deletions(-)
 create mode 100644 scripts/data/companies.js

diff --git a/index.html b/index.html
index 2d54d31..5986dd8 100644
--- a/index.html
+++ b/index.html
@@ -26,6 +26,6 @@ <h1>Company Directory</h1>
     </div>
   </main>
 
-  <script src="scripts/script.js"></script>
+  <script type="module" src="scripts/script.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/scripts/data/companies.js b/scripts/data/companies.js
new file mode 100644
index 0000000..b829ca2
--- /dev/null
+++ b/scripts/data/companies.js
@@ -0,0 +1,65 @@
+// Array of companies
+const companies = [
+    {
+      name: "TechCorp",
+      logo: "https://via.placeholder.com/100",
+      url: "https://techcorp.com",
+      tags: ["Tech", "Innovation"],
+    },
+    {
+      name: "FinanceHub",
+      logo: "https://via.placeholder.com/100",
+      url: "https://financehub.com",
+      tags: ["Finance", "Banking"],
+    },
+    {
+      name: "RetailWorld",
+      logo: "https://via.placeholder.com/100",
+      url: "https://retailworld.com",
+      tags: ["Retail", "E-commerce"],
+    },
+    {
+      name: "RetailWorld",
+      logo: "https://via.placeholder.com/100",
+      url: "https://retailworld.com",
+      tags: ["Retail", "E-commerce"],
+    },
+    {
+      name: "RetailWorld",
+      logo: "https://via.placeholder.com/100",
+      url: "https://retailworld.com",
+      tags: ["Retail", "E-commerce"],
+    },
+    {
+      name: "RetailWorld",
+      logo: "https://via.placeholder.com/100",
+      url: "https://retailworld.com",
+      tags: ["Retail", "E-commerce"],
+    },
+    {
+      name: "RetailWorld",
+      logo: "https://via.placeholder.com/100",
+      url: "https://retailworld.com",
+      tags: ["Retail", "E-commerce"],
+    },
+    {
+      name: "RetailWorld",
+      logo: "https://via.placeholder.com/100",
+      url: "https://retailworld.com",
+      tags: ["Retail", "E-commerce"],
+    },
+    {
+      name: "RetailWorld",
+      logo: "https://via.placeholder.com/100",
+      url: "https://retailworld.com",
+      tags: ["Retail", "E-commerce"],
+    },
+    {
+      name: "RetailWorld",
+      logo: "https://via.placeholder.com/100",
+      url: "https://retailworld.com",
+      tags: ["Retail", "E-commerce"],
+    },
+  ];
+
+  export default companies;
\ No newline at end of file
diff --git a/scripts/script.js b/scripts/script.js
index 77541b5..2e476bc 100644
--- a/scripts/script.js
+++ b/scripts/script.js
@@ -1,48 +1,4 @@
-// Array of companies
-const companies = [
-  {
-    name: "TechCorp",
-    logo: "https://via.placeholder.com/100",
-    url: "https://techcorp.com",
-    tags: ["Tech", "Innovation"],
-  },
-  {
-    name: "FinanceHub",
-    logo: "https://via.placeholder.com/100",
-    url: "https://financehub.com",
-    tags: ["Finance", "Banking"],
-  },
-  {
-    name: "RetailWorld",
-    logo: "https://via.placeholder.com/100",
-    url: "https://retailworld.com",
-    tags: ["Retail", "E-commerce"],
-  },
-  {
-    name: "RetailWorld",
-    logo: "https://via.placeholder.com/100",
-    url: "https://retailworld.com",
-    tags: ["Retail", "E-commerce"],
-  },
-  {
-    name: "RetailWorld",
-    logo: "https://via.placeholder.com/100",
-    url: "https://retailworld.com",
-    tags: ["Retail", "E-commerce"],
-  },
-  {
-    name: "RetailWorld",
-    logo: "https://via.placeholder.com/100",
-    url: "https://retailworld.com",
-    tags: ["Retail", "E-commerce"],
-  },
-  {
-    name: "RetailWorld",
-    logo: "https://via.placeholder.com/100",
-    url: "https://retailworld.com",
-    tags: ["Retail", "E-commerce"],
-  },
-];
+import companies from "./data/companies";
 
 // Function to create cards
 function createCompanyCards(companies) {
@@ -51,7 +7,7 @@ function createCompanyCards(companies) {
   companies.forEach((company) => {
     // Create column wrapper
     const col = document.createElement("div");
-    col.className = "col-lg-4"; // Flex column for 3-per-row layout
+    col.className = "col-lg-3"; // Flex column for 3-per-row layout
 
     // Create card container
     const card = document.createElement("div");
diff --git a/styles/styles.css b/styles/styles.css
index 9bdcd03..bc59601 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -14,9 +14,9 @@
 }
 
 /* Column behavior (e.g., col-lg-4) */
-.col-lg-4 {
-  flex: 0 0 33.333%; /* 3 columns per row */
-  max-width: 33.333%; /* Ensure max-width is the same */
+.col-lg-3 {
+  flex: 0 0 25%; /* 4 columns per row */
+  max-width: 25%; /* Ensure max-width is the same */
   padding-left: 15px;
   padding-right: 15px;
   box-sizing: border-box; /* Include padding in the box size */
@@ -33,6 +33,7 @@
   border: 1px solid #ddd;
   border-radius: 10px;
   padding: 20px;
+  margin: 15px;
   text-align: center;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   transition: transform 0.2s ease, box-shadow 0.2s ease;