From ad40171fb489fb0ecf185e1a699a485da7419717 Mon Sep 17 00:00:00 2001 From: Marcos Lopez Date: Mon, 22 Jan 2024 13:46:08 +0100 Subject: [PATCH] Dia 32 --- .../ejercicio02_DOM_clases.html | 53 ++++++ .../ejercicio02_DOM_enunciado.html | 75 ++++++++ .../DOM 02/ejercicio02_DOM_enunciado.html | 3 - .../Practicas JS/DOM 03/ejercicio03_DOM.html | 105 +++++++++++ Practicas/Practicas JS/DOM 03/index.html | 38 ++++ Practicas/Practicas JS/DOM 03/js/main.js | 29 ++++ .../Eventos 01/ejercicio03_DOM_V2.html | 150 ++++++++++++++++ .../Eventos 01/ejercicio03_DOM_V3.html | 163 ++++++++++++++++++ Practicas/Practicas JS/Eventos 01/index.html | 44 +++++ Practicas/Practicas JS/Eventos 01/js/main.js | 53 ++++++ .../09_EVENTOS_DOM_JAVASCRIPT.html | 122 +++++++++++++ .../Practicas JS/boton escapista/index.html | 31 ++++ 12 files changed, 863 insertions(+), 3 deletions(-) create mode 100644 Practicas/Practicas JS/DOM 02 con clases/ejercicio02_DOM_clases.html create mode 100644 Practicas/Practicas JS/DOM 02 con clases/ejercicio02_DOM_enunciado.html create mode 100644 Practicas/Practicas JS/DOM 03/ejercicio03_DOM.html create mode 100644 Practicas/Practicas JS/DOM 03/index.html create mode 100644 Practicas/Practicas JS/DOM 03/js/main.js create mode 100644 Practicas/Practicas JS/Eventos 01/ejercicio03_DOM_V2.html create mode 100644 Practicas/Practicas JS/Eventos 01/ejercicio03_DOM_V3.html create mode 100644 Practicas/Practicas JS/Eventos 01/index.html create mode 100644 Practicas/Practicas JS/Eventos 01/js/main.js create mode 100644 Practicas/Practicas JS/Introduccion/09_EVENTOS_DOM_JAVASCRIPT.html create mode 100644 Practicas/Practicas JS/boton escapista/index.html diff --git a/Practicas/Practicas JS/DOM 02 con clases/ejercicio02_DOM_clases.html b/Practicas/Practicas JS/DOM 02 con clases/ejercicio02_DOM_clases.html new file mode 100644 index 0000000..9a7a160 --- /dev/null +++ b/Practicas/Practicas JS/DOM 02 con clases/ejercicio02_DOM_clases.html @@ -0,0 +1,53 @@ + + + + + Ejercicio 02 - DOM + + + +

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Fusce porta. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque. Donec lacus neque, vehicula in, eleifend vitae, venenatis ac, felis. Donec arcu. Nam sed tortor nec ipsum aliquam ullamcorper. Duis accumsan metus eu urna. Aenean vitae enim. Integer lacus. Vestibulum venenatis erat eu odio. Praesent id metus.

+

Aenean at nisl. Maecenas egestas dapibus odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin consequat auctor diam. Ut bibendum blandit est. Curabitur vestibulum. Nunc malesuada porttitor sapien. Aenean a lacus et metus venenatis porta. Suspendisse cursus, sem non dapibus tincidunt, lorem magna porttitor felis, id sodales dolor dolor sed urna. Sed rutrum nulla vitae tellus. Sed quis eros nec lectus tempor lacinia. Aliquam nec lectus nec neque aliquet dictum. Etiam consequat sem quis massa. Donec aliquam euismod diam. In magna massa, mattis id, pellentesque sit amet, porta sit amet, lectus. Curabitur posuere. Aliquam in elit. Fusce condimentum, arcu in scelerisque lobortis, ante arcu scelerisque mi, at cursus mi risus sed tellus.

+

Donec sagittis, nibh nec ullamcorper tristique, pede velit feugiat massa, at sollicitudin justo tellus vitae justo. Vestibulum aliquet, nulla sit amet imperdiet suscipit, nunc erat laoreet est, a aliquam leo odio sed sem. Quisque eget eros vehicula diam euismod tristique. Ut dui. Donec in metus sed risus laoreet sollicitudin. Proin et nisi non arcu sodales hendrerit. In sem. Cras id augue eu lorem dictum interdum. Donec pretium. Proin egestas adipiscing ligula. Duis iaculis laoreet turpis. Mauris mollis est sit amet diam. Curabitur hendrerit, eros quis malesuada tristique, ipsum odio euismod tortor, a vestibulum nisl mi at odio. Sed non lectus non est pellentesque auctor.

