diff --git a/scripts/script.js b/scripts/script.js index df03e4b..8cd407a 100644 --- 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 index bc59601..f245e63 100644 --- 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 */ } \ No newline at end of file