-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
76 lines (76 loc) · 5.27 KB
/
index.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
<!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">
<title>Document</title>
<script src = 'script.js'></script> <!--Importando o script.js-->
<link rel = 'stylesheet' href = 'style.css'> <!--Importando o style.css-->
</head>
<body>
<p style = 'font-size: 18px'>Quantas vezes você se perguntou qual produto é mais barato e comprou sem saber qual compensa mais?</p>
<p style = 'font-size: 18px'>Muitas vezes não estamos com paciência ou tempo para calcular qual sai mais em conta.</p>
<p style = 'font-size: 18px'>Por isso, foi desenvolvido esse facilitador de comparação de preços. Mas antes de utilizá-lo, seguem as seguintes dicas:</p>
<li style = 'font-size: 18px'>O Valor da Unidade representa o valor de <strong>uma unidade apenas</strong> enquanto o Valor do Combo representa o valor da <strong>quantidade total</strong>.</li>
<li style = 'font-size: 18px'>Não haverá retorno em casos que associam <strong>peso</strong> e <strong>líquido</strong>.</li>
<li style = 'font-size: 18px'>Ao incluir centavos utilize o ponto e não vígula. Ex.: 2.50 ao invés de 2,50.</li>
<p style = 'font-size: 18px'><strong>Obs.: </strong>Avalia-se apenas quantidade/valor. Ao comparar 2 produtos de marcas diferentes, a qualidade do produto fica a critério do consumidor.</p>
<div class = 'box1'> <!--Criando a primeira caixa e nomeando a classe para acessar no style.css-->
<p style = 'font-size: 20px'><strong>Produto 1</strong></p>
<select id = 'PesoLiq1' style = 'border: 1px solid black; font-size: 18px;'> <!--Adicionando a caixa de opções de medidas-->
<optgroup label = 'Peso'>
<option value = 'mg'>mg</option>
<option value = 'g'>g</option>
<option value = 'kg'>Kg</option>
</optgroup>
<optgroup label = 'Líquido'>
<option value = 'ml'>ml</option>
<option value = 'L'>L</option>
</optgroup>
</select><br><br>
<input type = 'text' placeholder = "Digite a medida" style = 'border: 1px solid black; width: 130px; font-size: 18px' id = 'medida1'><br><br>
<!--Caixa para receber o valor da primeira medida-->
<select id = 'opção1' style = 'border: 1px solid black; font-size: 18px;'> <!--Adicionando a caixa de opções de tipo de valor-->
<option value = ''>Tipo de Valor</option>
<option value = 'unidade1'>Valor da Unidade</option>
<option value = 'combo1'>Valor do Combo</option>
</select><br><br>
<input type = 'text' placeholder = "Digite o preço" style = 'border: 1px solid black; width: 115px; font-size: 18px' id = 'preco1'><br><br>
<!--Caixa para receber o valor do primeiro preço-->
<label for = 'quant1' style = 'font-size: 18px'><strong>Quantidade</strong></label>
<input type = 'number' style = 'border: 1px solid black; width: 50px; font-size: 18px' id = 'quantidade1'><br><br>
<!--Caixa para receber a quantidade do primeiro produto-->
</div>
<div class = 'box2'> <!--Criando a segunda caixa e nomeando a classe para acessar no style.css-->
<p style = 'font-size: 20px'><strong>Produto 2</strong></p>
<select id = 'PesoLiq2' style = 'border: 1px solid black; font-size: 18px;'> <!--Adicionando a caixa de opções de medidas-->
<optgroup label = 'Peso'>
<option value = 'mg'>mg</option>
<option value = 'g'>g</option>
<option value = 'kg'>Kg</option>
</optgroup>
<optgroup label = 'Líquido'>
<option value = 'ml'>ml</option>
<option value = 'L'>L</option>
</optgroup>
</select><br><br>
<input type = 'text' placeholder = "Digite a medida" style = 'border: 1px solid black; width: 130px; font-size: 18px' id = 'medida2'><br><br>
<!--Caixa para receber o valor da segunda medida-->
<select id = 'opção2' style = 'border: 1px solid black; font-size: 18px;'> <!--Adicionando a caixa de opções de tipo de valor-->
<option value = ''>Tipo de Valor</option>
<option value = 'unidade2'>Valor da Unidade</option>
<option value = 'combo2'>Valor do Combo</option>
</select><br><br>
<input type = 'text' placeholder = "Digite o preço" style = 'border: 1px solid black; width: 115px; font-size: 18px' id = 'preco2'><br><br>
<!--Caixa para receber o valor do segundo preço-->
<label for = 'quant2' style = 'font-size: 18px'><strong>Quantidade</strong></label>
<input type = 'number' style = 'border: 1px solid black; width: 50px; font-size: 18px' id = 'quantidade2'><br><br>
<!--Caixa para receber a quantidade do segundo produto-->
</div><br><br>
<button onclick ="comparar()" style = 'border: 1px solid black; font-size: 18px' align = 'center'>Comparar</button><br><br>
<!--Botão para retornar a função-->
<span id = 'resultado' style = 'font-size: 18px' align = 'center'></span>
<!--Retorno da função, resulta depois de apertar o botão-->
</body>
</html>