Nicer and colourful bubbles for tags

atifmmahmud · Dec 5, 2024 · c2e8204 · c2e8204
1 parent 0305cb1
commit c2e8204
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 5 deletions.
diff --git a/scripts/script.js b/scripts/script.js
@@ -15,13 +15,13 @@ const companies = [
     name: "RetailWorld",
     logo: "https://via.placeholder.com/100",
     url: "https://retailworld.com",
-    tags: ["Retail", "E-commerce"],
+    tags: ["Retail", "Finance"],
   },
   {
     name: "RetailWorld",
     logo: "https://via.placeholder.com/100",
     url: "https://retailworld.com",
-    tags: ["Retail", "E-commerce"],
+    tags: ["Retail", "Tech"],
   },
   {
     name: "RetailWorld",
@@ -57,7 +57,7 @@ const companies = [
     name: "RetailWorld",
     logo: "https://via.placeholder.com/100",
     url: "https://retailworld.com",
-    tags: ["Retail", "E-commerce"],
+    tags: ["Retail", "E-commerce", "Test", "Potato", "Tomate"],
   },
 ];
 
@@ -86,17 +86,18 @@ function createCompanyCards(companies) {
     card.appendChild(name);
 
     // Add link
+    const linkDiv = document.createElement("div");
     const link = document.createElement("a");
     link.href = company.url;
     link.target = "_blank";
     link.textContent = "Visit Website";
-    card.appendChild(link);
+    linkDiv.appendChild(link);
 
     // Add tags
     company.tags.forEach((tag) => {
       const tagBubble = document.createElement("span");
       tagBubble.textContent = tag;
-      tagBubble.className = "tag-bubble";
+      tagBubble.className = `tag ${tag.toLowerCase()}`; // Dynamic class based on tag
       card.appendChild(tagBubble);
     });
 

diff --git a/styles/styles.css b/styles/styles.css
@@ -76,4 +76,35 @@
   border-radius: 15px;
   font-size: 0.8em;
   margin-top: 10px;
+  margin-right: 2px;
+}
+
+.tag {
+  display: inline-block;
+  background-color: #007bff;
+  color: white;
+  padding: 5px 10px;
+  border-radius: 15px;
+  font-size: 0.8em;
+  margin-top: 10px;
+  margin-right: 2px;
+}
+
+/* Specific styling for "tech" tags */
+.tag.tech {
+  background-color: #4CAF50; /* Green for tech */
+}
+
+/* Specific styling for "finance" tags */
+.tag.finance {
+  background-color: #f44336; /* Red for finance */
+}
+
+/* Specific styling for "retail" tags */
+.tag.retail {
+  background-color: #2196F3; /* Blue for retail */
+}
+
+.other {
+  background-color: #607D8B; /* Gray for others */
 }