lduboeuf · May 13, 2015 08:24
diff --git a/gistfile1.html b/gistfile1.html
 <!doctype html>
 <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
 <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
 <!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
 <!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script type="text/javascript">

            var todolist = {
                "todos": [
                    { "name" : "todo 1"},
                    { "name" : "todo 2"},
                    { "name" : "todo 3"}
                ]
            }

            //fonction qui ajoute un todo a la liste ul
            function add_todo(todo){
                var td = $('<li></li>');
                var tdname = $('<span></span>').html(todo).appendTo(td);
                //pour modifier un todo existant sur le click
                tdname.click(function(){
                   
                    $(this).attr('contentEditable',true);

                });


                var td_delete = $('<input />', { type: 'checkbox' })
                td_delete.click(function() {
                    if (this.checked) {
                        $(this).parent().css('textDecoration', 'line-through');
                    } else {
                        $(this).parent().css('textDecoration', 'none');
                    }
                });
                td.append(td_delete);

                // effet de style affichage avec un fadeIn
                td.css('display', 'none').fadeIn();

                $( "#todos-list" ).append( td);
            }

            //fonction appellée une fois le document html complètement chargé 
           $( document ).ready(function() {
                //initialisation
                //parcours de la liste des todos et création des <li>
                $.each(todolist.todos, function(i, todo) {
                //use obj.id and obj.name here, for example:
                    add_todo(todo.name);

                });


                //le click surle bouton ok ajoute un todo
                $('#btn-create-todo').click(function(){
                    var td = $('#todo').val();
                    if (td != ''){
                        add_todo(td);
                    }
                    
                });


            });


        </script>

        

    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <h1>TODO list</h1>
    <div id="form">
        <input type="text" id="todo"/>
        <input type="button" id="btn-create-todo" value="ok"/>
     </div>
     <ul id="todos-list">
        
     </ul>


    </body>
 </html>
	<!doctype html>
	<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
	<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
	<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
	<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="apple-touch-icon" href="apple-touch-icon.png">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script type="text/javascript">

	var todolist = {
	"todos": [
	{ "name" : "todo 1"},
	{ "name" : "todo 2"},
	{ "name" : "todo 3"}
	]
	}

	//fonction qui ajoute un todo a la liste ul
	function add_todo(todo){
	var td = $('<li></li>');
	var tdname = $('<span></span>').html(todo).appendTo(td);
	//pour modifier un todo existant sur le click
	tdname.click(function(){

	$(this).attr('contentEditable',true);

	});


	var td_delete = $('<input />', { type: 'checkbox' })
	td_delete.click(function() {
	if (this.checked) {
	$(this).parent().css('textDecoration', 'line-through');
	} else {
	$(this).parent().css('textDecoration', 'none');
	}
	});
	td.append(td_delete);

	// effet de style affichage avec un fadeIn
	td.css('display', 'none').fadeIn();

	$( "#todos-list" ).append( td);
	}

	//fonction appellée une fois le document html complètement chargé
	$( document ).ready(function() {
	//initialisation
	//parcours de la liste des todos et création des <li>
	$.each(todolist.todos, function(i, todo) {
	//use obj.id and obj.name here, for example:
	add_todo(todo.name);

	});


	//le click surle bouton ok ajoute un todo
	$('#btn-create-todo').click(function(){
	var td = $('#todo').val();
	if (td != ''){
	add_todo(td);
	}

	});


	});


	</script>



	</head>
	<body>
	<!--[if lt IE 8]>
	<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
	<![endif]-->
	<h1>TODO list</h1>
	<div id="form">
	<input type="text" id="todo"/>
	<input type="button" id="btn-create-todo" value="ok"/>
	</div>
	<ul id="todos-list">

	</ul>


	</body>
	</html>