Dia 32
This commit is contained in:
Marcos Lopez
150
Practicas/Practicas JS/Eventos 01/ejercicio03_DOM_V2.html
Normal file
150
Practicas/Practicas JS/Eventos 01/ejercicio03_DOM_V2.html
Normal file
@@ -0,0 +1,150 @@
|
||||
<!Doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Ejercicio 03 DOM (Accede a Formularios)</title>
|
||||
<script>
|
||||
|
||||
// Conversor de divisas
|
||||
function eur_dol() {
|
||||
// Obtén el valor de la entrada con ID "eurosP"
|
||||
let euros=document.getElementById("entradaEuros").value;
|
||||
// Convierte el valor a un número de punto flotante
|
||||
let eurosParse=parseFloat(euros);
|
||||
// Realizo la conversión
|
||||
let resultadoDolares=eurosParse*1.09;
|
||||
// Paso a 2 decimales
|
||||
let resultadoDolaresDecimales=resultadoDolares.toFixed(2);
|
||||
// Obtengo el elemento para la respuesta
|
||||
let inputRespuesta=document.getElementById("salidaDolares");
|
||||
// Asigno la respuesta
|
||||
inputRespuesta.value=resultadoDolaresDecimales;
|
||||
}
|
||||
|
||||
|
||||
function dol_eur() {
|
||||
let dolar2=document.getElementById("dolarP").value;
|
||||
let dolares=parseFloat(dolar2);
|
||||
let resultado=dolares/1.09;
|
||||
let resultadoD=resultado.toFixed(2);
|
||||
let respuesta=document.getElementById("resultadoE");
|
||||
respuesta.value=resultadoD;
|
||||
}
|
||||
|
||||
|
||||
// Calculadora precio IVA
|
||||
function precioI() {
|
||||
let precioNeto=document.getElementById("precioP").value;
|
||||
let precioNetoP=parseFloat(precioNeto);
|
||||
let precioI=precioNetoP*1.21;
|
||||
let precioIF=precioI.toFixed(2);
|
||||
alert("El precio con Iva es " + precioIF +" "+ "euros");
|
||||
}
|
||||
|
||||
|
||||
// Construye la frase
|
||||
function frase() {
|
||||
let nombre=document.getElementById("nombre").value;
|
||||
let apellido=document.getElementById("apellido").value;
|
||||
let ano=document.getElementById("ano").value;
|
||||
let ciudad=document.getElementById("ciudad").value;
|
||||
let mensaje="Hola " + nombre + " " + apellido + " naciste en " + ciudad + " en el año" + ano + ".";
|
||||
alert(mensaje);
|
||||
//Crear parrafo respuesta abajo (creandolo)
|
||||
let p = document.createElement("p");
|
||||
p.textContent = mensaje;
|
||||
// Inserto en el body
|
||||
//document.body.appendChild(p);
|
||||
// Inserto debajo del botón exactamente
|
||||
let sitio=document.getElementById("respuestaF")
|
||||
sitio.insertAdjacentElement("afterend", p);
|
||||
|
||||
// Inserto modificando existente
|
||||
let sitio2=document.getElementById("respuestaScript");
|
||||
sitio2.textContent= "Respuesta: " + mensaje;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Conversor Centigrados, Fahrenheit y Kelvin
|
||||
function convertirACentigrados() {
|
||||
var inputCentigrados = document.getElementById("cent").value;
|
||||
var centigrados = parseFloat(inputCentigrados);
|
||||
|
||||
var resultadoFahrenheit = (centigrados * 1.8) + 32;
|
||||
document.getElementById("fahr").value = resultadoFahrenheit;
|
||||
|
||||
var resultadoKelvin = centigrados + 273.15;
|
||||
document.getElementById("kelv").value = resultadoKelvin;
|
||||
}
|
||||
|
||||
function convertirAFahrenheit() {
|
||||
var inputFahrenheit = document.getElementById("fahr").value;
|
||||
var fahrenheit = parseFloat(inputFahrenheit);
|
||||
|
||||
var resultadoCentigrados = (fahrenheit - 32) / 1.8;
|
||||
document.getElementById("cent").value = resultadoCentigrados;
|
||||
|
||||
var resultadoKelvin = (resultadoCentigrados * 1.8) + 32;
|
||||
document.getElementById("kelv").value = resultadoKelvin;
|
||||
}
|
||||
|
||||
function convertirAKelvin() {
|
||||
var inputKelvin = document.getElementById("kelv").value;
|
||||
var kelvin = parseFloat(inputKelvin);
|
||||
|
||||
var resultadoCentigrados = kelvin - 273.15;
|
||||
document.getElementById("cent").value = resultadoCentigrados;
|
||||
|
||||
var resultadoFahrenheit = (resultadoCentigrados * 1.8) + 32;
|
||||
document.getElementById("fahr").value = resultadoFahrenheit;
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Conversor de monedas</h1>
|
||||
<p>Introduce la cantidad en euros <input id="entradaEuros" type=number value=0><input type=button value="Convertir a dolares" onclick="eur_dol()"> <input id="salidaDolares" type=number value=0 ></p>
|
||||
<br>
|
||||
<p>Introduce la cantidad en dolares <input id="dolarP" type=number value=0> <input type=button value="Convertir a euros" onclick="dol_eur()">
|
||||
<input id="resultadoE" type=number value=0> </p>
|
||||
<br>
|
||||
<br>
|
||||
<h1>Calculadora precio con IVA</h1>
|
||||
<p>Introduce el precio sin IVA <input id="precioP" type=number value=0 >
|
||||
<br>
|
||||
<br>
|
||||
Pulsa resultado <input type=button value="Precio con IVA" onclick="precioI()" >
|
||||
<br>
|
||||
<h1>Escribe la frase</h1>
|
||||
<br>
|
||||
Nombre <input id="nombre" type=text value="" >
|
||||
<br>
|
||||
<br>
|
||||
Apellido <input id="apellido" type=text value="" >
|
||||
<br>
|
||||
<br>
|
||||
En que año naciste ? <input id="ano" type=number value="" >
|
||||
<br>
|
||||
<br>
|
||||
En que ciudad ? <input id="ciudad" type=text value="" >
|
||||
<br>
|
||||
<br>
|
||||
<p id="respuestaF"><input type=button value="Frase" onclick="frase()" ></p>
|
||||
<p id="respuestaScript">Respuesta: </p>
|
||||
<br>
|
||||
<h1>Conversor Centigrados, Fahrenheit y Kelvin</h1>
|
||||
<br>
|
||||
<br>
|
||||
Centígrados <input id="cent" type=number value="0" onkeyup="convertirACentigrados()">
|
||||
<br>
|
||||
<br>
|
||||
Fahrenheit <input id="fahr" type=number value="0" onkeyup="convertirAFahrenheit()">
|
||||
<br>
|
||||
<br>
|
||||
Kelvin <input id="kelv" type=number value="0" onkeyup="convertirAKelvin()">
|
||||
<br>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
163
Practicas/Practicas JS/Eventos 01/ejercicio03_DOM_V3.html
Normal file
163
Practicas/Practicas JS/Eventos 01/ejercicio03_DOM_V3.html
Normal file
@@ -0,0 +1,163 @@
|
||||
<!Doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Ejercicio 03 DOM (Accede a Formularios)</title>
|
||||
<script>
|
||||
|
||||
// Conversor de divisas
|
||||
function eur_dol() {
|
||||
// Obtén el valor de la entrada con ID "eurosP"
|
||||
let euros=document.getElementById("entradaEuros").value;
|
||||
// Convierte el valor a un número de punto flotante
|
||||
let eurosParse=parseFloat(euros);
|
||||
// Realizo la conversión
|
||||
let resultadoDolares=eurosParse*1.09;
|
||||
// Paso a 2 decimales
|
||||
let resultadoDolaresDecimales=resultadoDolares.toFixed(2);
|
||||
// Obtengo el elemento para la respuesta
|
||||
let inputRespuesta=document.getElementById("salidaDolares");
|
||||
// Asigno la respuesta
|
||||
inputRespuesta.value=resultadoDolaresDecimales;
|
||||
}
|
||||
|
||||
|
||||
function dol_eur() {
|
||||
let dolar2=document.getElementById("dolarP").value;
|
||||
let dolares=parseFloat(dolar2);
|
||||
let resultado=dolares/1.09;
|
||||
let resultadoD=resultado.toFixed(2);
|
||||
let respuesta=document.getElementById("resultadoE");
|
||||
respuesta.value=resultadoD;
|
||||
}
|
||||
|
||||
|
||||
// Calculadora precio IVA
|
||||
function precioI() {
|
||||
let precioNeto=document.getElementById("precioP").value;
|
||||
let precioNetoP=parseFloat(precioNeto);
|
||||
let precioI=precioNetoP*1.21;
|
||||
let precioIF=precioI.toFixed(2);
|
||||
alert("El precio con Iva es " + precioIF +" "+ "euros");
|
||||
}
|
||||
|
||||
|
||||
// Construye la frase
|
||||
function frase() {
|
||||
let nombre=document.getElementById("nombre").value;
|
||||
let apellido=document.getElementById("apellido").value;
|
||||
let ano=document.getElementById("ano").value;
|
||||
let ciudad=document.getElementById("ciudad").value;
|
||||
let mensaje="Hola " + nombre + " " + apellido + " naciste en " + ciudad + " en el año" + ano + ".";
|
||||
alert(mensaje);
|
||||
//Crear parrafo respuesta abajo (creandolo)
|
||||
let p = document.createElement("p");
|
||||
p.textContent = mensaje;
|
||||
// Inserto en el body
|
||||
//document.body.appendChild(p);
|
||||
// Inserto debajo del botón exactamente
|
||||
let sitio=document.getElementById("respuestaF")
|
||||
sitio.insertAdjacentElement("afterend", p);
|
||||
|
||||
// Inserto modificando existente
|
||||
let sitio2=document.getElementById("respuestaScript");
|
||||
sitio2.textContent= "Respuesta: " + mensaje;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Conversor Centigrados, Fahrenheit y Kelvin
|
||||
//Me aseguro de que haya cargado la página
|
||||
document.addEventListener('DOMContentLoaded',inicio);
|
||||
function inicio() {
|
||||
var inputCentigrados = document.getElementById("cent");
|
||||
var inputFahrenheit = document.getElementById("fahr");
|
||||
var inputKelvin = document.getElementById("kelv");
|
||||
//Asigno los eventos
|
||||
inputCentigrados.addEventListener('input', convertirACentigrados);
|
||||
inputFahrenheit.addEventListener('input', convertirAFahrenheit);
|
||||
inputKelvin.addEventListener('input', convertirAKelvin);
|
||||
};
|
||||
|
||||
function convertirACentigrados() {
|
||||
var inputCentigrados = document.getElementById("cent").value;
|
||||
var centigrados = parseFloat(inputCentigrados);
|
||||
|
||||
var resultadoFahrenheit = (centigrados * 1.8) + 32;
|
||||
document.getElementById("fahr").value = resultadoFahrenheit;
|
||||
|
||||
var resultadoKelvin = centigrados + 273.15;
|
||||
document.getElementById("kelv").value = resultadoKelvin;
|
||||
}
|
||||
|
||||
function convertirAFahrenheit() {
|
||||
var inputFahrenheit = document.getElementById("fahr").value;
|
||||
var fahrenheit = parseFloat(inputFahrenheit);
|
||||
|
||||
var resultadoCentigrados = (fahrenheit - 32) / 1.8;
|
||||
document.getElementById("cent").value = resultadoCentigrados;
|
||||
|
||||
var resultadoKelvin = (resultadoCentigrados * 1.8) + 32;
|
||||
document.getElementById("kelv").value = resultadoKelvin;
|
||||
}
|
||||
|
||||
function convertirAKelvin() {
|
||||
var inputKelvin = document.getElementById("kelv").value;
|
||||
var kelvin = parseFloat(inputKelvin);
|
||||
|
||||
var resultadoCentigrados = kelvin - 273.15;
|
||||
document.getElementById("cent").value = resultadoCentigrados;
|
||||
|
||||
var resultadoFahrenheit = (resultadoCentigrados * 1.8) + 32;
|
||||
document.getElementById("fahr").value = resultadoFahrenheit;
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Conversor de monedas</h1>
|
||||
<p>Introduce la cantidad en euros <input id="entradaEuros" type=number value=0><input type=button value="Convertir a dolares" onclick="eur_dol()"> <input id="salidaDolares" type=number value=0 ></p>
|
||||
<br>
|
||||
<p>Introduce la cantidad en dolares <input id="dolarP" type=number value=0> <input type=button value="Convertir a euros" onclick="dol_eur()">
|
||||
<input id="resultadoE" type=number value=0> </p>
|
||||
<br>
|
||||
<br>
|
||||
<h1>Calculadora precio con IVA</h1>
|
||||
<p>Introduce el precio sin IVA <input id="precioP" type=number value=0 >
|
||||
<br>
|
||||
<br>
|
||||
Pulsa resultado <input type=button value="Precio con IVA" onclick="precioI()" >
|
||||
<br>
|
||||
<h1>Escribe la frase</h1>
|
||||
<br>
|
||||
Nombre <input id="nombre" type=text value="" >
|
||||
<br>
|
||||
<br>
|
||||
Apellido <input id="apellido" type=text value="" >
|
||||
<br>
|
||||
<br>
|
||||
En que año naciste ? <input id="ano" type=number value="" >
|
||||
<br>
|
||||
<br>
|
||||
En que ciudad ? <input id="ciudad" type=text value="" >
|
||||
<br>
|
||||
<br>
|
||||
<p id="respuestaF"><input type=button value="Frase" onclick="frase()" ></p>
|
||||
<p id="respuestaScript">Respuesta: </p>
|
||||
<br>
|
||||
<h1>Conversor Centigrados, Fahrenheit y Kelvin</h1>
|
||||
<br>
|
||||
<br>
|
||||
Centígrados <input id="cent" type=number value="0">
|
||||
<br>
|
||||
<br>
|
||||
Fahrenheit <input id="fahr" type=number value="0">
|
||||
<br>
|
||||
<br>
|
||||
Kelvin <input id="kelv" type=number value="0" >
|
||||
<br>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
44
Practicas/Practicas JS/Eventos 01/index.html
Normal file
44
Practicas/Practicas JS/Eventos 01/index.html
Normal file
@@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="./js/main.js" defer></script>
|
||||
<title>Document</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h2>Conversor de monedas</h2>
|
||||
<div>
|
||||
<span>Introduce la cantidad en euros</span><input type="number" name="eurosInput" id="eurosInput" value="0">
|
||||
<button onclick="eurToDolar()">Convertir adolares</button>
|
||||
<input type="number" name="dolarOutput" id="dolarOutput" value="0">
|
||||
</div>
|
||||
<div>
|
||||
<span>Introduce la cantidad en dolares</span> <input type="number" name="dolarInput" id="dolarInput" value="0">
|
||||
<button onclick="dolarToEur()">Convertir adolares</button>
|
||||
<input type="number" name="eurOutput" id="eurOutput" value="0">
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Calculadora precio IVA</h2>
|
||||
<span>Introduce el precio sin IVA</span> <input type="number" id="pvpInput"> <br>
|
||||
<span>Pulsa para resultado</span> <button onclick="pvpIVA()">Precio con Iva</button>
|
||||
|
||||
<h3>Escribe la frase</h3>
|
||||
<label for="nombre">Nombre</label><input type="text" name="nombre" id="nombre"> <br>
|
||||
<label for="apellidos">Apellido</label><input type="text" name="apellidos" id="apellidos"> <br>
|
||||
<label for="nacimiento">En que año naciste?</label><input type="number" name="nacimiento" id="nacimiento"> <br>
|
||||
<label for="ciudad">En que ciudad?</label><input type="text" name="ciudad" id="ciudad"> <br>
|
||||
<span id="frase"></span>
|
||||
<button onclick="frase()">Frase</button> <br>
|
||||
|
||||
<label for="gc">Grados Centigrados</label><input type="number" name="gc" id="gc" onkeyup="convertGC()"> <br>
|
||||
<label for="gf">Fahrenheit</label><input type="number" name="gf" id="gf" onkeyup="convertGF()"> <br>
|
||||
<label for="gk">Kelvin</label><input type="number" name="gk" id="gk" onkeyup="convertGK()"> <br>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
53
Practicas/Practicas JS/Eventos 01/js/main.js
Normal file
53
Practicas/Practicas JS/Eventos 01/js/main.js
Normal file
@@ -0,0 +1,53 @@
|
||||
|
||||
|
||||
function eurToDolar(){
|
||||
let eurosInput = document.getElementById('eurosInput');
|
||||
let dolarOutput = document.getElementById('dolarOutput');
|
||||
resultado = parseFloat(eurosInput.value)*1.09;
|
||||
dolarOutput.value=resultado.toFixed(2);
|
||||
}
|
||||
|
||||
function dolarToEur(){
|
||||
let dolarInput = document.getElementById('dolarInput');
|
||||
let eurOutput = document.getElementById('eurOutput');
|
||||
resultado = parseFloat(dolarInput.value)*0.9;
|
||||
eurOutput.value=resultado.toFixed(2);
|
||||
}
|
||||
|
||||
function pvpIVA(){
|
||||
let pvpInput=document.getElementById('pvpInput');
|
||||
alert(pvpInput.value*1.21)
|
||||
}
|
||||
|
||||
function frase() {
|
||||
let nombre = document.getElementById('nombre').value;
|
||||
let apellidos = document.getElementById('apellidos').value;
|
||||
let nacimiento = document.getElementById('nacimiento').value;
|
||||
let ciudad = document.getElementById('ciudad').value;
|
||||
let frase =document.getElementById('frase');
|
||||
frase.innerHTML= (`Hola ${nombre} ${apellidos} nacido el año ${nacimiento} en ${ciudad} <br>`)
|
||||
}
|
||||
|
||||
|
||||
function convertGC(){
|
||||
let tempC=parseFloat(document.getElementById('gc').value)
|
||||
let fahrenheit = (tempC*9/5)+32;
|
||||
let kelvin = tempC + 273.15;
|
||||
document.getElementById('gf').value=fahrenheit
|
||||
document.getElementById('gk').value=kelvin
|
||||
}
|
||||
function convertGF(){
|
||||
let tempF=parseFloat(document.getElementById('gf').value)
|
||||
let celsius = (tempF-32)*5/9
|
||||
let kelvin = celsius + 273.15;
|
||||
document.getElementById('gc').value=celsius
|
||||
document.getElementById('gk').value=kelvin
|
||||
}
|
||||
|
||||
function convertGK(){
|
||||
let tempK=parseFloat(document.getElementById('gk').value)
|
||||
let celsius = tempK - 273.15;
|
||||
let fahrenheit = (celsius-32)*5/9;
|
||||
document.getElementById('gc').value=celsius;
|
||||
document.getElementById('gf').value=fahrenheit;
|
||||
}
|
||||
Reference in New Issue
Block a user