Criando uma página de busca com HTML, CSS, JS, Tailwind e JSON
Crie um projeto de busca inspirado em páginas de pesquisa, usando HTML, CSS, JavaScript, Tailwind CSS e dados em JSON.
- #HTML
- #CSS
- #JavaScript
- #Tailwind CSS
- #JSON
- #Vite
Neste projeto, vamos criar um segundo repositório chamado html-css-js. A proposta é criar uma página de busca inspirada em páginas simples de pesquisa, com campo de busca, botão e resultados carregados a partir de um JSON.
Este é um exercício didático. Não use logotipo, marca ou identidade visual de empresas reais em um projeto público.
Criando o repositório
No GitHub, crie um novo repositório chamado html-css-js, copie o link SSH, clone o projeto e abra no VS Code.
Antes de rodar os comandos, crie o repositório no GitHub e copie a URL SSH dele. Troque seu-usuario pelo seu usuário real.
Lendo os comandos: git clone baixa o projeto vazio, cd entra na pasta e code . abre essa pasta no VS Code.
cd ~/Desktop/curso-frontend
git clone git@github.com:seu-usuario/html-css-js.git
cd html-css-js
code .Criando um projeto com Vite
Como vamos usar Tailwind CSS, uma forma prática é usar Vite.
Rode o comando do Vite dentro da pasta onde você quer criar o projeto. Depois entre na pasta criada, instale as dependências com npm install e rode npm run dev para abrir o servidor local.
npm create vite@latest . -- --template vanilla
npm install
npm install tailwindcss @tailwindcss/vite
npm run devConfigurando Tailwind CSS
No vite.config.js, adicione o plugin do Tailwind. No CSS principal, importe Tailwind.
Leia essa etapa como configuração do estilo. O Tailwind precisa estar instalado, configurado e importado no CSS principal antes das classes utilitárias funcionarem na tela.
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
plugins: [tailwindcss()],
});Criando a busca com JavaScript
No src/main.js, importe o CSS e o JSON, selecione os elementos da tela, filtre os dados pelo termo digitado e renderize os cards de resultado.
A busca precisa de três partes: dados para pesquisar, um input para receber o termo digitado e uma função que filtra os dados e atualiza a tela com os resultados.
Salvando no GitHub
Depois de testar, veja o status, adicione os arquivos, faça commit e envie para o GitHub.
Depois de testar no navegador, use git status para revisar os arquivos alterados antes de adicionar, commitar e enviar para o GitHub.
git status
git add .
git commit -m "Cria buscador simples com Tailwind e JSON"
git push
