style output html bulma

app.js

@@ -64,7 +64,7 @@ function sortTasksFromJson(statObject) {
                     })
                     // console.log(' ' + title)
                 } else {
-                    console.log('no' , elem['properties']['raw-value'])
+                    console.log('no', elem['properties']['raw-value'])
                 }
             })
 
@@ -106,35 +106,42 @@ function writeHtmlOutput() {
         let tasksOfTheDay = '';
 
         stats.tasksByDay[dayRefString].forEach((dayObj) => {
+            let graphicKeyword = '✅'
+            if ('DONE' !== dayObj.todoKeyword) {
+                graphicKeyword = dayObj.todoKeyword;
+            }
             tasksOfTheDay += ` <li>
  <h2 class="subtitle is-1"> 
- <span class="keyword"> ${dayObj.todoKeyword}</span>
+ <span class="keyword"> ${graphicKeyword}</span>
  <span class="title"> ${dayObj.title} </span>
  </h2>
- <p class="tags">
+ <p class="tag is-light is-primary">
   ${dayObj.itags}
 </p>
  </li>`
         })
         htmlOut += `
+<div class="box">
+
         <h1 class="title is-1">
-        <span class="day-ref">
-        
-        ${dayRefString}
-        </span>
-        <span class="counter pull-right badge">
-        ${stats.tasksByDay[dayRefString].length}
-        </span>
-                
+            <span class="day-ref">
+                ${dayRefString}
+            </span>
+            <span class="counter pull-right badge">
+                ${stats.tasksByDay[dayRefString].length}
+            </span>
         </h1>
+        
         <div class="day-detail">
-        <ul>
-            ${tasksOfTheDay}        
-        </ul>
-</div>
-        `
+            <ul>
+                ${tasksOfTheDay}        
+            </ul>
+        </div>
+      
+</div>  `
     })
     htmlOut += ` 
+ 
 </div>
 </body>
 </html>