Oi, Davi! Tudo bem?

É muito bacana poder acompanhar você buscando melhorar seus projetos e implementar novas funcionalidades. Isso é um sinal de um bom desenvolvedor!

Para adicionar um botão que insere um número de gols aleatórios no input, podemos criar um botão em HTML e adicionar um evento de clique a ele usando JavaScript, de acordo com os códigos abaixo:

<button id="gerarGols">Gerar gols</button>
<input id="placar" type="text">

document.getElementById('gerarGols').addEventListener('click', function() {
    var gols = Math.floor(Math.random() * 10); // gera um número de gols aleatório de 0 a 9
    document.getElementById('placar').value = gols;
});

Quanto à organização do texto, podemos usar template strings para formatar o texto de uma maneira mais legível. Por exemplo:

var time1 = 'Time A';
var golsTime1 = 3;
var time2 = 'Time B';
var golsTime2 = 2;

var placar = `${time1} ${golsTime1} x ${golsTime2} ${time2}`;
console.log(placar); // Time A 3 x 2 Time B

Espero ter ajudado! Caso tenha ficado alguma dúvida, sinta-se à vontade em comunicar, estou à disposição!

Um forte abraço e bons estudos!

Oi, Sarah! Obrigado por ter respondido, eu ainda vou trabalhar em cima desse código que você me passou, mas eu gostaria de tirar uma dúvida:

O que significam esses símbolos '${ } na linguagem de programação? É a segunda vez que eu vejo ele, mas eu não sei o que faz.

Oi, Davi! Espero que esteja tudo bem por aí!

Os símbolos '${ }' são uma sintaxe que usamos dentro de strings que incluem valores de variáveis para criar uma mensagem personalizada. Por exemplo:

const nome = "João";
const saudacao = `Olá, ${nome}!`;
console.log(saudacao); // Isso irá imprimir: "Olá, João!"

Dessa forma, podemos alterar a variável a qualquer momento, consequentemente a mensagem impressa na tela, assim, conseguimos manipular o conteúdo da nossa string de maneira mais fácil.

Espero ter ajudado na compreensão! Um abração!

Boa tarde, comunidade Alura!

Primeiramente, muito obrigado por me responder Sarah.

Eu consegui aprimorar o código do simulador de placar pra deixar ele mais funcional, mas eu sei que provavelmente deve ter alguns meios pra editar ele tornando-o mais atrativo esteticamente (como por exemplo, movimentar o botão pra deixar ele no centro no placar embaixo dos inputs).

Vou deixar ele aqui pra vocês saberem o que eu já fiz, e peço a análise de vocês pra ver aonde eu posso melhorar o código, por favor.

<meta charset = "UTF-8">

<button id="gerarGols">gols Gerar</button>

<script>

function mostra(frase){

    document.write(frase);
}

var time1 = prompt("Digite o nome do time1");

mostra(time1);

</script>



<input id="placar1" type="text">


<script>

function geraGols1(){

document.getElementById('gerarGols').addEventListener('click', function() {
    var gols = Math.floor(Math.random() * 5); // gera um número de gols aleatório de 0 a 5
    document.getElementById('placar1').value = gols;

})


}

var geraGols1 = geraGols1();

</script>

X

<input id="placar2" type="text">

<script>

function geraGols2(){

document.getElementById('gerarGols').addEventListener('click', function() {
    var gols = Math.floor(Math.random() * 5); // gera um número de gols aleatório de 0 a 5
    document.getElementById('placar2').value = gols;

})

}

var geraGols2 = geraGols2();

</script>

<script>

function mostra(frase){

    document.write(frase);
}

var time2 = prompt("Digite o nome do time2");

mostra(time2);

</script>