+ + + Sigue leyendo +
+ Oculta + + + + diff --git a/Practicas/Practicas JS/DOM 02 con clases/ejercicio02_DOM_enunciado.html b/Practicas/Practicas JS/DOM 02 con clases/ejercicio02_DOM_enunciado.html new file mode 100644 index 0000000..37921af --- /dev/null +++ b/Practicas/Practicas JS/DOM 02 con clases/ejercicio02_DOM_enunciado.html @@ -0,0 +1,75 @@ + + + + + + Ejercicio 01 - DOM b�sico + + + + +

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. + Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien + nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices + porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, + faucibus ut, rhoncus non, mi. Fusce porta. Duis pellentesque, felis eu adipiscing + ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer + adipiscing elit. Duis scelerisque. Donec lacus neque, vehicula in, eleifend vitae, venenatis ac, felis. Donec + arcu. Nam sed tortor nec ipsum aliquam ullamcorper. Duis accumsan metus eu urna. Aenean vitae enim. Integer + lacus. Vestibulum venenatis erat eu odio. Praesent id metus.

+

Aenean at nisl. Maecenas egestas dapibus odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices + posuere cubilia Curae; Proin consequat auctor diam. Ut bibendum blandit est. + Curabitur vestibulum. Nunc malesuada porttitor sapien. Aenean a lacus et metus venenatis porta. Suspendisse + cursus, sem non dapibus tincidunt, lorem magna porttitor felis, id sodales dolor dolor sed urna. Sed rutrum + nulla vitae tellus. Sed quis eros nec lectus tempor lacinia. Aliquam nec lectus nec neque aliquet dictum. Etiam + consequat sem quis massa. Donec aliquam euismod diam. In magna massa, mattis id, + pellentesque sit amet, porta sit amet, lectus. Curabitur posuere. Aliquam in elit. Fusce condimentum, arcu in + scelerisque lobortis, ante arcu scelerisque mi, at cursus mi risus sed tellus. +

+

Donec sagittis, nibh nec ullamcorper tristique, pede velit feugiat massa, at + sollicitudin justo tellus vitae justo. Vestibulum aliquet, nulla sit amet imperdiet suscipit, nunc erat laoreet + est, a aliquam leo odio sed sem. Quisque eget eros vehicula diam euismod tristique. + Ut dui. Donec in metus sed risus laoreet sollicitudin. Proin et nisi non arcu sodales hendrerit. In sem. Cras id + augue eu lorem dictum interdum. Donec pretium. Proin egestas adipiscing ligula. + Duis iaculis laoreet turpis. Mauris mollis est sit amet diam. Curabitur hendrerit, eros quis malesuada + tristique, ipsum odio euismod tortor, a vestibulum nisl mi at odio. Sed non lectus non + est pellentesque auctor. Ocultar

+ + Sigue leyendo + + + + + + \ No newline at end of file diff --git a/Practicas/Practicas JS/DOM 02/ejercicio02_DOM_enunciado.html b/Practicas/Practicas JS/DOM 02/ejercicio02_DOM_enunciado.html index 8a36213..a43abd5 100644 --- a/Practicas/Practicas JS/DOM 02/ejercicio02_DOM_enunciado.html +++ b/Practicas/Practicas JS/DOM 02/ejercicio02_DOM_enunciado.html @@ -59,9 +59,6 @@ } - - - \ No newline at end of file diff --git a/Practicas/Practicas JS/DOM 03/ejercicio03_DOM.html b/Practicas/Practicas JS/DOM 03/ejercicio03_DOM.html new file mode 100644 index 0000000..ebc5365 --- /dev/null +++ b/Practicas/Practicas JS/DOM 03/ejercicio03_DOM.html @@ -0,0 +1,105 @@ + + + + +Ejercicio 03 DOM (Accede a Formularios) + + + +

Conversor de monedas

+

Introduce la cantidad en euros

+
+

Introduce la cantidad en dolares +

+
+
+

Calculadora precio con IVA

+

Introduce el precio sin IVA +
+
+Pulsa resultado +
+

Escribe la frase

+
+Nombre +
+
+Apellido +
+
+En que año naciste ? +
+
+En que ciudad ? +
+
+

+

Respuesta:

+
+ + + \ No newline at end of file diff --git a/Practicas/Practicas JS/DOM 03/index.html b/Practicas/Practicas JS/DOM 03/index.html new file mode 100644 index 0000000..7bb8d97 --- /dev/null +++ b/Practicas/Practicas JS/DOM 03/index.html @@ -0,0 +1,38 @@ + + + + + + + + Document + + + +

Conversor de monedas

