lduboeuf · June 12, 2017 08:07
diff --git a/todo-app-init.html b/todo-app-init.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <title>TODO app</title>
    <style media="screen">
      li.done{
        text-decoration: line-through;
      }
    </style>
  </head>
  <body>

    <main>
      <form>
        <input type="text" name="todo" value="" placeholder="saisir un todo">
        <button type="button" name="ok">ok</button>
      </form>
      <ul id="todo-list">
      </ul>
    </main>


    <script type="text/javascript">

    var $todoList = document.getElementById('todo-list');
    var $todo = document.querySelector('input[name="todo"]');
    var $btnOK = document.querySelector('button[name="ok"]');

    var todos = [
      {
        name: 'todo1',
        priority: 1,
        done: false
      },
      {
        name: 'todo2',
        priority: 1,
        done: true
      }
    ]

    function createTodo(todo){
      var $li = document.createElement('li');
      $li.innerText =todo.name;

      if (todo.done){
        $li.classList.add('done');
      }

      var $btnSuppr = document.createElement('button');
      $btnSuppr.innerText = 'X';
      $btnSuppr.onclick = function(){
        var $liToDelete = $btnSuppr.parentNode;
        $todoList.removeChild($liToDelete);
      }


      $li.append($btnSuppr);



      $todoList.appendChild($li);
    }

    $btnOK.onclick = function(){
      createTodo($todo.value);
    }

    //afficher tous les todo
    for (var i = 0; i < todos.length; i++) {
      createTodo(todos[i]);
    }

    </script>

  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>TODO app</title>
	<style media="screen">
	li.done{
	text-decoration: line-through;
	}
	</style>
	</head>
	<body>

	<main>
	<form>
	<input type="text" name="todo" value="" placeholder="saisir un todo">
	<button type="button" name="ok">ok</button>
	</form>
	<ul id="todo-list">
	</ul>
	</main>


	<script type="text/javascript">

	var $todoList = document.getElementById('todo-list');
	var $todo = document.querySelector('input[name="todo"]');
	var $btnOK = document.querySelector('button[name="ok"]');

	var todos = [
	{
	name: 'todo1',
	priority: 1,
	done: false
	},
	{
	name: 'todo2',
	priority: 1,
	done: true
	}
	]

	function createTodo(todo){
	var $li = document.createElement('li');
	$li.innerText =todo.name;

	if (todo.done){
	$li.classList.add('done');
	}

	var $btnSuppr = document.createElement('button');
	$btnSuppr.innerText = 'X';
	$btnSuppr.onclick = function(){
	var $liToDelete = $btnSuppr.parentNode;
	$todoList.removeChild($liToDelete);
	}


	$li.append($btnSuppr);



	$todoList.appendChild($li);
	}

	$btnOK.onclick = function(){
	createTodo($todo.value);
	}

	//afficher tous les todo
	for (var i = 0; i < todos.length; i++) {
	createTodo(todos[i]);
	}

	</script>

	</body>
	</html>