scrip.js
alert("APLICACION CALCULO FUERZA");
console.log("MENSAJE POR CONSOLA")
function calcularFuerza()
{
var masa = parseFloat(document.getElementById('masa').value);
var aceleracion = parseFloat(document.getElementById('aceleracion').value);
var resultadoElement = document.getElementById('resultado');
if (isNaN(masa) || isNaN(aceleracion)) {
resultadoElement.textContent = 'Por favor ingrese valores numéricos válidos.';
resultadoElement.className = 'message error';
resultadoElement.style.display = 'block';
return;
}
var fuerza = masa * aceleracion;
resultadoElement.textContent = 'La fuerza es: ' + fuerza.toFixed(2) + ' N.';
resultadoElement.className = 'message success';
resultadoElement.style.display = 'block';
if (fuerza > 50) {
resultadoElement.textContent += ' ¡La fuerza es mayor o igual que 50 N!';
} else {
alert("la fuerza es mayor o igual que 50N!")
resultadoElement.textContent += ' ¡La fuerza es menor o igual que 50 N!';
}alert("la fuerza es menor o igual que 50N!")
}
estiles.css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
padding: 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.message {
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
display: none;
}
.error {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.success {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #0056b3;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora de Fuerza</title>
<link rel="stylesheet" href="estiles.css">
</head>
<body>
<div class="container">
<h2>Calculadora de Fuerza</h2>
<label for="masa">Masa (kg):</label>
<input typ0e="number" id="masa" min="0">
<label for="aceleracion">Aceleración (m/s²):</label>
<input type="number" id="aceleracion" min="0">
<button onclick="calcularFuerza()">Calcular Fuerza</button>
<div id="resultado" class="message" style="display: none;"></div>
</div>
<script src= "script.js">
PREGUNTAS
¿Por que es necesario separar los archivos html, css y js?
¿Con cual etiqueta se enlaza un archivo js? de un ejemplo
¿Con cual etiqueta se enlaza un archivo css? de un ejemplo
Descripcion
solucion
Separar HTML, CSS y JavaScript facilita la organización, mantenimiento y escalabilidad del código. Mejora el rendimiento al aprovechar la caché del navegador y simplifica la colaboración en proyectos grandes. Además, hace más fácil identificar y corregir errores.
Para enlazar un archivo JavaScript a un documento HTML, usa la etiqueta <script> con el atributo src. un ejemplo
<script src="mi-archivo.js"></script>
Para enlazar un archivo CSS en un documento HTML, utiliza la etiqueta <link> con el atributo
rel configurado como "stylesheet". un ejemplo podria ser
<link rel="stylesheet" href="estilos.css">
Comentarios
Publicar un comentario