Desafio: hora da prática \\ Curso 2 \\ Funções

Altere o conteúdo da tag h1 com document.querySelector e atribua o seguinte texto: Hora do Desafio.

let titulo = document.querySelector ('h1');
titulo.innerHTML = 'Hora do Desafio!';

Observação: Encontrei no forum da plataforma um debate entre outros alunos, da utilização correta do innerHTML ou do textContent. Para o nosso exemplo onde não é possivel manipular os dados como no caso do prompt(), resolvi deixar como foi explicado nos vídeos de orientação pelos professores. Cheguei até fazer algumas simulações incluindo ou tentando alterar a cor de uma das palavras que seria interessante para o aprendizado, porém essas pequenas alterações desencadeariam outras modificações no código css, na tentativa de isolar somente aquele ponto, e deixar restante no padrão que já foi definido. No entanto como ainda estou no início resolvi não me aventurar por esses campos ainda. Foi interessante entender a diferença de uso entre eles.

Crie uma função que exiba no console a mensagem O botão foi clicado sempre que o botão Console for pressionado2

index.html
<button onclick="verificaConsole()" class="button">Console</button>

app.js
function verificaConsole() {
    console.log('O botão foi clicado com sucesso!');
}

Crie uma função que exiba um alerta com a mensagem: Eu amo JS, sempre que o botão Alerta for pressionado

index.html

 <button onclick="showAlerta()" class="button">Alert</button>

app.js

function showAlerta() {
    alert('Eu amo JS!');
}

Crie uma função que é executada quando o botão prompt é clicado, perguntando o nome de uma cidade do Brasil. Em seguida, exiba um alerta com a mensagem concatenando a resposta com o texto: Estive em {cidade} e lembrei de você.

index.tml
<button onclick="nomeCidade()" class="button">Prompt</button>

app.js
function nomeCidade() {
    let cidade = prompt('Digite uma cidade brasileira:');
    const regexCidade = /^[a-zA-Z\sçÇãÃáÁéÉíÍóÓúÚêÊôÔâÂ~-]+$/;
    // Faz a verificação
    if (cidade && regexCidade.test(cidade)) {
        // Se a cidade foi digitada e o texto é válido (contém apenas letras/espaços)
        alert(`Estive em ${cidade}, e lembrei de você.`);
    } else if (cidade) {
        // Se a pessoa digitou algo, mas não passou na validação (ex: "12345")
        alert('Por favor, digite um nome de cidade válido (apenas letras).');
    } else {
        // Se a pessoa clicou em Cancelar ou deixou vazio
        alert('Você cancelou ou não digitou uma cidade.');
    }
}

Observação: Da mesma forma como aconteceu nos exercícios anteriores, onde na busca por mais informações no forum me deparei com conceitos que não foram apresentados no vídeo. Achei interessante trazer para enriquecer o meu script outros detalhes. Nesse caso o uso do const regexCidade.

Ao clicar no botão soma, peça 2 números inteiros e exiba o resultado da soma em um alerta.

index.html
<button onclick="somaValor()" class="button">Soma</button>

app.js
function somaValor() {
    let valor1 = parseInt(prompt(`Vamos somar!\n Digite o primeiro número:`));
    let valor2 = parseInt(prompt(`E qual será o segundo número para a soma?`));
    let vTotal = (valor1+valor2);

    if (isNaN(vTotal)) {
        alert('Operação cancelada ou entrada inválida. Por favor, digite apenas números.');
        return;
    }
    alert(`Feito! Somando ${valor1} e ${valor2}, chegamos ao total de ${vTotal}.`);
}