Mejor coincidenciaConversor de temperatura
Convierte valores entre unidades y muestra el resultado de forma clara.
Crear un conversor de temperatura →Cree una calculadora de préstamos con HTML, CSS y JavaScript mientras practica la selección de DOM y las actualizaciones de contenido de DOM.
Cree una calculadora de préstamos utilizando HTML, CSS y JavaScript, luego conecte la interfaz a la lógica que la hace funcionar. Aprenderá cómo recibir información del usuario, realizar un cálculo y mostrar un resultado claro mientras practica con la selección de DOM, las actualizaciones de contenido de DOM y los valores de entrada.
Conocimientos recomendados: HTML y CSS básicos, Variables de JavaScript y operaciones numéricas., Selección DOM y eventos de formulario..
Crea los archivos del proyecto, copia el código y abre el archivo HTML en tu navegador.
index.html<!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>Loan Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Loan Calculator</h1>
<p>Loan Amount $
<input onchange="calculateLoan()" class="input" type="number" id="loan-amount" min="1" max="500000" value="10000">
</p>
<p>Interest Rate %
<input onchange="calculateLoan()" class="input" type="number" id="interest-rate" min="0" max="100" value="10" step=".1">
</p>
<p>Months to pay
<input onchange="calculateLoan()" class="input" type="number" id="months-to-pay" min="6" max="48" value="12">
</p>
<p class="payment" id="payment">Monthly Payment:</p>
</div>
<script src="index.js"></script>
</body>
</html>
Practica Lectura de valores, Formato de números y Cálculos con JavaScript con estos proyectos relacionados.
Mejor coincidenciaConvierte valores entre unidades y muestra el resultado de forma clara.
Crear un conversor de temperatura →
Practica solicitudes a APIs con este proyecto relacionado.
Crear convertidor de moneda →
Practica eventos de entrada y cálculos numéricos con este proyecto relacionado.
Crear un conversor de peso →