main.dart

import 'dart:html';

// Je ne comprend pas trop pourquoi le Iterable ici a besoin d'avoir un `sync*` à la fin.
// J'ai lu qu'il y avait 2 manières de fonctionner: async et sync. Dans ce cas ci, c'est bloquant vu que c'est sync.
// Mais je ne sais pas pourquoi le * et ce que ça veut dire. je devrai regarder plus la doc de Dart comme tel je pense.
Iterable<String> thingsTodo() sync* {
  var actions = ['Walk', 'Wash', 'Feed'];
  var pets = ['cats', 'dogs'];

  for (var action in actions) {
    for (var pet in pets) {
      if (pet == 'cats' && action != 'Feed') continue;
      yield '$action the $pet';
    }
  }
}

void addTodoItem(String item) {
  print(item);

  // pour LIElement, voir https://api.dartlang.org/stable/2.1.0/dart-html/LIElement-class.html
  // en gros c'est un factory pour créer des tags <li> dans le DOM.
  var listElement = LIElement();  
  listElement.text = item; // l'objet de type LIElement a des propriétés assignables directement, comme .text .
  todoList.children.add(listElement); // .children est assez self-explanatory. C'est une collection qu'on peut ajouter des child DOM elements (<li> dans ce cas-ci).
}

// Même principe que pour le LIElement. c'est juste qu'il se fait initialiser différemment.
// Au lieu d'être créé vide par un factory method du genre UListElement(), et ajouté des trucs ensuite,
// il se fait setter par querySelector('#todolist'), qui retourne un UListElement dans ce cas ci.
UListElement todoList;

void main() {
  // querySelector c'est une methode de l'API du DOM. Normalement, on fait ceci en javascript:
  // var todoList = document.querySelector('#todolist');
  // le #todolist réfère au tag html <ul>, qui a un attribut 'id' nommé todolist.
  // par exemple, si ça avait été un attribut 'class', le sélecteur aurait été '.todolist' .
  todoList = querySelector('#todolist');
  thingsTodo().forEach(addTodoItem);
}