Front End Mentor Notification Page

I used an empty variable as a placeholder in the p and span tag. Assigning a value to this variable placeholder allowed me display and hide styles. These assignments were contingent on certain conditions. Really appreciated the flexibility.

Example code is below.

colorChessClub = message.activity === "Chess Club" ? "blue" : ""

showCommentedPicture = message.commentpicture === "" ? "dontshow" : ""

list += `

<div class=" ${newMessageClass} msglayout">

   <img src=${message.avatar} alt="image of ${message.person}">
   <p data-id="${message.id}">
           <span class="namestyling">${message.person}</span>  
           <span class="actionstyling" >${message.action}</span>  
           <span class="activitystyling ${colorChessClub}">${message.activity}</span> 
           <i class="${redDot} fa fa-solid fa-circle fa-sm" style="color: #ff1100;font-size:8px;"></i>