Tutorial: Criando um Site com Informações de Todos os Países Usando HTML, CSS e JavaScript

Você já imaginou criar um site interativo que mostra dados atualizados sobre todos os países do mundo? Neste tutorial completo, você vai aprender passo a passo como desenvolver uma aplicação web moderna usando HTML, CSS e JavaScript, consumindo dados em tempo real da poderosa REST Countries API.

Ao final, você terá um site funcional com busca, filtro por região, modo escuro e layout totalmente responsivo!

Prévia do Projeto

Veja o vídeo no YouTube:

Veja abaixo como o site fica após finalizado:

Link ao vivo: Acessar Projeto

Recursos que o Site Oferece

Pesquisa de países por nome
Filtro por região (Américas, Europa, Ásia etc.)
Exibição de:
- Bandeira
- Nome oficial
- Capital
- População
- Moeda
- Região
Alternância entre modo claro e escuro
Layout responsivo para dispositivos móveis

Tecnologias Utilizadas

HTML5 para estrutura
CSS3 para design e responsividade
JavaScript moderno (ES6+) para lógica e interatividade
REST Countries API como fonte de dados

Estrutura do Projeto

Crie uma pasta com os seguintes arquivos:

Paises-do-mundo/
├── index.html
├── style.css
├── script.js
└── logo.png (opcional)

Link para baixar as imagens: assets/img

1. Criando o HTML

O HTML define a estrutura principal da página. Incluímos campos de busca, seletor de região e um botão para alternar o modo escuro.



<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta name="description" content="Explore informações detalhadas sobre todos os países do mundo, incluindo bandeiras, capitais, população e moedas.">
  <meta name="author" content="Antônio Nascimento">
  <meta name="robots" content="index, follow">
  <link rel="icon" href="assets/img/favicon.png" type="image/png" />
  <title>Países do Mundo - Informações de todos os países</title>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>
<body>
  <header>
    <img src="assets/img/logo.png" alt="Países do Mundo" class="logo" />
    <h1 class="sr-only">Países do Mundo</h1>
    <button id="toggleDark" title="Tema Escuro/Claro"><i class="fas fa-moon"></i></button>
  </header>

  <main>
    <div class="controles">
      <input type="text" id="inputPais" placeholder="Digite o nome de um país..." />
      <button id="btnPesquisar" title="Pesquisar"><i class="fas fa-search"></i></button>
      <select id="regionSelect">
        <option value="africa">África</option>
        <option value="americas" selected>Américas</option>
        <option value="asia">Ásia</option>
        <option value="europe">Europa</option>
        <option value="oceania">Oceania</option>
        <option value="antarctic">Antártica</option>
      </select>
    </div>
    <div id="paisesContainer"></div>
  </main>

  <script src="script.js"></script>
</body>
</html>

2. Estilizando com CSS

Vamos aplicar um design limpo, responsivo e moderno, com suporte a modo escuro:



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f6f5f3;
  color: #222;
  transition: background-color 0.3s, color 0.3s;
}

header {
  background-color: #f6f5f3;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}

header .logo {
  width: 160px;
  height: auto;
}

header h1.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#toggleDark {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #333;
  transition: color 0.3s;
}

body.dark #toggleDark {
  color: #ffa726;
}

.controles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 20px;
}

input, select {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 16px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

input:focus,
select:focus {
  outline: none;
  border-color: #a35d00;
  box-shadow: 0 0 0 3px rgba(163, 93, 0, 0.2);
}

body.dark input:focus,
body.dark select:focus {
  border-color: #ffa726;
  box-shadow: 0 0 0 3px rgba(255, 167, 38, 0.2);
}

.controles button {
  padding: 10px 15px;
  font-size: 1.2rem;
  background-color: #a35d00;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.controles button i {
  pointer-events: none;
}

.controles button:hover {
  background-color: #874b00;
}

body.dark .controles button {
  background-color: #ffa726;
  color: #000;
}

body.dark .controles button:hover {
  background-color: #ff9800;
}

#paisesContainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  padding: 20px;
}

.pais-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 15px;
  text-align: center;
  transition: transform 0.3s;
}

.pais-card:hover {
  transform: scale(1.04);
}

