App de Versículos Diários Aleatórios com HTML, CSS e JS para Iniciantes

  Bem-vindo(a) ao post no blog.  



Imagine abrir uma página e receber, instantaneamente, um versículo diferente da Bíblia  a cada clique, uma nova palavra de Deus. 🙏✨

Parece complexo? Não é. Com apenas HTML, CSS e JavaScript puro sem frameworks, sem bibliotecas externas  você consegue criar esse projeto em menos de uma hora.

Neste tutorial da Academy Code Christ, vamos construir do zero um App de Versículos Aleatórios  bonito, funcional e com propósito. Vamos nessa? ✝️💻

🎯 O Que Vamos Criar?

Um app web com as seguintes funcionalidades:

  • ✅ Exibe um versículo bíblico aleatório ao carregar a página
  • ✅ Botão "Novo Versículo" que sorteia outro versículo
  • ✅ Mostra o livro, capítulo e versículo de referência
  • ✅ Design bonito e responsivo
  • ✅ Botão de compartilhar no WhatsApp

🛠️ O Que Você Vai Usar

Tecnologia Para quê?
🌐 HTML5 Estrutura da página
🎨 CSS3 Visual e responsividade
⚡ JavaScript Lógica de sorteio dos versículos

📁 Passo 1 — Estrutura de Arquivos

Crie uma pasta chamada versiculos-app com estes arquivos:

versiculos-app/
├── index.html
├── style.css
└── script.js

🌐 Passo 2 — O HTML (index.html)

Cole este código no seu index.html:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
  <title>Versículo do Dia ✝️</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="card">
    <div class="cruz">✝️</div>
    <h1>Versículo do Dia</h1>
    
    <blockquote id="versiculo"></blockquote>
    <p id="referencia"></p>

    <div class="botoes">
      <button onclick="novoVersiculo()">
        🔄 Novo Versículo
      </button>
      <button id="btnWhats" 
              class="whats">
        💬 Compartilhar
      </button>
    </div>
  </div>

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

🎨 Passo 3 — O CSS (style.css)

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

body {
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #5b0000, #1a0000);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.card {
  background: white;
  border-radius: 20px;
  padding: 40px;
  max-width: 600px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.cruz {
  font-size: 3em;
  margin-bottom: 10px;
}

h1 {
  color: #5b0000;
  font-size: 1.5em;
  margin-bottom: 25px;
}

blockquote {
  font-size: 1.15em;
  color: #333;
  font-style: italic;
  border-left: 4px solid #5b0000;
  padding-left: 20px;
  text-align: left;
  margin: 20px 0;
  line-height: 1.8;
}

#referencia {
  color: #5b0000;
  font-weight: bold;
  margin-bottom: 25px;
}

.botoes {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

button {
  background: #5b0000;
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 50px;
  cursor: pointer;
  font-size: 0.95em;
  font-family: 'Poppins', sans-serif;
  transition: transform 0.2s, opacity 0.2s;
}

button:hover {
  opacity: 0.85;
  transform: scale(1.05);
}

.whats {
  background: #25D366 !important;
}

⚡ Passo 4 — O JavaScript (script.js)

// Base de versículos bíblicos
const versiculos = [
  {
    texto: "Porque Deus amou o mundo de tal maneira que deu o seu Filho unigênito, para que todo aquele que nele crê não pereça, mas tenha a vida eterna.",
    ref: "João 3:16 — NVI"
  },
  {
    texto: "O Senhor é o meu pastor, nada me faltará.",
    ref: "Salmos 23:1 — NVI"
  },
  {
    texto: "Posso tudo naquele que me fortalece.",
    ref: "Filipenses 4:13 — NVI"
  },
  {
    texto: "Confie no Senhor de todo o seu coração e não se apoie em seu próprio entendimento.",
    ref: "Provérbios 3:5 — NVI"
  },
  {
    texto: "Sede fortes e corajosos. Não temais, nem vos atemorizeis diante deles.",
    ref: "Deuteronômio 31:6 — NVI"
  },
  {
    texto: "Buscai primeiro o reino de Deus e a sua justiça, e todas essas coisas vos serão acrescentadas.",
    ref: "Mateus 6:33 — NVI"
  },
  {
    texto: "Não anseie pelo amanhã, pois o amanhã trará suas próprias preocupações.",
    ref: "Mateus 6:34 — NVI"
  },
  {
    texto: "Tudo posso naquele que me fortalece.",
    ref: "Filipenses 4:13 — NVI"
  },
  {
    texto: "O amor é paciente, o amor é bondoso. Não inveja, não se vangloria, não se orgulha.",
    ref: "1 Coríntios 13:4 — NVI"
  },
  {
    texto: "Porque sou eu que conheço os planos que tenho para vocês, diz o Senhor, planos de fazê-los prosperar.",
    ref: "Jeremias 29:11 — NVI"
  }
];

// Função principal
function novoVersiculo() {
  const indice = Math.floor(
    Math.random() * versiculos.length
  );
  
  const escolhido = versiculos[indice];
  
  document.getElementById('versiculo')
    .textContent = `"${escolhido.texto}"`;
  
  document.getElementById('referencia')
    .textContent = `📖 ${escolhido.ref}`;

  // Atualiza link WhatsApp
  const mensagem = encodeURIComponent(
    `✝️ "${escolhido.texto}" — ${escolhido.ref}\n\nAcesse mais versículos em: https://www.academycodechrist.com.br`
  );
  
  document.getElementById('btnWhats').onclick = () => {
    window.open(
      `https://wa.me/?text=${mensagem}`, 
      '_blank'
    );
  };
}

// Carrega um versículo ao abrir a página
novoVersiculo();

📚 O Que Você Aprendeu?

📦 Arrays no JS
Como armazenar e acessar coleções de dados
🎲 Math.random()
Como gerar números aleatórios em JavaScript
🖱️ DOM Manipulation
Como alterar o conteúdo da página via JS
🎨 CSS Moderno
Flexbox, gradientes e botões estilizados

✝️ Pequeno Projeto, Grande Propósito

Esse app parece simples mas esconde algo poderoso: ele distribui a Palavra de Deus através do código.

Cada linha que você escreveu hoje tem o potencial de impactar alguém que vai abrir essa página e ler exatamente o versículo que precisava. Isso é tecnologia com propósito. 🙏

Desafio: Adicione mais versículos ao array e compartilhe o app com sua família e amigos no WhatsApp!

🚀 Quer ir além?

No próximo projeto vamos criar um Quiz Bíblico interativo — ainda mais divertido e desafiador!

📖 Ver todos os projetos

Esse conteúdo faz parte do projeto Academy Code Christ, criado para ajudar iniciantes a aprender programação de forma gratuita e direta.

Se esse conteúdo te ajudou, você pode me pagar um café ☕Pix: antropologiacrista@gmail.com

Comentários

Postar um comentário

Postagens mais visitadas