I'm currently working on a JavaScript task
My goal is to assign specific colors to different categories
For example: if category name = x then color = blue if category name = y then color = red ...
I attempted the following code, but it seems like I might be missing something:
categories.forEach(category => {
if (category.attributes.slug === "animation") {
cat.style.color = animColor;
}
if (category.attributes.slug === "decor") {
cat.style.color = decorColor;
}
if (category.attributes.slug === "illustrations") {
cat.style.color = illuColor;
}
if (category.attributes.slug === "developpement-visuel") {
cat.style.color = devVisuel;
}
if (category.attributes.slug === "realisations") {
cat.style.color = real;
}
if (category.attributes.slug === "croquis") {
cat.style.color = croquis;
}
});
<div>
<Header
categories={categories}
homepage={homepage} />
<div className="hidden md:block px-5 pt-10">
<a className="hover:no-underline " href="/">
<h3 className="text-xl uppercase tracking-widest mb-4">{homepage.attributes.hero.title}</h3>
</a>
<h5 className="text-sm mb-10">{homepage.attributes.bio.text}</h5>
<nav>
<ul>
{categories.map((category) => {
return (
<li key={category.id} className="mb-4">
<Link href={`/category/${category.attributes.slug}`}>
<a id="cat" className="uppercase font-light text-sm">{category.attributes.name}</a>
</Link>
</li>
)
})}
</ul>
</nav>
</div>
</div>
Any suggestions on how I can resolve this issue?