Skip to content

Instantly share code, notes, and snippets.

@lduboeuf

lduboeuf/gist:cfa28da97f91feaca260

Last active October 28, 2015 10:31
Show Gist options
  • Save lduboeuf/cfa28da97f91feaca260 to your computer and use it in GitHub Desktop.
Save lduboeuf/cfa28da97f91feaca260 to your computer and use it in GitHub Desktop.
Download ZIP
exemple mini-todo app pure js
Raw
gistfile1.js
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script>
var todos = [
{ "todo" : "todo 1"},
{ "todo" : "todo 2"},
{ "todo" : "todo 3"}
]
function initTodos(){
//parcours du tableau json et création d'un li à chaque fois
for(var i=0;i<todos.length;i++){
addTodo(todos[i].todo);
}
}
function deleteTodo_event(evt){
//on recherche le noeud html à supprimer ( le parent de <a></a>)
var current_todo = evt.target.parentNode;
var todo_list = current_todo.parentNode;
todo_list.removeChild(current_todo);
}
function newtodo_event(){
addTodo(document.getElementById("todo").value);
}
function addTodo(newtodo){
//creation balise "li"
var todo_li = document.createElement("li");
todo_li.innerHTML = newtodo;
//creation balise "a"
var todo_del = document.createElement("a");
todo_del.innerHTML = " X";
todo_del.style.cursor = "crosshair";
todo_del.addEventListener('click', deleteTodo_event);
//on rajoute la balise a après le li ( <li><a...></a></li>)
todo_li.appendChild(todo_del);
//on rajoute le li à la todo list
document.getElementById("todos-list").appendChild(todo_li);
}
//fonction appelée après le chargement complet de la page (évènement load)
window.addEventListener("load", function(){
//on charge la liste des todos prédéfinis
initTodos();
//on définit le comportement sur le click du bouton
document.getElementById("btn-create-todo").addEventListener('click', newtodo_event);
//sur la touche "entrée" on ajoute le todo
window.addEventListener("keydown", function(e){
console.log(e.keyCode);
if (e.keyCode==13){ // code 13 = touche entrée
newtodo_event();
}
}, true);
});
</script>
</head>
<body>
<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>
@lduboeuf
Copy link
Author

another js style:

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>TODO mini pure js app</title>
<script>


//init todos
var todos = [
    { "todo" : "todo 1"},
    { "todo" : "todo 2"},
    { "todo" : "todo 3"}
]

var TODOCTRL = {

    delete : function(evt){
        //on recherche le noeud html à supprimer ( le parent de <a></a>)
        var current_todo = evt.target.parentNode;
        var todo_list = current_todo.parentNode;
        todo_list.removeChild(current_todo);
    },
    add : function(todo){
        //creation balise "li"
        var todo_li = document.createElement("li");
        todo_li.innerHTML = todo;
        //creation balise "a"
        var todo_del = document.createElement("a");
        todo_del.innerHTML = "  X";
        todo_del.style.cursor = "crosshair";
        todo_del.addEventListener('click', this.delete);
        //on rajoute la balise a après le li ( <li><a...></a></li>)
        todo_li.appendChild(todo_del);
        //on rajoute le li à la todo list
        document.getElementById("todos-list").appendChild(todo_li);


    },
    addAll: function(todos){

        for(var i=0;i<todos.length;i++){
            TODOCTRL.add(todos[i].todo);
        }
    }


}





//fonction appelée après le chargement complet de la page (évènement load)
window.addEventListener("load", function(){

    //display initial todos
    TODOCTRL.addAll(todos);

    //define button click event
    document.getElementById("btn-create-todo").addEventListener('click', function(e){
        TODOCTRL.add(document.getElementById("todo").value);
    });
    //handle keypress event
    window.addEventListener("keydown", function(e){

        if (e.keyCode==13){ // code 13 = touche entrée

            TODOCTRL.add(document.getElementById("todo").value);
        }

    }, true);

});


</script>
</head>
<body>

<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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment