xstpl · August 29, 2015 14:25
diff --git a/Exercício b/Exercício
 -Implementar busca com sugestão (estilo Google) 
 -Fazer um seed com termos para teste
 -Fazer debounce de 300ms em cada caractere digitado
 -Se o usuário digitar "bazinga", a logo do Zoozle deve sumir, a imagem do Sheldon deve ser exibida e uma exceção "Bazinga" deve ser disparada
 -Busca case insensitive
 -Ao clicar-se numa opção da lista de sugestões, ou ao apertar-se Enter, fazer a busca no Google de verdade





diff --git a/main.css b/main.css
 body{
 	font-family: arial, sans-serif;
 }

 body > *{
 	text-align: center;
 	width: 500px;
 	margin: auto;
 }

 h1{
 	font-family: georgia;
 	color: #449;
 	margin-top: 100px;
 	font-size: 80px;
 	margin-bottom: 30px;
 }

 h1 span:nth-of-type(1){
 	color: #1267E9;
 }

 h1 span:nth-of-type(2){
 	color: #D8442E;
 }

 h1 span:nth-of-type(3){
 	color: #FFB700;
 }

 h1 span:nth-of-type(4){
 	color: #1267E9;
 }

 h1 span:nth-of-type(5){
 	color: #009C59;
 }

 h1 span:nth-of-type(6){
 	color: #D8442E;
 }


 .search-suggestion{
 	display: none;
 	position: absolute;
 	border: 1px solid #777;
 	box-shadow: 0 2px 2px #888;
 	background-color: #FFF;
 	width: 500px;
 	margin: 0;
 }

 .search-terms:focus ~ .search-suggestion{
 	display: block;
 }

 .search-suggestion li{
 	text-align: left;
 }

 .search-suggestion li:hover{
 	background-color: #DDD;
 }

 .search-panel ol{
 	padding: 0;
 	list-style-type: none;
 }

 .search-panel li{
 	cursor: pointer;
 	line-height: 30px;
 }

 .search-terms{
 	font-size: 18px;
 	height: 30px;
 	width: 500px;
 }

 .search-suggestion li{
 	padding: 5px;
 }

 button{
 	cursor: pointer;
 	height: 30px;
 	background-color: #449;
 	color: #FFF;
 	border-width: 0;
 	text-transform: uppercase;
 }

 button:hover{
 	background-color: #66B;
 }

 .bottom-bar{
 	margin-top: 20px;
 }

 .sheldon{
 	display: none;
 	width: 200px;
 }
diff --git a/zoozle.html b/zoozle.html
 <!DOCTYPE html>
 <html>
 <head>
 	<meta charset="UTF-8">
 	<title>Zoozle - Curso JavaScript de 0 a 100</title>
 	<link rel="stylesheet" href="main.css">
 </head>
 <body>
 	<header>
 		<h1>
 			<span>Z</span><span>o</span><span>o</span><span>z</span><span>l</span><span>e</span>
 		</h1>
 		<img src="http://2.bp.blogspot.com/-6foNjYow-1g/TWa8ZmRPyLI/AAAAAAAAATI/sAPH9Dm9pkQ/s1600/sheldon-cooper%255B3%255D.jpg" class="sheldon">
 	</header>

 	<section class="search-panel">
 		<input type="text" id="search_terms" class="search-terms">
 		<ol id="search_suggestion" class="search-suggestion">
 			<li>Steve Jobs</li>
 			<li>Mensalão</li>
 			<li>Gagnam Style</li>
 			<li>42 é a resposta pra qual pergunta?</li>
 		</ol>
 	</section>
 	
 	<div class="bottom-bar">
 		<button id="search">Pesquisa Zoozle</button>		
 	</div>

 	<script src="zoozle.js"></script>
 </body>
 </html>