+
+ Introduce la cantidad en euros + + +
+
+ Introduce la cantidad en dolares + + +
+ + +

Calculadora precio IVA

+ Introduce el precio sin IVA
+ Pulsa para resultado + +

Escribe la frase

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/Practicas/Practicas JS/DOM 03/js/main.js b/Practicas/Practicas JS/DOM 03/js/main.js new file mode 100644 index 0000000..6a22745 --- /dev/null +++ b/Practicas/Practicas JS/DOM 03/js/main.js @@ -0,0 +1,29 @@ + + +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}
`) +} \ No newline at end of file diff --git a/Practicas/Practicas JS/Eventos 01/ejercicio03_DOM_V2.html b/Practicas/Practicas JS/Eventos 01/ejercicio03_DOM_V2.html new file mode 100644 index 0000000..ecaaf0a --- /dev/null +++ b/Practicas/Practicas JS/Eventos 01/ejercicio03_DOM_V2.html @@ -0,0 +1,150 @@ + + + + +Ejercicio 03 DOM (Accede a Formularios) + + + +

Conversor de monedas

+

Introduce la cantidad en euros

+
+

Introduce la cantidad en dolares +

+
+
+

Calculadora precio con IVA

+

Introduce el precio sin IVA +
+
+Pulsa resultado +
+

Escribe la frase

+
+Nombre +
+
+Apellido +
+
+En que año naciste ? +
+
+En que ciudad ? +
+
+

+

Respuesta:

+
+

Conversor Centigrados, Fahrenheit y Kelvin

+
+
+Centígrados +
+
+Fahrenheit +
+
+Kelvin +
+ + + \ No newline at end of file diff --git a/Practicas/Practicas JS/Eventos 01/ejercicio03_DOM_V3.html b/Practicas/Practicas JS/Eventos 01/ejercicio03_DOM_V3.html new file mode 100644 index 0000000..a7bae63 --- /dev/null +++ b/Practicas/Practicas JS/Eventos 01/ejercicio03_DOM_V3.html @@ -0,0 +1,163 @@ + + + + +Ejercicio 03 DOM (Accede a Formularios) + + + +

Conversor de monedas

+

Introduce la cantidad en euros

+
+

Introduce la cantidad en dolares +

+
+
+

Calculadora precio con IVA

+

Introduce el precio sin IVA +
+
+Pulsa resultado +
+

Escribe la frase

+
+Nombre +
+
+Apellido +
+
+En que año naciste ? +
+
+En que ciudad ? +
+
+

+

Respuesta:

+
+

Conversor Centigrados, Fahrenheit y Kelvin

+
+
+Centígrados +
+
+Fahrenheit +
+
+Kelvin +
+ + + \ No newline at end of file diff --git a/Practicas/Practicas JS/Eventos 01/index.html b/Practicas/Practicas JS/Eventos 01/index.html new file mode 100644 index 0000000..f4b325a --- /dev/null +++ b/Practicas/Practicas JS/Eventos 01/index.html @@ -0,0 +1,44 @@ + + + + + + + + Document + + + +

Conversor de monedas

+
+ Introduce la cantidad en euros + + +
+
+ Introduce la cantidad en dolares + + +
+ + +

Calculadora precio IVA

+ Introduce el precio sin IVA
+ Pulsa para resultado + +

Escribe la frase

+
+
+
+
+ +
+ +
+
+
+ + + + + \ No newline at end of file diff --git a/Practicas/Practicas JS/Eventos 01/js/main.js b/Practicas/Practicas JS/Eventos 01/js/main.js new file mode 100644 index 0000000..bd794a6 --- /dev/null +++ b/Practicas/Practicas JS/Eventos 01/js/main.js @@ -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}
`) +} + + +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; +} diff --git a/Practicas/Practicas JS/Introduccion/09_EVENTOS_DOM_JAVASCRIPT.html b/Practicas/Practicas JS/Introduccion/09_EVENTOS_DOM_JAVASCRIPT.html new file mode 100644 index 0000000..c24df2a --- /dev/null +++ b/Practicas/Practicas JS/Introduccion/09_EVENTOS_DOM_JAVASCRIPT.html @@ -0,0 +1,122 @@ + + + + +EVENTOS DOM + + + +

Hola tengo aplicado un evento

+ + + \ No newline at end of file diff --git a/Practicas/Practicas JS/boton escapista/index.html b/Practicas/Practicas JS/boton escapista/index.html new file mode 100644 index 0000000..5bbd5b3 --- /dev/null +++ b/Practicas/Practicas JS/boton escapista/index.html @@ -0,0 +1,31 @@ + + + + + + Mover botón con JavaScript + + + + + + + + + + \ No newline at end of file