ES6: Exemple de génération de todo en HTML

index.js

// CLASSE
class Todo {
  constructor(text) {
    this.text = text;
    this.done = false;
  }
}

// RECUP DES TODOS
const todos = [
  new Todo('Faire le ménage'),
  new Todo('Faire la vaisselle'),
  new Todo('Chanter sous la douche'),
];

// Function de création de todo dans le code HTML
function generateTodo({ done, text }) {
  return `
    <div class="todo ${done ? 'done' : ''}">
      <input type="checkbox">
      <label>${text}</label>
      <button>&times;</button>
    </div>
  `;
}

// Génération du code HTML pour chaque todo
todos[1].done = true; // On a fait la vaiselle !

for (let todo of todos) {
  const html = generateTodo(todo);
  console.log(html);
}