diff --git a/zoozle.js b/zoozle.js
 //Strings para lower case (para fazer a busca de forma case insensitive)
 'EpPPaaaaA'.toLowerCase();

 //Localizar uma string em outra
 'One ring to rule them all'.indexOf('rule') > -1

 //Esconder um determinado elemento
 document.getElementById('id_do_elemento').style.display = 'none';

 //Exibir um determinado elemento
 document.getElementById('id_do_elemento').style.display = 'block';

 //Interceptar a digitação de um caractere no input
 document.getElementById('id_do_text_input').addEventListener('keypress', function(e){
  console.log(this.value);
 });

 //Detectar a tecla enter
 document.getElementById('id_do_text_input').addEventListener('keypress', function(e){
  if(e.keyCode === 13){ console.log('você apertou enter!!'); }
 });

 //Função para busca no Google
 function searchInRealGoogle(terms){
 	location.href = 'https://www.google.com.br/?gfe_rd=cr&ei=6y5VVIKWKKWX8QfS4oBA#safe=off&q=' + escape(terms);
 }

 //Exemplo Debounce (originalmente escrito para uso com mouse move, adaptar para o cenário do exercício)
 window.addEventListener('load', function(){
 	var i = 0;

 	var mouseMoveHandler = (function(){
 		var duracao = 500;
 		var timeout;

 		var handler = function(){
 			console.log('Debounce', ++i);	
 		};

 		return function(){
 			clearTimeout(timeout);
 			timeout = setTimeout(function(){
 				handler.call(this, arguments)
 			}, duracao);
 		};
 	})();

 	document.getElementById('area_teste_debounce').addEventListener('mousemove', mouseMoveHandler);
 });
	-Implementar busca com sugestão (estilo Google)
	-Fazer um seed com termos para teste
	-Fazer debounce de 300ms em cada caractere digitado
	-Se o usuário digitar "bazinga", a logo do Zoozle deve sumir, a imagem do Sheldon deve ser exibida e uma exceção "Bazinga" deve ser disparada
	-Busca case insensitive
	-Ao clicar-se numa opção da lista de sugestões, ou ao apertar-se Enter, fazer a busca no Google de verdade
	body{
	font-family: arial, sans-serif;
	}

	body > *{
	text-align: center;
	width: 500px;
	margin: auto;
	}

	h1{
	font-family: georgia;
	color: #449;
	margin-top: 100px;
	font-size: 80px;
	margin-bottom: 30px;
	}

	h1 span:nth-of-type(1){
	color: #1267E9;
	}

	h1 span:nth-of-type(2){
	color: #D8442E;
	}

	h1 span:nth-of-type(3){
	color: #FFB700;
	}

	h1 span:nth-of-type(4){
	color: #1267E9;
	}

	h1 span:nth-of-type(5){
	color: #009C59;
	}

	h1 span:nth-of-type(6){
	color: #D8442E;
	}


	.search-suggestion{
	display: none;
	position: absolute;
	border: 1px solid #777;
	box-shadow: 0 2px 2px #888;
	background-color: #FFF;
	width: 500px;
	margin: 0;
	}

	.search-terms:focus ~ .search-suggestion{
	display: block;
	}

	.search-suggestion li{
	text-align: left;
	}

	.search-suggestion li:hover{
	background-color: #DDD;
	}

	.search-panel ol{
	padding: 0;
	list-style-type: none;
	}

	.search-panel li{
	cursor: pointer;
	line-height: 30px;
	}

	.search-terms{
	font-size: 18px;
	height: 30px;
	width: 500px;
	}

	.search-suggestion li{
	padding: 5px;
	}

	button{
	cursor: pointer;
	height: 30px;
	background-color: #449;
	color: #FFF;
	border-width: 0;
	text-transform: uppercase;
	}

	button:hover{
	background-color: #66B;
	}

	.bottom-bar{
	margin-top: 20px;
	}

	.sheldon{
	display: none;
	width: 200px;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Zoozle - Curso JavaScript de 0 a 100</title>
	<link rel="stylesheet" href="main.css">
	</head>
	<body>
	<header>
	<h1>
	<span>Z</span><span>o</span><span>o</span><span>z</span><span>l</span><span>e</span>
	</h1>
	<img src="http://2.bp.blogspot.com/-6foNjYow-1g/TWa8ZmRPyLI/AAAAAAAAATI/sAPH9Dm9pkQ/s1600/sheldon-cooper%255B3%255D.jpg" class="sheldon">
	</header>

	<section class="search-panel">
	<input type="text" id="search_terms" class="search-terms">
	<ol id="search_suggestion" class="search-suggestion">
	<li>Steve Jobs</li>
	<li>Mensalão</li>
	<li>Gagnam Style</li>
	<li>42 é a resposta pra qual pergunta?</li>
	</ol>
	</section>

	<div class="bottom-bar">
	<button id="search">Pesquisa Zoozle</button>
	</div>

	<script src="zoozle.js"></script>
	</body>
	</html>
	//Strings para lower case (para fazer a busca de forma case insensitive)
	'EpPPaaaaA'.toLowerCase();

	//Localizar uma string em outra
	'One ring to rule them all'.indexOf('rule') > -1

	//Esconder um determinado elemento
	document.getElementById('id_do_elemento').style.display = 'none';

	//Exibir um determinado elemento
	document.getElementById('id_do_elemento').style.display = 'block';

	//Interceptar a digitação de um caractere no input
	document.getElementById('id_do_text_input').addEventListener('keypress', function(e){
	console.log(this.value);
	});

	//Detectar a tecla enter
	document.getElementById('id_do_text_input').addEventListener('keypress', function(e){
	if(e.keyCode === 13){ console.log('você apertou enter!!'); }
	});

	//Função para busca no Google
	function searchInRealGoogle(terms){
	location.href = 'https://www.google.com.br/?gfe_rd=cr&ei=6y5VVIKWKKWX8QfS4oBA#safe=off&q=' + escape(terms);
	}

	//Exemplo Debounce (originalmente escrito para uso com mouse move, adaptar para o cenário do exercício)
	window.addEventListener('load', function(){
	var i = 0;

	var mouseMoveHandler = (function(){
	var duracao = 500;
	var timeout;

	var handler = function(){
	console.log('Debounce', ++i);
	};

	return function(){
	clearTimeout(timeout);
	timeout = setTimeout(function(){
	handler.call(this, arguments)
	}, duracao);
	};
	})();

	document.getElementById('area_teste_debounce').addEventListener('mousemove', mouseMoveHandler);
	});