Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Mensagem do h1 e p não cabendo na tela

Referente ao curso Lógica de programação: explore funções e listas, no capítulo Reiniciando o jogo e atividade Contando tentativas

por Thamirys Silva Francisco
| 35.9k xp | 10 posts

Mesmo diminuindo o zoom da página a mensagem do h1 e p ficam assim. Como resolver isso? Insira aqui a descrição dessa imagem para ajudar na acessibilidadeMeu código: let numeroSecreto = gerarNumeroAleatorio(); let tentativas = 1

function exibirTextoNaTela(tag, texto) { let campo = document.querySelector(tag); campo.innerHTML = texto; }

exibirTextoNaTela("h1", "Jogo do Número Secreto"); exibirTextoNaTela("p", "Escolha um número entre 1 e 10");

function verificarChute () { let chute = document.querySelector("input").value; if(chute == numeroSecreto) { exibirTextoNaTela("h1","Acertou!"); let palavraTentativas = tentativas > 1? 'tentativas' : 'tentativa'; let mensagemTentativas = Você descobriu o número secreto com ${tentativas} ${palavraTentativas}!; exibirTextoNaTela("p", palavraTentativas); } else { if (chute> numeroSecreto) { exibirTextoNaTela("p", "O número secreto é menor."); }else { exibirTextoNaTela("p", "O número secreto é maior."); } tentativas ++ } }

function gerarNumeroAleatorio() { return parseInt(Math.random() * 10 + 1); }

2 respostas
solução!
por Luis Dias
| 3338.2k xp | 3666 posts
Developer PHP (⌐■_■)

Oi Thamirys,

Analisando o seu código, identifiquei alguns pontos que podem estar causando esse problema de layout 💪.

  1. Viewport: Certifique-se de ter a meta tag viewport no seu HTML.
    • Essa tag é essencial para que a página se adapte a diferentes tamanhos de tela.
    • Adicione <meta name="viewport" content="width=device-width, initial-scale=1.0"> dentro da tag <head> do seu HTML.
  2. CSS: Você pode usar CSS para controlar o tamanho e o comportamento dos elementos na tela.
    • Defina um tamanho máximo para os elementos h1 e p usando a propriedade max-width.
    • Use word-wrap: break-word; para quebrar palavras longas e evitar que elas estourem o container.
    • Exemplo:
h1, p {
  max-width: 80%; /* Ajuste conforme necessário */
  word-wrap: break-word;
}
  1. Responsividade: Utilize media queries para ajustar o layout em diferentes tamanhos de tela.
    • Isso permite que você defina estilos específicos para dispositivos móveis, tablets e desktops.
    • Exemplo:
@media (max-width: 600px) {
  h1 {
    font-size: 1.5em;
  }
  p {
    font-size: 1em;
  }
}
  1. Correção no código JavaScript: No trecho do seu código, a atribuição da mensagem com as tentativas está incorreta.
    • O correto seria:
let mensagemTentativas = `Você descobriu o número secreto com ${tentativas} ${palavraTentativas}!`;
exibirTextoNaTela("p", mensagemTentativas);

🤓 Para saber mais: Configurando a viewport para otimizar sites para dispositivos móveis.

Espero que essas dicas te ajudem a resolver o problema 😊!

📌 Nota: Insira o código usando a ferramenta do fórum, não copie e cole diretamente e não use imagem apenas para mostrar o código! Aprenda a usar a ferramenta em Como turbinar seus estudos utilizando o fórum. código

por Thamirys Silva Francisco
| 35.9k xp | 10 posts

Ajustei o erro do tópico "Correção no código JavaScript" e deu certo!!! Obg. Insira aqui a descrição dessa imagem para ajudar na acessibilidade