Segue o exercicio para analise
Versão 1, apenas JS
function calcularCustoViagem(distancia, eficiencia, precoGasolina, velocidadeMedia) {
let tempoViagem = distancia / velocidadeMedia;
let consumoCombustivel = distancia / eficiencia;
let custoTotal = consumoCombustivel * precoGasolina;
return custoTotal;
}
console.log(calcularCustoViagem(1800,50,2.5,90))
Versão 2 com html + css JS
function calcularCustoViagem(distancia, eficiencia, precoGasolina, velocidadeMedia) {
let tempoViagem = (document.getElementById("distancia").value /document.getElementById("velocidadeMedia").value);
console.log(`${tempoViagem}`);
let consumoCombustivel =(document.getElementById("distancia").value /document.getElementById("eficiencia").value);
console.log(`${consumoCombustivel}`);
let custoTotal = (consumoCombustivel * document.getElementById("precoGasolina").value);
console.log(`${custoTotal}`);
let resultado1 = (`O tempo da viagem foi: ${tempoViagem} horas`);
let resultado2 = (` e custou: R$ ${custoTotal} `)
resultado = document.getElementById("h1").innerHTML = resultado1 + resultado2;
return resultado;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<header>
<h1 id="h1">Calculo de distancia</h1>
</header>
<main class="container">
<input type="text" id="distancia"><br>
<input type="text" id="eficiencia"><br>
<input type="text" id="precoGasolina"><br>
<input type="text" id="velocidadeMedia"><br>
<button onclick="calcularCustoViagem()" id="calcula" class="button">Registra</button>
</main>
<!--<button onclick="" class="button">Alert</button>
<button onclick="" class="button">Prompt</button>
<button onclick="" class="button">Soma</button>-->
<script src="app.js"></script>
</body>
</html>
CSS
header {
text-align: center;
font-size: 30px;
color: #279EFF;
}
main, html {
margin: 0;
padding: 0;
height: 50%;
display: flex;
justify-content: center;
align-items: center;
background-color: #0C356A;
}
.container {
text-align: center;
color: #279EFF;
}/*
.container input{
display: block; // Cada input em uma linha
margin: 10px 0; // Espaçamento vertical
}*/
.button {
padding: 10px 20px;
margin: 10px;
font-size: 24px;
border: none;
background-color: #3498db;
cursor: pointer;
border-radius: 5px;
}
.button:hover {
background-color: #2980b9;
}
Qualquer sugestão é bem vinda
