Skip to content

Instantly share code, notes, and snippets.

@dwaps
Created December 5, 2019 15:56
Show Gist options
  • Save dwaps/195dafe941ee4af976f6866bd8431c9a to your computer and use it in GitHub Desktop.
Save dwaps/195dafe941ee4af976f6866bd8431c9a to your computer and use it in GitHub Desktop.
ES6: Exemple de génération de todo en HTML
// 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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment