SP UNIVERSO te invita a Descubrir c贸mo calcular tu 脥ndice de Masa Corporal de manera r谩pida y sencilla con nuestra calculadora desarrollada en HTML5, CSS3 y JavaScript. Aprende a evaluar tu condici贸n f铆sica y descubre tu peso ideal para mantener un estilo de vida saludable. Nuestros tutoriales interactivos te guiar谩n paso a paso en la creaci贸n de esta herramienta utilizando tecnolog铆as web modernas.
Si tu gust贸 el v铆deo, deja tu like, comenta por favor ¡! C贸mo te pareci贸 ¡¡ no olvides suscribirte a este CANAL para disfrutar de m谩s contenido que estar茅 subiendo cada semana.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Calculadora IMC</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<br>
<br>
<h1>Calculadora IMC</h1>
<br>
<br>
<div id="calculator">
<input type="number" id="weight" placeholder="Peso (kg)">
<br>
<br>
<br>
<input type="number" id="height" placeholder="Altura (cm)">
<br>
<br>
<br>
<button onclick="calculateIMC()">Calcular IMC</button>
<div id="result"></div>
</div>
<br>
<br>
<table>
<thead>
<tr>
<th>Rango de IMC</th>
<th>Estado</th>
</tr>
</thead>
<tbody>
<tr>
<td>Menos de 18.5</td>
<td>Bajo peso</td>
</tr>
<tr>
<td>18.5 - 24.9</td>
<td>Peso normal</td>
</tr>
<tr>
<td>25 - 29.9</td>
<td>Sobrepeso</td>
</tr>
<tr>
<td>30 o m谩s</td>
<td>Obesidad</td>
</tr>
</tbody>
</table>
<br>
<br>
<p> ♠ El sobrepeso puede causar la elevaci贸n de la concentraci贸n de colesterol total.
♠ la presi贸n arterial. ♠ aumentar el riesgo de sufrir la enfermedad arterial coronaria.
♠ presi贸n arterial alta. ♠ colesterol elevado ♠ diabetes.</p>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
text-align: center;
}
.container {
width: 600px;
height: 950px;
margin: 100px;
padding: 20px;
text-align: center;
color: rgb(12, 12, 12);
border-radius: 60px;
border-style: groove;
border-width: 40px;
border-color: #1d96cf;
margin: 0 auto;
}
h1 {
margin-bottom: 25px;
}
p{
font-size: 20px;
}
#calculator {
margin-bottom: 20px;
}
input[type="number"] {
padding: 10px;
margin-right: 10px;
width: 150px;
font-size: 22px;
border: 3px solid #1ca2ca;
}
button {
padding: 10px 20px;
background-color: #1d96cf;
color: white;
border: none;
cursor: pointer;
border-radius: 10px;
font-size: 25px;
}
#result {
font-weight: bold;
margin-top: 20px;
font-size: 25px;
}
table {
margin: 0 auto;
border-collapse: collapse;
}
th, td {
padding: 8px;
border: 3px solid #1d96cf;
font-size: 23px;
}
th {
background-color: #1d96cf;
color: white;
}
tbody tr:nth-child(even) {
background-color: #22abd8;
}
JAVASCRIP
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
text-align: center;
}
.container {
width: 600px;
height: 950px;
margin: 100px;
padding: 20px;
text-align: center;
color: rgb(12, 12, 12);
border-radius: 60px;
border-style: groove;
border-width: 40px;
border-color: #1d96cf;
margin: 0 auto;
}
h1 {
margin-bottom: 25px;
}
p{
font-size: 20px;
}
#calculator {
margin-bottom: 20px;
}
input[type="number"] {
padding: 10px;
margin-right: 10px;
width: 150px;
font-size: 22px;
border: 3px solid #1ca2ca;
}
button {
padding: 10px 20px;
background-color: #1d96cf;
color: white;
border: none;
cursor: pointer;
border-radius: 10px;
font-size: 25px;
}
#result {
font-weight: bold;
margin-top: 20px;
font-size: 25px;
}
table {
margin: 0 auto;
border-collapse: collapse;
}
th, td {
padding: 8px;
border: 3px solid #1d96cf;
font-size: 23px;
}
th {
background-color: #1d96cf;
color: white;
}
tbody tr:nth-child(even) {
background-color: #22abd8;
}
0 comments:
Publicar un comentario