expalmer/app.js

## app.js

localStorage.test = '';
var stores = new Stores('test');

var datas = [
  { name: 'Eric' },
  { name: 'Jean' },
  { name: 'Pablo' },
  { name: 'Palmer' },
  { name: 'Pepo' }
];

var i = 0;

datas.forEach( saveMyBrothers );

function saveMyBrothers( data, index ) {

  setTimeout(function(){
    stores.save( data, function( newItem ) {
      console.log(newItem.name, 'criado com Id', newItem.id );
      if( newItem.name === 'Pepo' ) {
        updatePepo( newItem );
      }
      if( newItem.name === 'Jean' ) {
        destroyJean( newItem );
      }
      if( index === datas.length -1 ) {
        showItems();
      }
    });
  }, 1000 * i++ );
}

function updatePepo( item ) {
  item.name = 'Pepo do Fuscao';
  setTimeout(function(){
    stores.save( item, function( itemUpdated ) {
      console.log('UPDATED', itemUpdated.id, itemUpdated.name );
    });
  }, 1000 * i++ );
}

function destroyJean( item ) {
  setTimeout(function(){
    stores.destroy( item.id, function( destroyed ) {
      console.log('DESTROY', item.name );
      showItems(5000);
    });
  }, 1000 * i++ );
}

function showItems( timeout ) {
  setTimeout(function(){
    stores.findAll(function(items){
      items.forEach(function(item){
        console.log(item);
      })
    });
  }, timeout || 0);
}

## desafio2-selects
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="main">
    <h1>Darth <span>Vader</span></h1>
    <h2>Storm <span>Trooper</span></h2>
    <div class="box1">
      <p>Gato</p>
      <p>Pato</p>
      <p>Galo</p>
    </div>
    <div class="box2">
      <p>Homem</p>
      <p>Mulher</p>
      <p>Criança</p>
    </div>
  </div>
  <script>
    var h2 = selectOne('h2');
    var span = selectOne('span', h2);
    var ps = selectMany('p');
    var box2 = selectOne('.box2');
    var ps2 = selectMany('p', box2);
    console.log(h2.textContent);
    console.log(span.textContent);
    console.log(box2.innerHTML);
    var len = ps2.length;
    while( len-- ) {
      console.log( ps2[len].innerHTML );
    }
/*
Storm Trooper
Trooper
    <p>Homem</p>
    <p>Mulher</p>
    <p>Criança</p>
Criança
Mulher
Homem
*/
  </script>
</body>
</html>

## desafio4_mapValues.js
var obj = { name: 'Palmer', age: 34, email: 'expalmer@gmail.com' };
var arr = ['Palmer', 34, 'expalmer@gmail.com'];

mapValues(obj, function(value, key) {
 console.log(value, key); // Palmer, name
});

mapValues(arr, function(value, key) {
 console.log(value, key); // Palmer, 0
});

## eric_jean_pepo_pablo.js
// Problemas da implementação.
// 1) Muitas chamadas para o DOM, o que é crítico pois manipular o DOM é a coisa mais trabalhosa para a Engine JS,
//    vocês chamaram getElementById várias vezes, sendo que só é necessário 1 vez
// 2) Não colocar funções na marcação html, melhor criar um eventListener
// Mas funcionou :)

// eric
var func = function ( e ) {
  var textBox = document.getElementById("textbox").value;
  if ( textBox!="" && e.keyCode == 13 ){
    console.log( textBox );
    var li = document.createElement('li'); //Criando a var li e criando o elemento li
    var ul = document.getElementById('ul'); //Atribuindo o elemento ul na var ul
    li.appendChild(document.createTextNode(textBox)); //Adicionando o que foi digitado
    ul.appendChild(li); //adicionando o li na ul
    document.getElementById("textbox").value = ""; //Limpando a textbox
  }
};

// jean
var fn = function(e){
  if (e.keyCode == 13 && document.getElementById('input').value != "") {
    var textoDigitado = document.getElementById('input').value;
    document.getElementById('input').value = "";
    var li = document.createElement('li');
    var ul = document.getElementById('ul');
    li.appendChild(document.createTextNode(textoDigitado));
    ul.appendChild(li);
  }
};

