-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathconversormedidas.html
130 lines (104 loc) · 3.89 KB
/
conversormedidas.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Exercicio</title>
</head>
<body>
<div class="container">
<h1> Conversor de Medidas</h1>
<label for="input">Converter de: </label>
<input type="number" id="input" placeholder="0">
<label for="from">De:</label>
<select id="from">
<option value="m">Metro(s)</option>
<option value="km">Quilômetro(s)</option>
<option value="cm">Centímetro(s)</option>
<option value="mm">Milímetro(s)</option>
</select>
<label for="to">Para:</label>
<select id="to">
<option value="m">Metro(s)</option>
<option value="km">Quilômetro(s)</option>
<option value="cm">Centímetro(s)</option>
<option value="mm">Milímetro(s)</option>
</select>
<button id="btn-converter" class="btn"> CONVERTER </button>
<br>
<br>
<label for="output">Resultado:</label>
<input type="text" id="output" disabled="true">
<div id="message"></div>
<br>
<br>
<br>
<a href="index.html">Clique aqui para exercício do numero par</a>
<a href="listacompras.html">Clique aqui para lista de compras</a>
<a href="media.html">Clique aqui para exercício da média</a>
<a href="tabuada.html">Clique aqui para tabuada</a>
</div>
</body>
</html>
<script>
//selecionando os elementos através de seus ID
const inputElement = document.querySelector('#input');
const fromElement = document.querySelector('#from');
const toElement = document.querySelector('#to');
const outputElement = document.querySelector('#output');
const messageElement = document.querySelector('#message');
const convertButton = document.querySelector('#btn-converter');
convertButton.addEventListener("click", Convert);
function Convert() {
//selecionando apenas o valor dos campos DE e PARA
const fromValue = fromElement.value;
const toValue = toElement.value;
//se a unidade de entrada for igual a unidade de saída
if( fromValue == toValue ) {
outputElement.value = inputElement.value;
messageElement.textContent = '';
return; //retorna (finaliza função)
}
//passo 1: converter o valor de entrada para metros e gravar na variável METERS
let meters;
switch(fromValue){
case 'm':
meters = inputElement.value;
break;
case 'km':
meters = inputElement.value * 1000;
break;
case 'cm':
meters = inputElement.value / 100;
break;
case 'mm':
meters = inputElement.value / 1000;
break;
}
//passo 2: Converter o valor em metros para o valor de saída e salvar na variável RESULT
let result;
switch(toValue){
case 'm':
result = meters;
break;
case 'km':
result = meters / 1000;
break;
case 'cm':
result = meters * 100;
break;
case 'mm':
result = meters * 1000;
break;
}
//Exibir o resultado no input
outputElement.value = result;
//Exibir o resultado na mensagem
const fromLabel = fromElement.options[fromElement.selectedIndex].text;
const toLabel = toElement.options[toElement.selectedIndex].text;
const message = `${inputElement.value} ${fromLabel} equivalem a ${result} ${toLabel}` ;
messageElement.textContent = message;
}
</script>