.pais-card img {
  width: 100%;
  max-width: 380px;
  height: auto;
  margin-bottom: 10px;
  border-radius: 8px;
  object-fit: contain;
}

.pais-card h2 {
  font-size: 1rem;
  margin-bottom: 8px;
}

.pais-card p {
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: left;
}

@media (max-width: 768px) {
  .pais-card h2 {
  font-size: 1.8rem;
  margin-bottom: 8px;
}
  
.pais-card p {
  font-size: 0.95rem;
  line-height: 1.4;
  text-align: left;
 }
}

body.dark {
  background-color: #121212;
  color: #f1f1f1;
}

body.dark header {
  background-color: #1f1f1f;
}

body.dark .controles input,
body.dark .controles select {
  background-color: #2b2b2b;
  color: #fff;
  border: 1px solid #444;
}

body.dark .pais-card {
  background-color: #1e1e1e;
}

Dica: Adapte cores e estilos conforme o seu gosto! O importante é manter a usabilidade e boa leitura.

3. Lógica com JavaScript

Agora vem a parte interativa! Usamos fetch para consumir os dados da API, aplicamos filtros e renderizamos os países dinamicamente.



const input = document.getElementById('inputPais');
const btnPesquisar = document.getElementById('btnPesquisar');
const regionSelect = document.getElementById('regionSelect');
const paisesContainer = document.getElementById('paisesContainer');
const toggleDark = document.getElementById('toggleDark');

let todosPaises = [];

// Fetch inicial da API
fetch('https://restcountries.com/v3.1/all?lang=pt')
  .then(res => res.json())
  .then(data => {
    todosPaises = data;
    mostrarPorRegiao('americas');
  });

function criarCard(pais) {
  const nome = pais.translations.por?.common || pais.name.common;
  const capital = pais.capital?.[0] || 'N/A';
  const populacao = pais.population.toLocaleString('pt-BR');
  const moeda = pais.currencies ? Object.values(pais.currencies)[0].name : 'N/A';
  const regiao = pais.region;
  const bandeira = pais.flags.svg;

  return `
    
      ${nome}
      
      Capital: ${capital}
      População: ${populacao}
      Moeda: ${moeda}
      Região: ${regiao}
    
  `;
}

function mostrarPaises(lista) {
  paisesContainer.innerHTML = lista.map(criarCard).join('');
}

function mostrarPorRegiao(regiao) {
  const filtrados = todosPaises.filter(p => p.region.toLowerCase() === regiao.toLowerCase());
  mostrarPaises(filtrados);
}

function buscarPorNome(texto) {
  const termo = texto.trim().toLowerCase();
  const resultados = todosPaises.filter(p => {
    const nome = p.translations.por?.common || p.name.common;
    return nome.toLowerCase().startsWith(termo);
  });
  mostrarPaises(resultados);
}

btnPesquisar.addEventListener('click', () => {
  buscarPorNome(input.value);
});

input.addEventListener('input', () => {
  buscarPorNome(input.value);
});

input.addEventListener('keydown', e => {
  if (e.key === 'Enter') {
    buscarPorNome(input.value);
  }
});

regionSelect.addEventListener('change', () => {
  mostrarPorRegiao(regionSelect.value);
});

toggleDark.addEventListener("click", () => {
  document.body.classList.toggle("dark");
  const icon = toggleDark.querySelector("i");
  icon.classList.toggle("fa-moon");
  icon.classList.toggle("fa-sun");
});

Melhorias Possíveis

Adicionar mapa com localização do país
Permitir busca por capital ou código ISO
Salvar modo escuro com localStorage
Traduzir todos os campos manualmente
Paginação para grandes listas

Conclusão

Com poucos arquivos e um pouco de JavaScript, conseguimos criar um site incrível que fornece dados reais de todos os países do mundo. Esse projeto é excelente para praticar consumo de APIs, responsividade, modo escuro e muito mais.

Gostou deste projeto? Deixe seu comentário, compartilhe com seus amigos devs e não se esqueça de visitar o repositório:

GitHub: https://github.com/Ninja1375/Paises_do_mundo

Programar Tudo - Blog de Programação

Pesquisar este blog