// pepo
function addDom(e) {
  if (e.keyCode == 13) {
    if(document.getElementById("valor").value != '') {
      //pegando valor do input
      var valor = document.getElementById("valor").value;
      // adicionando o elemento li no newLi
      var newLi = document.createElement('li');
      // adicionano o valor do input no newContent
      var newContent = document.createTextNode(valor);
      //adicionando o valor ao li
      newLi.appendChild(newContent);
      //pega a lista
      var addLi = document.getElementById("list");
      //insere o li e o conteudo após a ultima posicao da lista
      addLi.insertBefore(newLi, addLi.lastChild);
      // zera o inputzinho
      document.getElementById("valor").value = '';
    }
  }
}
// pablo
var func = function ( e ) {
  var textBox = document.getElementById("textbox").value;
  if ( textBox!="" && e.keyCode == 13 ){
    console.log( textBox );
    var li = document.createElement('li');
    var ul = document.getElementById('ul');
    li.appendChild(document.createTextNode(textBox));
    ul.appendChild(li); //adicionando o li na ul
    document.getElementById("textbox").value = "";
  }
};

## script.js
;(function() {
  // chama nossa função apenas quando o DOM estiver pronto
  window.addEventListener('DOMContentLoaded', function() {

    var ENTER_KEY = 13; // melhor declarar o que significa 13
    var add = document.querySelector('input');
    var list = document.querySelector('ul'); // pegamos a referencia apenas 1 vez

    function addInList( value ) {
      var li = document.createElement('li');
      li.appendChild(document.createTextNode(value));
      list.appendChild(li);
    }

    function onKeyPressHandler( event ) {
      console.log( event.target === add );
      var text = event.target.value.trim();
      if( text && event.keyCode === ENTER_KEY ) {
        addInList( text );
        event.target.value = '';
      }
    }

    add.addEventListener('keypress', onKeyPressHandler);

  });

})();

	localStorage.test = '';
	var stores = new Stores('test');

	var datas = [
	{ name: 'Eric' },
	{ name: 'Jean' },
	{ name: 'Pablo' },
	{ name: 'Palmer' },
	{ name: 'Pepo' }
	];

	var i = 0;

	datas.forEach( saveMyBrothers );

	function saveMyBrothers( data, index ) {

	setTimeout(function(){
	stores.save( data, function( newItem ) {
	console.log(newItem.name, 'criado com Id', newItem.id );
	if( newItem.name === 'Pepo' ) {
	updatePepo( newItem );
	}
	if( newItem.name === 'Jean' ) {
	destroyJean( newItem );
	}
	if( index === datas.length -1 ) {
	showItems();
	}
	});
	}, 1000 * i++ );
	}

	function updatePepo( item ) {
	item.name = 'Pepo do Fuscao';
	setTimeout(function(){
	stores.save( item, function( itemUpdated ) {
	console.log('UPDATED', itemUpdated.id, itemUpdated.name );
	});
	}, 1000 * i++ );
	}

	function destroyJean( item ) {
	setTimeout(function(){
	stores.destroy( item.id, function( destroyed ) {
	console.log('DESTROY', item.name );
	showItems(5000);
	});
	}, 1000 * i++ );
	}

	function showItems( timeout ) {
	setTimeout(function(){
	stores.findAll(function(items){
	items.forEach(function(item){
	console.log(item);
	})
	});
	}, timeout \|\| 0);
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	</head>
	<body>
	<div class="main">
	<h1>Darth <span>Vader</span></h1>
	<h2>Storm <span>Trooper</span></h2>
	<div class="box1">
	<p>Gato</p>
	<p>Pato</p>
	<p>Galo</p>
	</div>
	<div class="box2">
	<p>Homem</p>
	<p>Mulher</p>
	<p>Criança</p>
	</div>
	</div>
	<script>
	var h2 = selectOne('h2');
	var span = selectOne('span', h2);
	var ps = selectMany('p');
	var box2 = selectOne('.box2');
	var ps2 = selectMany('p', box2);
	console.log(h2.textContent);
	console.log(span.textContent);
	console.log(box2.innerHTML);
	var len = ps2.length;
	while( len-- ) {
	console.log( ps2[len].innerHTML );
	}
	/*
	Storm Trooper
	Trooper
	<p>Homem</p>
	<p>Mulher</p>
	<p>Criança</p>
	Criança
	Mulher
	Homem
	*/
	</script>
	</body>
	</html>
	var obj = { name: 'Palmer', age: 34, email: 'expalmer@gmail.com' };
	var arr = ['Palmer', 34, 'expalmer@gmail.com'];

	mapValues(obj, function(value, key) {
	console.log(value, key); // Palmer, name
	});

	mapValues(arr, function(value, key) {
	console.log(value, key); // Palmer, 0
	});
	// Problemas da implementação.
	// 1) Muitas chamadas para o DOM, o que é crítico pois manipular o DOM é a coisa mais trabalhosa para a Engine JS,
	// vocês chamaram getElementById várias vezes, sendo que só é necessário 1 vez
	// 2) Não colocar funções na marcação html, melhor criar um eventListener
	// Mas funcionou :)

	// eric
	var func = function ( e ) {
	var textBox = document.getElementById("textbox").value;
	if ( textBox!="" && e.keyCode == 13 ){
	console.log( textBox );
	var li = document.createElement('li'); //Criando a var li e criando o elemento li
	var ul = document.getElementById('ul'); //Atribuindo o elemento ul na var ul
	li.appendChild(document.createTextNode(textBox)); //Adicionando o que foi digitado
	ul.appendChild(li); //adicionando o li na ul
	document.getElementById("textbox").value = ""; //Limpando a textbox
	}
	};

	// jean
	var fn = function(e){
	if (e.keyCode == 13 && document.getElementById('input').value != "") {
	var textoDigitado = document.getElementById('input').value;
	document.getElementById('input').value = "";
	var li = document.createElement('li');
	var ul = document.getElementById('ul');
	li.appendChild(document.createTextNode(textoDigitado));
	ul.appendChild(li);
	}
	};

	// pepo
	function addDom(e) {
	if (e.keyCode == 13) {
	if(document.getElementById("valor").value != '') {
	//pegando valor do input
	var valor = document.getElementById("valor").value;
	// adicionando o elemento li no newLi
	var newLi = document.createElement('li');
	// adicionano o valor do input no newContent
	var newContent = document.createTextNode(valor);
	//adicionando o valor ao li
	newLi.appendChild(newContent);
	//pega a lista
	var addLi = document.getElementById("list");
	//insere o li e o conteudo após a ultima posicao da lista
	addLi.insertBefore(newLi, addLi.lastChild);
	// zera o inputzinho
	document.getElementById("valor").value = '';
	}
	}
	}
	// pablo
	var func = function ( e ) {
	var textBox = document.getElementById("textbox").value;
	if ( textBox!="" && e.keyCode == 13 ){
	console.log( textBox );
	var li = document.createElement('li');
	var ul = document.getElementById('ul');
	li.appendChild(document.createTextNode(textBox));
	ul.appendChild(li); //adicionando o li na ul
	document.getElementById("textbox").value = "";
	}
	};
	;(function() {
	// chama nossa função apenas quando o DOM estiver pronto
	window.addEventListener('DOMContentLoaded', function() {

	var ENTER_KEY = 13; // melhor declarar o que significa 13
	var add = document.querySelector('input');
	var list = document.querySelector('ul'); // pegamos a referencia apenas 1 vez

	function addInList( value ) {
	var li = document.createElement('li');
	li.appendChild(document.createTextNode(value));
	list.appendChild(li);
	}

	function onKeyPressHandler( event ) {
	console.log( event.target === add );
	var text = event.target.value.trim();
	if( text && event.keyCode === ENTER_KEY ) {
	addInList( text );
	event.target.value = '';
	}
	}

	add.addEventListener('keypress', onKeyPressHandler);

	});

	})();