[tw5] Pulling values from dictionary tiddler to use for CSS/HTML

I’m sure there is a better way to do this so I’m hoping someone can help me.

I have a journal tiddler that has a field called mood. I put a value from 1 to 5 to describe my mood for the day.

I have a dictionary tiddler that has a CSS class for each number. So, it would look something like this

1: bg-red
2: bg-orange
3: bg-yellow
4: bg-green
5: bg-blue

Now what I want to do is to create a bit of HTML that will dynamically build the css classes based on this setup. So, for example, if my mood was 2, it would build the html

I use this to display a little colored box when viewing the tiddler to show my mood for that day. I can get it to just include the “bg-orange” part, but as soon as I try to add any other class to the DIV, it doesn’t work. I get it either not being able to pull in the field value to grab data from the data tiddler, or it just prints out the wikitext as plain text, etc.

Can anyone think of a better way to do this?

Thanks.

Sorry to answer my own question but while playing around with this some more I came up with a solution.

I can just put the rest of the CSS classes in my dictionary tiddler. Now I can pull everything in and not have to concatenate things.

Data Tiddler:

1: bg-yellow w-10 h-10
2: bg-green w-10 h-10
3: …etc…

<$macrocall $name=“build-mood” color={{!!mood}} />

This pulls in the mood number from the current tiddler and sends it off to the macro.

In the macro tiddler I have this:

\define build-mood(color)
<$set name=“colorClass” value={{MoodColors##$color$}}>

<div class=<> >Mood

\end

That pulls in the class from the correct ‘mood’ lookup in the dictionary tiddler and builds the HTML appropriately.

Maybe not the best solution, but it does work.