Criar uma aplicação simples que permite ao usuário inserir dois números e calcular a soma de todos os números entre eles, desde que o segundo número seja maior que o primeiro.
Criação do Arquivo HTML (Interface de Usuário):
O arquivo index.html define a interface gráfica da aplicação, ou seja, o que será exibido no navegador para o usuário interagir.
Explicação do código HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Soma de Números</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
#resultado {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Cálculo da Soma de Números</h1>
<label for="numero1">Digite um número:</label>
<input type="number" id="numero1" placeholder="Primeiro número"><br><br>
<label for="numero2">Digite outro número maior que o primeiro:</label>
<input type="number" id="numero2" placeholder="Segundo número"><br><br>
<button id="calcular">Calcular Soma</button>
<div id="resultado"></div>
<script src="script.js"></script>
</body>
</html>
Explicação dos elementos:
input:
type="number": Define que o campo de entrada é numérico, ajudando o usuário a inserir apenas números.id="numero1" e id="numero2": Identificadores que permitem capturar os valores inseridos nesses campos.button: O botão que o usuário clica para realizar a soma.div#resultado: Aqui será mostrado o resultado ou mensagem de erro.<script src="script.js"></script>: Importa o arquivo JavaScript que contém a lógica da aplicação.A função de soma irá somar todos os números entre os dois valores inseridos. Aqui, usamos um for para iterar entre o valor de numero1 e numero2 e somá-los.
Explicação do código JavaScript (script.js):
document.getElementById('calcular').addEventListener('click', () => {
const numero1 = parseInt(document.getElementById('numero1').value);
const numero2 = parseInt(document.getElementById('numero2').value);
const resultadoDiv = document.getElementById('resultado');
// Validação das entradas
if (isNaN(numero1) || isNaN(numero2)) {
resultadoDiv.textContent = 'Erro: Insira números válidos!';
resultadoDiv.style.color = 'red';
return;
}
if (numero2 <= numero1) {
resultadoDiv.textContent = 'Erro: O segundo número deve ser maior que o primeiro!';
resultadoDiv.style.color = 'red';
return;
}
// Função de soma
const somaAte = (inicio, fim) => {
let soma = 0;
for (let i = inicio; i <= fim; i++) {
soma += i;
}
return soma;
};
// Calcula e exibe o resultado
const resultado = somaAte(numero1, numero2);
resultadoDiv.textContent = `Resultado da soma de ${numero1} até ${numero2}: ${resultado}`;
resultadoDiv.style.color = 'green';
});
Detalhamento do código:
document.getElementById('numero1').value: Captura o valor inserido no campo de texto com o ID numero1.parseInt(): Converte o valor capturado para um número inteiro. Se o valor não for um número, o parseInt retornará NaN.isNaN(numero1) || isNaN(numero2): Verifica se algum dos valores não é um número. Caso um dos valores seja inválido, o código exibe uma mensagem de erro e não faz o cálculo.numero2 <= numero1: Verifica se o segundo número é maior que o primeiro. Caso contrário, exibe uma mensagem de erro.somaAte(inicio, fim) utiliza um loop for para somar todos os números entre o valor inicial (numero1) e final (numero2).soma += i: A cada iteração, o número i é somado à variável soma.div#resultado. A cor da mensagem é alterada conforme o resultado (verde para sucesso, vermelho para erro).