Skip to content

Commit 11427a7

Browse files
luizehluizeh
committed
enchanted IMC
1 parent d6e19b7 commit 11427a7

4 files changed

Lines changed: 29 additions & 116 deletions

File tree

‎calc-imc/css/global.css‎

Lines changed: 5 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@
66

77
:root {
88
/* Cores - Paleta Principal */
9-
--color-primary: #0066ff;
10-
--color-primary-dark: #0052cc;
11-
--color-secondary: #ff3366;
9+
--color-primary: #ff8c00;
10+
--color-primary-dark: #e67e00;
11+
--color-secondary: #ff6b35;
1212

1313
/* Cores - Neutras */
1414
--color-bg-light: #ffffff;
1515
--color-bg-light-secondary: #f5f5f5;
16-
--color-bg-dark: #0d0d0d;
17-
--color-bg-dark-secondary: #1a1a1a;
16+
--color-bg-dark: #1a1a1a;
17+
--color-bg-dark-secondary: #2d2d2d;
1818

1919
--color-text-dark: #1a1a1a;
2020
--color-text-light: #ffffff;
@@ -306,61 +306,6 @@ small {
306306
ANIMATIONS
307307
======================================== */
308308

309-
@keyframes slideInLeft {
310-
from {
311-
opacity: 0;
312-
transform: translateX(-40px);
313-
}
314-
to {
315-
opacity: 1;
316-
transform: translateX(0);
317-
}
318-
}
319-
320-
@keyframes slideInRight {
321-
from {
322-
opacity: 0;
323-
transform: translateX(40px);
324-
}
325-
to {
326-
opacity: 1;
327-
transform: translateX(0);
328-
}
329-
}
330-
331-
@keyframes slideInUp {
332-
from {
333-
opacity: 0;
334-
transform: translateY(40px);
335-
}
336-
to {
337-
opacity: 1;
338-
transform: translateY(0);
339-
}
340-
}
341-
342-
@keyframes slideInDown {
343-
from {
344-
opacity: 0;
345-
transform: translateY(-40px);
346-
}
347-
to {
348-
opacity: 1;
349-
transform: translateY(0);
350-
}
351-
}
352-
353-
@keyframes zoomIn {
354-
from {
355-
opacity: 0;
356-
transform: scale(0.9);
357-
}
358-
to {
359-
opacity: 1;
360-
transform: scale(1);
361-
}
362-
}
363-
364309
@keyframes fadeIn {
365310
from {
366311
opacity: 0;

‎calc-imc/index.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,18 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Calculadora de IMC</title>
7-
<link rel="stylesheet" href="../css/global.css" />
7+
<link
8+
rel="stylesheet"
9+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
10+
/>
11+
<link rel="stylesheet" href="css/global.css" />
812
<link rel="stylesheet" href="style.css" />
913
</head>
1014

1115
<body>
1216
<div class="imc-container">
1317
<header class="imc-header">
14-
<h1>📊 Calculadora de IMC</h1>
18+
<h1><i class="fas fa-chart-bar"></i> Calculadora de IMC</h1>
1519
<p>Descubra seu Índice de Massa Corporal</p>
1620
</header>
1721

‎calc-imc/script.js‎

Lines changed: 0 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,7 @@
1-
/* ========================================
2-
CALCULADORA DE IMC - SCRIPT
3-
======================================== */
4-
5-
/**
6-
* Calcula o IMC baseado em peso e altura
7-
* @param {number} peso - Peso em kg
8-
* @param {number} altura - Altura em metros
9-
* @returns {number} - IMC calculado
10-
*/
111
function calcularIMCValue(peso, altura) {
122
return peso / (altura * altura);
133
}
144

15-
/**
16-
* Determina a categoria do IMC
17-
* @param {number} imc - Valor do IMC
18-
* @returns {object} - Objeto com categoria e descrição
19-
*/
205
function obterCategoria(imc) {
216
if (imc <= 18.5) {
227
return {
@@ -59,33 +44,25 @@ function obterCategoria(imc) {
5944
}
6045
}
6146

62-
/**
63-
* Evento para calcular IMC quando o formulário é enviado
64-
* @param {Event} event - Evento do formulário
65-
*/
6647
function calcularIMC(event) {
6748
event.preventDefault();
6849

6950
const peso = parseFloat(document.getElementById("peso").value);
7051
const altura = parseFloat(document.getElementById("altura").value);
7152

72-
// Validação de entrada
7353
if (isNaN(peso) || isNaN(altura) || peso <= 0 || altura <= 0) {
7454
alert("Por favor, insira valores válidos para peso e altura.");
7555
return;
7656
}
7757

78-
// Calcula IMC
7958
const imc = calcularIMCValue(peso, altura);
8059
const categoria = obterCategoria(imc);
8160

82-
// Formata o IMC para exibição
8361
const imcFormatado = imc.toLocaleString("pt-BR", {
8462
minimumFractionDigits: 2,
8563
maximumFractionDigits: 2,
8664
});
8765

88-
// Atualiza a card de resultado
8966
const resultCard = document.getElementById("resultCard");
9067
const resultIMC = document.getElementById("resultIMC");
9168
const resultCategory = document.getElementById("resultCategory");
@@ -95,24 +72,16 @@ function calcularIMC(event) {
9572
resultCategory.textContent = categoria.categoria;
9673
resultDescription.textContent = categoria.descricao;
9774

98-
// Aplica a classe de cor apropriada
9975
resultCard.className = "result-card " + categoria.class;
10076
resultCard.style.display = "block";
101-
102-
// Log para debugging
103-
console.log(`Peso: ${peso}kg, Altura: ${altura}m, IMC: ${imcFormatado}`);
10477
}
10578

106-
/**
107-
* Limpa o formulário e esconde o resultado
108-
*/
10979
function limparFormulario() {
11080
document.getElementById("imcForm").reset();
11181
document.getElementById("resultCard").style.display = "none";
11282
document.getElementById("peso").focus();
11383
}
11484

115-
// Event listener para enter no formulário
11685
document.addEventListener("DOMContentLoaded", function () {
11786
const form = document.getElementById("imcForm");
11887
form.addEventListener("submit", calcularIMC);

‎calc-imc/style.css‎

Lines changed: 18 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
======================================== */
44

55
body {
6-
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
6+
background-color: #1a1a1a;
77
min-height: 100vh;
88
display: flex;
99
align-items: center;
@@ -25,20 +25,18 @@ body {
2525

2626
.imc-header {
2727
text-align: center;
28-
color: white;
28+
color: #ff8c00;
2929
margin-bottom: var(--spacing-3xl);
30-
animation: slideInUp 0.6s ease-out;
3130
}
3231

3332
.imc-header h1 {
3433
font-size: 3rem;
3534
margin-bottom: var(--spacing-md);
36-
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
3735
}
3836

3937
.imc-header p {
4038
font-size: 1.2rem;
41-
opacity: 0.95;
39+
color: #cccccc;
4240
margin-bottom: 0;
4341
}
4442

@@ -59,13 +57,12 @@ body {
5957
background: white;
6058
border-radius: var(--radius-2xl);
6159
padding: var(--spacing-2xl);
62-
box-shadow: var(--shadow-dark);
63-
animation: zoomIn 0.6s ease-out;
60+
box-shadow: var(--shadow-md);
6461
}
6562

6663
.form-card h2,
6764
.result-card h2 {
68-
color: #333;
65+
color: #1a1a1a;
6966
margin-bottom: var(--spacing-xl);
7067
font-size: 1.5rem;
7168
}
@@ -81,7 +78,7 @@ body {
8178
.form-group label {
8279
display: block;
8380
margin-bottom: var(--spacing-md);
84-
color: #333;
81+
color: #1a1a1a;
8582
font-weight: var(--font-weight-semibold);
8683
}
8784

@@ -96,8 +93,8 @@ body {
9693

9794
.form-group input:focus {
9895
outline: none;
99-
border-color: #667eea;
100-
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
96+
border-color: #ff8c00;
97+
box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.1);
10198
}
10299

103100
.form-group input::placeholder {
@@ -113,13 +110,12 @@ body {
113110
======================================== */
114111

115112
.result-box {
116-
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
113+
background-color: #ff8c00;
117114
border-radius: var(--radius-xl);
118115
padding: var(--spacing-2xl);
119116
color: white;
120117
margin-bottom: var(--spacing-xl);
121118
text-align: center;
122-
animation: slideInRight 0.6s ease-out;
123119
}
124120

125121
.result-value {
@@ -144,7 +140,7 @@ body {
144140

145141
.result-description {
146142
font-size: 1rem;
147-
opacity: 0.9;
143+
opacity: 0.95;
148144
margin: 0;
149145
}
150146

@@ -153,27 +149,27 @@ body {
153149
======================================== */
154150

155151
.category-underweight {
156-
background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
152+
background-color: #2d2d2d;
157153
}
158154

159155
.category-normal {
160-
background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
156+
background-color: #ff8c00;
161157
}
162158

163159
.category-overweight {
164-
background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
160+
background-color: #ff9900;
165161
}
166162

167163
.category-obesity1 {
168-
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
164+
background-color: #ff7700;
169165
}
170166

171167
.category-obesity2 {
172-
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
168+
background-color: #ff6600;
173169
}
174170

175171
.category-obesity3 {
176-
background: linear-gradient(135deg, #c0392b 0%, #922b21 100%);
172+
background-color: #ff5500;
177173
}
178174

179175
/* ========================================
@@ -182,11 +178,10 @@ body {
182178

183179
.imc-footer {
184180
text-align: center;
185-
color: white;
186-
opacity: 0.8;
181+
color: #cccccc;
187182
font-size: 0.9rem;
188183
padding-top: var(--spacing-lg);
189-
border-top: 1px solid rgba(255, 255, 255, 0.2);
184+
border-top: 1px solid #333333;
190185
}
191186

192187
/* ========================================

0 commit comments

Comments
 (0)