Olá turma!

Olá turma, tudo certo com vocês? O mano Natanael Barbosa tinha feito aqui pro TabNews um buscador que ao pesquisar dispara uma pesquisa inurl do Google no TabNews, em outras palavras: ela faz o Google pesquisar apenas dentro do TabNews.

As novidades

Eu fiz algumas novidades, a principal delas é no design da página. Alterei tbm o funcinamento, de "form" para JS. Mas em relação ao design, alterei o campo de busca, a header, a footer e os botões.

Acesso

GitHub: https://ttdsgms.github.io/tabnews-search/
Netlify: https://tabnews.netlify.com

Meus próximos passos

Em desenvolvimento

• DarkMode
• Adicionar outras páginas

Ideias ambiososas

Eu nem ia colocar isso aqui, mas eu tou mesmo assim resolvendo colocar aqui porque, são só ideias.

• A principal delas: Não depender do Google
• Adicionar os posts direto na home do buscador

Contribuidores do projeto inicial

Obrigado

Infelizmente não consegui o contato do Natanael de nenhuma forma, mas se ele ver esse post: Me manda uma mensagem. :)

---

Edit

Edit: Eu fiz uma alteração no campo de busca. Em vez de ser somente o input, é uma label com o input dentro. Acredito que isso é melhor pois me permite inserir SVGs, como a de uma lupa por exemplo.

Antes

HTML

<input id="search-input" type="text" placeholder="Pesquisar">

CSS

.search-box input[type="text"]{
	width: 25em;
	height: 2.5em;
	padding: 0.5em 2em;
	font-size: 1em;
	border: 0.065em solid #dcdcdc;
	border-radius: 2em;
	outline: none;
}

Agora

HTML

<label for="search-input">
	<input id="search-input" type="text" placeholder="Pesquisar">
</label>

CSS

.search-box label{
	display: flex;
	align-items: center;
	width: 25em;
	height: 2.5em;
	padding: 0.5em 2em;
	border: 0.065em solid #dcdcdc;
	border-radius: 2em;
}
.search-box input[type="text"]{
	background-color: transparent;
	outline: none;
	border: none;
	font-size: 1em;
	width: 100%;
	height: 100%;
}