Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Boa noite, está dando erro no projeto, acabei de baixar para iniciar o curso mas a foto da IA não aparece, só aparce quando vou em inspecionar, o caminha está correto no HTML. Notei essas msgs no console.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade++++

5 respostas
solução!

Olá, Valdez.

Tudo bem?

Compartilha os códigos dos arquivos HTML, CSS e JavaScript por gentileza, assim fica melhor para uma resposta mais assertiva. Você pode colar eles aqui mesmo sem ser print, assim consigo copiar e testar.

No mais tenta limpar o cache do navegador, verificar o caminho da imagem para ver se está correto, testar em outro navegador também.

Espero ter ajudado de alguma forma. Qualquer dúvida manda aqui. aguardo os códigos. Bons estudos.

O codigo é o mesmo do professor, fui fazendo junto o codigo ta igual. Outra coisa qua achei estranho é que a voz não estava funcionado ai tive que colocar esse link antes da tag ai deu certo, mas o alerta não aparece, para habilitar a voz ou não, o jogo já inicia com a voz da ia. Já olhei tudo o codigo ta igual, não entendi pq o alerta não aparece para habilitar e nem o alerta

.texto__paragrafo {
    font-size: 24px;
}

.container__imagem-pessoa {
    display: none;
}

.container__conteudo {
    display: block;
    position: inherit;
}

.container__informacoes {
    padding: 1rem
}

}
========================================
Js

let listaDeNumerosSorteados = [];

let numeroLimite = 10; let numeroSecreto = gerarNumeroAleatorio(); let tentativas = 1;

function exibirTextoNaTela(tag, texto) { let campo = document.querySelector(tag); campo.innerHTML = texto; responsiveVoice.speak(texto, 'Brazilian Portuguese Female', {rate:1.2}); }

function exibirMensagemInicial() { exibirTextoNaTela('h1', 'Jogo do número secreto'); exibirTextoNaTela('p', 'Escolha um número entre 1 e 10'); }

exibirMensagemInicial();

function verificarChute() { let chute = document.querySelector('input').value;

if (chute == numeroSecreto) {
    exibirTextoNaTela('h1', 'Acertou!');
    let palavraTentativa = tentativas > 1 ? 'tentativas' : 'tentativa';
    let mensagemTentativas = `Você descobriu o número secreto com ${tentativas} ${palavraTentativa}!`;
    exibirTextoNaTela('p', mensagemTentativas);
    document.getElementById('reiniciar').removeAttribute('disabled');
} else {
    if (chute > numeroSecreto) {
        exibirTextoNaTela('p', 'O número secreto é menor');
    } else {
        exibirTextoNaTela('p', 'O número secreto é maior');
    }
    tentativas++;
    limparCampo();
}

}

function gerarNumeroAleatorio() { let numeroEscolhido = parseInt(Math.random() * numeroLimite + 1); let quantidadeDeElementosNaLista = listaDeNumerosSorteados.length;

if (quantidadeDeElementosNaLista == numeroLimite) {
    listaDeNumerosSorteados = [];
}
if (listaDeNumerosSorteados.includes(numeroEscolhido)) {
    return gerarNumeroAleatorio();
} else {
    listaDeNumerosSorteados.push(numeroEscolhido);
    console.log(listaDeNumerosSorteados)
    return numeroEscolhido;
}

}

function limparCampo() { chute = document.querySelector('input'); chute.value = ''; }

function reiniciarJogo() { numeroSecreto = gerarNumeroAleatorio(); limparCampo(); tentativas = 1; exibirMensagemInicial(); document.getElementById('reiniciar').setAttribute('disabled', true) } CSS

* {
box-sizing: border-box;
margin: 0;
padding: 0;
color: white;

}

body { background: linear-gradient(#1354A5 0%, #041832 33.33%, #041832 66.67%, #01080E 100%); height: 100vh; display: flex; align-items: center; justify-content: center; }

body::before { background-image: url("img/code.png"); background-repeat: no-repeat; background-position: right; content: ""; display: block; position: absolute; width: 100%; height: 100%; opacity: 0.4; }

.container { width: 80%; height: 80%; display: flex; align-items: center; justify-content: space-between; border-radius: 24px; border: 1px solid #1875E8; box-shadow: 4px 4px 20px 0px rgba(1, 8, 14, 0.15); background-image: url("img/Ruido.png"); background-size: 100% 100%; position: relative; }

.container__conteudo { display: flex; align-items: center; position: absolute; bottom: 0; }

.container__informacoes { flex: 1; padding: 3rem; }

.container__botao { border-radius: 16px; background: #1875E8; padding: 16px 24px; width: 100%; font-size: 24px; font-weight: 700; border: none; margin-top: 2rem; }

.container__texto { margin: 16px 0 16px 0; }

.container__texto-azul { color: #1875E8; }

.container__input { width: 100%; height: 72px; border-radius: 16px; background-color: #FFF; border: none; color: #1875E8; padding: 2rem; font-size: 24px; font-weight: 700; font-family: 'Inter', sans-serif; }

.container__botoes { display: flex; gap: 2em; }

h1 { font-family: 'Chakra Petch', sans-serif; font-size: 72px; padding-bottom: 3rem; }

p, button { font-family: 'Inter', sans-serif; }

.texto__paragrafo { font-size: 32px; font-weight: 400; }

button:disabled { background-color: gray; }

@media screen and (max-width: 1250px) {

h1 {
    font-size: 50px;
}

.container__botao {
    font-size: 16px;
}


.texto__paragrafo {
    font-size: 24px;
}

.container__imagem-pessoa {
    display: none;
}

.container__conteudo {
    display: block;
    position: inherit;
}

.container__informacoes {
    padding: 1rem
}

}
<div class="container">
    <div class="container__conteudo">
        <div class="container__informacoes">
            <div class="container__texto">
                <h1>Adivinhe o <span class="container__texto-azul">numero secreto</span></h1>
                <p class="texto__paragrafo">Escolha um número entre 1 a 10</p>
            </div>
            <input type="number" min="1" max="10" class="container__input">
            <div class="chute container__botoes">
                <button onclick="verificarChute()" class="container__botao">Chutar</button>
                <button onclick="reiniciarJogo()" id="reiniciar" class="container__botao" disabled>Novo jogo</button>
            </div>
        </div>
        <img src="./img/ia.png" alt="Uma pessoa olhando para a esquerda" class="container__imagem-pessoa" />
    </div>
</div>

<script src="app.js" defer></script>
<script src="https://code.responsivevoice.org/responsivevoice.js?key=cJcrQ6be"></script>

Opa, Valdez.

Eu testei o projeto com os seus códigos e funcionou perfeitamente, eu baixei o projeto do curso, e troquei todos códigos (HTML, CSS, JS) pelos seus e funcionou, a única coisa que manti foi a pasta "img" do curso.

No código do CSS tem o @media screen and (max-width: 1250px), com um display: none; na classe da imagem .container__imagem-pessoa, pode ser que sua tela seja menor que isso e a imagem desaparece por causa dessa regra, no caso isso é feito para a imagem sumir mesmo em dispositivos menores incluindo tablets e celulares. Para resolver você pode diminuir um pouco esse valor do @media screen and (max-width: 1250px), para 1000 ou até menos, para testar.

Qualquer novidade manda aqui por gentileza.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.Bons Estudos!