Aula 21
Mensagem de Vitória pro Jogo da Velha em HTML, CSS, e JavaScript
Summary
# Resumo do Transcrito
No trecho discutido, a tarefa é adicionar uma `div` ao arquivo `index.html` para exibir mensagens sobre o jogo. Seguem os passos mencionados:
1. **Adicionar Div para Mensagens**:
- Criar uma `div` com o `id` "mensagem" após o tabuleiro.
- Deixar essa `div` inicialmente sem conteúdo.
2. **Atualizar o Script**:
- No código de verificação de vitória, ao definir o vencedor, utilizar `document.getElementById` para selecionar a `div` "mensagem".
- Armazenar essa `div` em uma variável chamada `mensagem`.
- Atualizar o `textContent` da variável para mostrar a mensagem de vitória, que “Vitória ao jogador X”.
3. **Estilo Opcional**:
- Sugestão para adicionar estilo na `folha de estilos`, como aumentar o tamanho da fonte para 24px e mudar a cor para verde (#00ff00).
- Opção para centralizar o texto e fazer ajustes estéticos conforme desejado.
O trecho termina com um incentivo ao usuário para personalizar ainda mais a apresentação das mensagens.
Video Transcript
Vamos voltar aqui a index.html na estrutura. Depois do tabuleiro vamos adicionar uma diva
e eu vou dar ID mensagem, tá? E dentro dessa diva a gente vai poder mostrar a mensagem,
tá bom? Então deixa a diva aqui sem nada, nenhum conteúdo. Então vamos aqui no script.
Quando você venceu o jogo vamos adicionar um mensagem aqui e mostrar na tela, tá? Então
vamos aqui no check a vitória, depois que define o vencedor. Nós vamos usar o document.getElement
para... vai adi para poder selecionar aquela div com mensagem. O id vai ser mensagem, tá?
E essa... vou criar a variável mensagem para pôr esse cara dentro. E nessa variável eu vou falar
mensagem.textContent, conteúdo de texto. Eu vou dizer que essa mensagem aqui vitória ao jogador,
jogador, tá? Vou usar concatenação com espaço aqui. Eu tiro o console logo. Então vamos ver
o que dá vitória. Opa. Tá, então apareceu aqui a mensagem vitória ao jogador x, acabou o jogo,
tá? A gente pode tirar ainda o vencedor essa mensagem. Então ele vai pegar aquela div com
mensagem e adicionar o conteúdo de texto, vitória ao jogador x ou bola. Olha o do bola agora. Ah, desculpa.
Quer fazer bola? Tá bom? Então você pode adicionar estilo aqui se você quiser, só ir na folha de
estilos. Pode tudo isso, mensagem com id, font size aumentar, sei lá, 24 e cor verde, 00 ff 00,
red green que é verde. Tá bom? Zacona muito boa, mas... Pode até centralizar o texto, essas coisas.
Deixa como é o exercício para você fazer, tá bom? Então, graças a ela só e até a próxima.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: