α-wwwiki

user:none (3822 bytes)

{h1 angular}
{p To be compared with the two first basic examples shown in the [[angular|http://angularjs.org/]] website.}

_h2 1) a gentle keyboard

{p A very basic script interacting with the user : 
  {input 
    {@ id="input1" 
       type="text" 
       value="" 
       placeholder = "Please, enter your name" 
       onkeyup = "getId('yourName').innerHTML='Hello ' 
               + getId('input1').value + ' !' "}}}
{h1 {@ id="yourName"}}

_h5 code of the gentle keyboard
{pre °°
1) here the input line
{p A very basic script interacting with the user : 
  {input 
    {@ id="input1" 
       type="text" 
       value="" 
       placeholder = "Please, enter your name" 
       onkeyup =
"getId('yourName').innerHTML='Hello ' + getId('input1').value + ' !'"
} } }
2) here the result :
{h1 {@ id="yourName"}}
°°}

_h2 2) a todo list

{hr}
{p 
{input 
  {@ type="submit" 
     value="Init a todo list" 
     onclick=" 
       var js = document.createElement('script');
       var input = getId('code').innerHTML;
       js.innerHTML = decode_html_entities(input); // < ,>
       document.head.appendChild( js );
       this.value = 'List inited !'; 
       this.disabled = 'disabled';"
} }
then 
{input 
  {@ type = "text" 
     id = "list_input" 
     placeholder = "enter a new thing todo"
} }
, 
{input 
  {@ type = "submit" 
     value = "add it to the list" 
     onclick = "add_item()"
} }
and do it again.
}
{hr}
{ul {@ id="liste"}}
{div {@ id="list_output" style="font:italic 1em courier"}}
{hr}

_h5 code of the todo list interface
{pre °°
1) the input line
{p 
{input 
  {@ type="submit" 
     value="Init a todo list" 
     onclick=" 
       var js = document.createElement('script');
       var input = getId('code').innerHTML;
       js.innerHTML = decode_html_entities(input); // < ,>
       document.head.appendChild( js );
       this.value = 'List inited !'; 
       this.disabled = 'disabled';"
} }
then 
{input 
  {@ type = "text" 
     id = "list_input" 
     placeholder = "enter a new thing todo"
} }
, 
{input 
  {@ type = "submit" 
     value = "add it to the list" 
     onclick = "add_item()"
} }
and do it again.
}
2) the output :
21) here will be the todo list :
{ul {@ id="liste"}}
22) here will be the informations about the todo list
{div {@ id="list_output" style="font:italic 1em courier"}}
°°}

_h5 code of the todo list engine
{pre {@ id="code"}°°
 function remaining () {
    var liste = getId('liste').childNodes;
    for (var i=0, j=0, k=0; i< liste.length; i++){    
      if (liste[i].nodeType !== 3) { // escape textNodes (lines return)
        j++;
        if (!liste[i].childNodes[0].checked) {
          k++
        }
      }
    }
    getId('list_output').innerHTML = 
      'Hi man : ' + k + ' of ' + j + ' remaining to do :)';
  }

function item_update () {
    var item = this.parentNode;
    var txt = item.childNodes[1].nodeValue; 
    item.style.color = (this.checked)? 'blue' : 'red';
    item.style.textDecoration = (this.checked)? 'line-through' : 'none';
    remaining();
  }

function add_item () {
    var item = document.createElement( 'li' );
    item.setAttribute( 'style', 'color:red;' );
    var checkbox = document.createElement( 'input' );
    checkbox.setAttribute( 'type', 'checkbox' );
    checkbox.addEventListener( 'click', item_update);
    var text = document.createTextNode( getId('list_input').value );
    item.appendChild( checkbox );
    item.appendChild( text );
    getId('liste').appendChild( item );
    getId('list_input').value= '';
    remaining();
  }
°°}

_h3 note
_p Yes, the todo list engine should be structured in a MVC (Model View Controller) way. Please, help me ...