I was trying to toggle the classes which i've already done the css so the task will have diferrent color base on its type (business or personal). I try the code below but it seems to be incorrect. Someone please give me a solution, thank you!
index.ejs
<% tasksList.forEach(function(task){ %>
<div alt="You created this task at <%= task.time %>"
class="taskItem ${<%= task.status == true ? " active-task": "" %> } ${
<%=task.type== "personal" ? "PT-task" : "BT-task" %> }">
<div class="task-content" id="task-line">
<input class="check-btn ${<%=task.status==false ? " checked" : "" %>}"
type="checkbox"
onclick="" />
<%= task.title %>
</div>
<div class="actions">
<div>
<button onclick="" class="delete-btn <%=task.type==" personal" ? "PT-delete-btn"
: "BT-delete-btn" %>">
<i class="fas fa-xmark">×</i>
</button>
</div>
</div>
</div>
style.css
.tasks-list .tasks .PT-task {
background-color: #7ca4b0;
}
.tasks-list .tasks .BT-task {
background-color: #A5C9CA;
}
.tasks-list .tasks .taskItem {
/* background-color: #A5C9CA; */
/* background-color: red; */
padding: 15px;
display: flex;
justify-content: space-between;
margin: 10px;
/* box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 10px, rgba(0, 0, 0, 0.15) 0px 5px 5px; */
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
border-radius: 10px;
margin-top: 15px;
}
.tasks-list .tasks .taskItem .PT-delete-btn {
background-color: #7ca4b0;
}
.tasks-list .tasks .taskItem .BT-delete-btn {
background-color: #A5C9CA;
}
.tasks-list .tasks .active-delete-btn {
background-color: #EAEBED;
}
.tasks-list .tasks .active-task {
font-style: italic;
background-color: #EAEBED;
opacity: 0.8;
}