Gerador de Cartão de Saudação Aleatória

Introdução

Neste projeto, você aprenderá como criar um cartão de felicitações de feriado que exibe saudações aleatórias quando o botão "Escrever" é clicado. Este projeto ajudará você a entender como trabalhar com funções JavaScript, ouvintes de eventos (event listeners) e manipulação do DOM.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar o ambiente do projeto
• Como implementar uma função para selecionar aleatoriamente uma saudação de um array pré-definido
• Como implementar uma função para exibir a saudação selecionada no cartão de felicitações
• Como adicionar um ouvinte de evento (event listener) ao botão "Escrever" para acionar a exibição da saudação

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Usar funções JavaScript para gerar conteúdo aleatório
• Manipular o DOM para atualizar o conteúdo de um elemento HTML
• Adicionar ouvintes de eventos (event listeners) para acionar ações específicas
• Trabalhar com uma estrutura de projeto fornecida e seguir instruções passo a passo

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga as etapas abaixo para concluir esta etapa:

Abra a pasta do projeto. A estrutura de diretórios é a seguinte:

├── index.css
├── index.html
└── index.js

Onde:

• index.css é o arquivo de estilo para este desafio.
• index.js é o arquivo JavaScript que precisa ser completado para este desafio.
• index.html é a página do cartão de felicitações.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Implementar a Função writeGreeting()

Nesta etapa, você implementará a função writeGreeting() para selecionar aleatoriamente uma saudação do array greetings fornecido.

1. Abra o arquivo index.js.
2. Localize a função writeGreeting() e substitua o comentário // TODO pelo seguinte código:

return greetings[Math.floor((Math.random() * 10) % greetings.length)];

Este código gera um índice aleatório dentro do array greetings e retorna a saudação correspondente.

Implementar a Função show()

Nesta etapa, você implementará a função show() para exibir a saudação no elemento greetingDisplay.

1. Abra o arquivo index.js.
2. Localize a função show() e substitua o comentário // TODO pelo seguinte código:

greetingDisplay.innerHTML = writeGreeting();

Este código chama a função writeGreeting() para obter uma saudação aleatória e, em seguida, define o innerHTML do elemento greetingDisplay para exibir a saudação.

3. Salve o arquivo index.js.
4. Atualize a visualização "Web 8080" na VM para ver o cartão de felicitações em ação. Clique no botão "Write" para exibir uma saudação aleatória.

Parabéns! Você concluiu o projeto Cartão de Felicitações de Fim de Ano.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.