add html comments to html template strings

public/scripts/AppDatePicker.js

@@ -1,11 +1,11 @@
 import { AppIcon } from './AppIcon.js';
 import { formatMonth } from './util.js';
 
-const datesCell = `
+const datesCell = /* html */ `
   <td><button class="app-button"></button></td>
 `;
 
-const datesRow = `
+const datesRow = /* html */ `
   <tr>
     ${datesCell}
     ${datesCell}
@@ -28,7 +28,7 @@ export function AppDatePicker(el) {
   };
   let show = false;
 
-  el.innerHTML = `
+  el.innerHTML = /* html */ `
     <h4 class="header">
       <button class="app-button -circle previousmonth">
         <i class="app-icon" data-id="chevron-left-16"></i>

public/scripts/TodoApp.js

@@ -13,7 +13,7 @@ import { TodoLogic } from './TodoLogic.js';
 export function TodoApp(el) {
   let todoData = TodoLogic.initTodoData();
 
-  el.innerHTML = `
+  el.innerHTML = /* html */ `
     <header class="app-header">
       <h1 class="title">VANILLA TODO</h1>
       <p class="app-fps fps"></p>

public/scripts/TodoCustomList.js

@@ -11,7 +11,7 @@ export function TodoCustomList(el) {
   let startEditing = false;
   let saveOnBlur = true;
 
-  el.innerHTML = `
+  el.innerHTML = /* html */ `
     <div class="header">
       <h3 class="title"></h3>
       <p class="form">

public/scripts/TodoDay.js

@@ -8,7 +8,7 @@ export function TodoDay(el) {
   const dateId = el.dataset.key;
   let items = [];
 
-  el.innerHTML = `
+  el.innerHTML = /* html */ `
     <div class="header">
       <h3 class="dayofweek"></h3>
       <h6 class="date"></h6>

public/scripts/TodoFrameCustom.js

@@ -9,7 +9,7 @@ import { TodoLogic } from './TodoLogic.js';
 export function TodoFrameCustom(el) {
   let todoData = TodoLogic.initTodoData();
 
-  el.innerHTML = `
+  el.innerHTML = /* html */ `
     <div class="leftcontrols">
       <p><button class="app-button -circle -xl back"><i class="app-icon" data-id="chevron-left-24"></i></button></p>
     </div>

public/scripts/TodoFrameDays.js

@@ -10,7 +10,7 @@ export function TodoFrameDays(el) {
   const RANGE = 14;
   let todoData = TodoLogic.initTodoData();
 
-  el.innerHTML = `
+  el.innerHTML = /* html */ `
     <nav class="leftcontrols">
       <p>
         <button class="app-button -circle -xl backward">

public/scripts/TodoItem.js

@@ -10,7 +10,7 @@ export function TodoItem(el) {
   let startEditing = false;
   let saveOnBlur = true;
 
-  el.innerHTML = `
+  el.innerHTML = /* html */ `
     <div class="checkbox">
       <input type="checkbox">
     </div>

public/scripts/TodoItemInput.js

@@ -6,7 +6,7 @@ import { AppIcon } from './AppIcon.js';
 export function TodoItemInput(el) {
   let saveOnBlur = true;
 
-  el.innerHTML = `
+  el.innerHTML = /* html */ `
     <input type="text" class="input use-focus-other">
     <button class="app-button save"><i class="app-icon" data-id="plus-24"></i></button>
   `;

public/scripts/TodoList.js

@@ -8,7 +8,7 @@ import { TodoItemInput } from './TodoItemInput.js';
 export function TodoList(el) {
   let items = [];
 
-  el.innerHTML = `
+  el.innerHTML = /* html */ `
     <div class="items"></div>
     <div class="todo-item-input"></div>
   `;