Change css value on div depending on the data form MongoDB

Viewed 22

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">&times</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;
}

myApp

0 Answers
Related