Neste tutorial, abordaremos como criar uma calculadora de gorjetas simples com HTML, CSS e JavaScript.
A calculadora de gorjetas permitirá que você insira um valor, escolha uma porcentagem de gorjeta e escolha o número de pessoas que compartilham a conta. Em seguida, ele calculará a contribuição da gorjeta por pessoa.
Estrutura HTML
A estrutura contará com uma interface simples composta pelos seguintes elementos:
- Um entrada elemento para inserir o valor
- Quatro opções de dicas para escolher
- Um entrada elemento para um valor numérico
- A calcular botão para cálculo quando clicado
- Um elemento para exibir o saída.
- Todos esses elementos de entrada serão agrupados dentro de um forma
1 |
|
2 |
Tip Calculator
|
3 |
|
4 |
|
5 |
Total bill amount
|
6 |
|
7 |
|
8 |
|
9 |
Choose Tip
|
10 |
|
11 |
|
12 |
|
13 |
5%
|
14 |
|
15 |
|
16 |
|
17 |
10%
|
18 |
|
19 |
|
20 |
|
21 |
15%
|
22 |
|
23 |
|
24 |
|
25 |
20%
|
26 |
|
27 |
|
28 |
|
29 |
|
30 |
Number of People sharing
|
31 |
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
Estilos CSS
O primeiro passo é definir nossos estilos globais.
1 |
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap'); |
2 |
|
3 |
:root { |
4 |
--black: #2c2626; |
5 |
--darkgrey: #6a5959; |
6 |
--white: #ffffff; |
7 |
--green: #80ed99; |
8 |
--darkgreen: #24532f; |
9 |
--grey: #f0f0f0; |
10 |
--radius: 8px; |
11 |
}
|
A seguir, adicione os seguintes estilos ao corpo da página.
1 |
body { |
2 |
background: var(--grey); |
3 |
color: var(--black); |
4 |
display: flex; |
5 |
justify-content: center; |
6 |
min-height: 100vh; |
7 |
font-family: "DM Mono", monospace; |
8 |
text-align: center; |
9 |
}
|
Defina uma largura e algum preenchimento para o elemento contêiner envolvente e os elementos da seção.
1 |
.container {
|
2 |
width: 400px; |
3 |
padding: 20px 0 50px 0; |
4 |
} |
5 |
section {
|
6 |
margin: 20px 0 50px; |
7 |
} |
8 |
|
Vamos dar a ambas as entradas os mesmos estilos para garantir consistência.
1 |
input { |
2 |
width: 90%; |
3 |
height: 2em; |
4 |
font-size: 2em; |
5 |
box-sizing: border-box; |
6 |
text-align: end; |
7 |
outline: none; |
8 |
background: var(--white); |
9 |
padding: 5px; |
10 |
border-radius: var(--radius); |
11 |
border: 2px solid var(--darkgrey); |
12 |
}
|
Em vez de usar um botão de opção padrão, vamos criar botões de opção personalizados para selecionar porcentagens de gorjeta. Queremos que nossos botões sejam quadrados e com raio de borda. Também queremos que o texto da dica percentual seja exibido no centro do botão quadrado.
Primeiro, vamos ocultar o design redondo padrão dos botões de opção:
1 |
.radio-group input[type="radio"] { |
2 |
display: none; |
3 |
}
|
Vamos criar nossos botões de opção com estilo personalizado, que terão os seguintes estilos:
1 |
.radio-group { |
2 |
display: flex; |
3 |
justify-content: space-around; |
4 |
align-items: center; |
5 |
width: 100%; |
6 |
}
|
7 |
|
8 |
.radio-group label::before { |
9 |
text-align: center; |
10 |
content: ""; |
11 |
display: inline-block; |
12 |
width: 60px; |
13 |
height: 50px; |
14 |
border: 2px solid var(--darkgrey); |
15 |
border-radius: var(--radius); |
16 |
left: 10%; |
17 |
top: 50%; |
18 |
transform: translateY(-50%); |
19 |
}
|
Usamos o Flexbox para garantir que os botões estejam alinhados horizontalmente e espaçados igualmente. Use o posicionamento absoluto para garantir que os rótulos estejam centralizados nos botões personalizados e adicione uma cor de fundo quando um botão for selecionado.
1 |
.radio-group label { |
2 |
display: inline-block; |
3 |
position: relative; |
4 |
cursor: pointer; |
5 |
}
|
6 |
|
7 |
.radio-group label span { |
8 |
position: absolute; |
9 |
left: 20px; |
10 |
top: -10px; |
11 |
}
|
12 |
|
13 |
.radio-group input[type="radio"]:checked + label::before { |
14 |
background-color: var(--green); |
15 |
}
|
O botão calcular terá os seguintes estilos
1 |
.calculate-btn { |
2 |
background: var(--darkgreen); |
3 |
color: #fff; |
4 |
border: none; |
5 |
border-radius: var(--radius); |
6 |
padding: 15px 30px; |
7 |
font-size: 2em; |
8 |
}
|
Adicione os seguintes estilos aos elementos embutidos para a limpeza final.
1 |
h1 { |
2 |
font-size: 3em; |
3 |
margin: 50px 0; |
4 |
}
|
5 |
|
6 |
h2 { |
7 |
margin: 0 0 20px; |
8 |
}
|
9 |
|
10 |
section { |
11 |
margin: 20px 0 50px; |
12 |
}
|
13 |
.final-bill p { |
14 |
font-size: 1.5em; |
15 |
}
|
Fazendo funcionar com JavaScript
Vamos adicionar a funcionalidade JavaScript para fazer com que nossa calculadora de gorjetas funcione conforme o esperado. Faremos o seguinte.
- Adicione um ouvinte de evento ao botão calcular.
- Quando o botão é clicado, ele invoca uma função chamada
calculateTip() - O
calculateTip()A função obterá os valores de todos os elementos de entrada, realizará o cálculo e exibirá a gorjeta por pessoa na parte inferior da página.
O código final fica assim:
1 |
const calculateBtn = document.querySelector(".calculate-btn"); |
2 |
|
3 |
function CalculateTip(e) { |
4 |
event.preventDefault(); |
5 |
const tipMessage = document.getElementById("tip"); |
6 |
const amount = document.getElementById("amount").value; |
7 |
const tipPercentage = document.querySelector('[name="percentage"]:checked') |
8 |
.value; |
9 |
if (amount === "") { |
10 |
alert("Please enter the amount."); |
11 |
return; |
12 |
}
|
13 |
|
14 |
const people = document.getElementById("people").value; |
15 |
const tip = (amount * (tipPercentage / 100)) / people; |
16 |
|
17 |
tipMessage.innerHTML = `The Tip per person is $${parseFloat(tip).toFixed(2)}`; |
18 |
}
|
19 |
|
20 |
calculateBtn.addEventListener("click", CalculateTip); |
Aqui está o resultado final!
Conclusão
Este tutorial abordou como criar uma calculadora de gorjetas totalmente funcional, que será útil na próxima vez que você sair com seus amigos!
