Olá!! Fiz algumas mudanças no html e na lógica do código só parea teinar... Espero que gostem..
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teclado Telefone</title>
<link rel="stylesheet" href="/css/estilos.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<h1> Alura Fone </h1>
<input type="tel" placeholder="Digite seu telefone" id="telefone">
<section class="teclado">
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="6">
<input type="button" value="7">
<input type="button" value="8">
<input type="button" value="9">
<input type="button" value="*">
<input type="button" value="0">
<input type="button" value="#">
<button type="button" onclick=""><i class="fa-solid fa-phone"></i> Ligar</button>
</section>
</body>
<script src="/js/scripts.js"></script>
</html>
scripts
//Alura Fone
//adicionando um ouvinte de eventos ao documento HTML
document.addEventListener("DOMContentLoaded", function() {
//criando variáveis para identificar botões e teclado
const inputTelefone = document.getElementById('telefone');
const botoesTeclado = document.querySelectorAll('.teclado input[type="button"]');
const botaoLigar = document.querySelector('.teclado button');
// Adiciona um evento de escuta para cada botão do teclado
botoesTeclado.forEach(botao => {
botao.addEventListener('click', function() {
// Adiciona o valor do botão clicado ao valor do input
inputTelefone.value += botao.value;
});
});
// Adiciona um evento de clique ao botão "Ligar"
botaoLigar.addEventListener('click', function() {
const numeroDigitado = inputTelefone.value;
if(numeroDigitado == ''){
alert('Digite um telefone para ligar!')
}else{
const numeroDigitado = inputTelefone.value;
alert("Ligando para " + numeroDigitado);
}
});
});
