Table size and companies array

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>

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;

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");

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;