Add files via upload

UO291047 · Nov 23, 2023 · c8b52d6 · c8b52d6
1 parent ea6747c
commit c8b52d6
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 4 deletions.
diff --git a/agenda.html b/agenda.html
@@ -13,6 +13,10 @@
     <link rel="stylesheet" type="text/css" href="estilo.css" />
     <link rel="stylesheet" type="text/css" href="layout.css" />
     <link rel="icon" href="multimedia/imagenes/favicon.ico"/>
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js" 
+        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" 
+        crossorigin="anonymous"></script>
+    <script src="js/agenda.js"></script>
 
 </head>
 
@@ -34,5 +38,13 @@ <h1>Escritorio Virtual</h1>
 
 <h2>Agenda</h2>
 
+<script>
+    const agenda = new Agenda();
+</script>
+
+<footer>
+    <button onclick="agenda.verXML()">Obtener datos F1</button>
+</footer>
+
 </body>
 </html>
diff --git a/js/agenda.js b/js/agenda.js
@@ -0,0 +1,56 @@
+class Agenda{
+
+    constructor(){
+        this.url = "http://ergast.com/api/f1/current";
+        this.last_api_call = null;
+        this.las_api_result = null;
+    }
+
+    cargarDatos(){
+        $.ajax({
+            dataType: "xml",
+            url: this.url,
+            method: 'GET',
+            success: function(datos){
+                //$("h5").text((new XMLSerializer()).serializeToString(datos));
+
+                //Presentación de los datos contenidos en XML
+                $.each($('Race',datos), function(item){
+                    var stringDatos = "<ul><li>Carrera: " + $('RaceName',item).text() + "</li>";
+                    stringDatos += "<li>Circuito: " + $('CircuitName',item).text() + "</li>";
+                    stringDatos += "<li>Coordenadas: [" + $('Location',item).attr('lat') + "," + $('Location',datos).attr('long') + "]</li>";
+                    stringDatos += "<li>Fecha: " + $('Date',item).text() + "</li>";
+                    stringDatos += "<li>Hora: " + $('Time',item).text() + "</li>";
+
+                    $("pre").html(stringDatos);
+                });
+
+            },
+            error:function(){
+                $("h4").remove();
+                //$("h5").remove();
+                $("pre").remove();
+                }
+        });
+    }
+
+    crearElemento(tipoElemento, texto, insertarAntesDe){
+        // Crea un nuevo elemento modificando el árbol DOM
+        // El elemnto creado es de 'tipoElemento' con un 'texto' 
+        // El elemnto se coloca antes del elemnto 'insertarAntesDe'
+        var elemento = document.createElement(tipoElemento); 
+        elemento.innerHTML = texto;
+        $(insertarAntesDe).before(elemento);
+    }
+
+    verXML(){
+
+        //Muestra el archivo XML recibido   
+        this.crearElemento("h4", "Datos", "footer")  
+        //this.crearElemento("h5", "", "h4") 
+        this.crearElemento("pre","","footer"); // Crea un elemento con DOM para el string con JSON
+        this.cargarDatos();
+        $("button").attr("disabled","disabled");
+    }
+
+}
diff --git a/js/ejemploSalida.xml b/js/ejemploSalida.xml
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="utf-8"?>
+<?xml-stylesheet type="text/xsl" href="/schemas/mrd-1.5.xsl"?>
+<MRData xmlns="http://ergast.com/mrd/1.5" series="f1" url="http://ergast.com/api/f1/current" limit="30" offset="0" total="22">
+    <RaceTable season="2023">
+        <Race season="2023" round="1" url="https://en.wikipedia.org/wiki/2023_Bahrain_Grand_Prix">
+            <RaceName>Bahrain Grand Prix</RaceName>
+            <Circuit circuitId="bahrain" url="http://en.wikipedia.org/wiki/Bahrain_International_Circuit">
+                <CircuitName>Bahrain International Circuit</CircuitName>
+                <Location lat="26.0325" long="50.5106">
+                    <Locality>Sakhir</Locality>
+                    <Country>Bahrain</Country>
+                </Location>
+            </Circuit>
+            <Date>2023-03-05</Date>
+            <Time>15:00:00Z</Time>
+            <FirstPractice>
+                <Date>2023-03-03</Date>
+                <Time>11:30:00Z</Time>
+            </FirstPractice>
+            <SecondPractice>
+                <Date>2023-03-03</Date>
+                <Time>15:00:00Z</Time>
+            </SecondPractice>
+            <ThirdPractice>
+                <Date>2023-03-04</Date>
+                <Time>11:30:00Z</Time>
+            </ThirdPractice>
+            <Qualifying>
+                <Date>2023-03-04</Date>
+                <Time>15:00:00Z</Time>
+            </Qualifying>
+        </Race>
+        <!-- ... (resto de las carreras) ... -->
+        <Race season="2023" round="22" url="https://en.wikipedia.org/wiki/2023_Abu_Dhabi_Grand_Prix">
+            <RaceName>Abu Dhabi Grand Prix</RaceName>
+            <Circuit circuitId="yas_marina" url="http://en.wikipedia.org/wiki/Yas_Marina_Circuit">
+                <CircuitName>Yas Marina Circuit</CircuitName>
+                <Location lat="24.4672" long="54.6031">
+                    <Locality>Abu Dhabi</Locality>
+                    <Country>UAE</Country>
+                </Location>
+            </Circuit>
+            <Date>2023-11-26</Date>
+            <Time>13:00:00Z</Time>
+            <FirstPractice>
+                <Date>2023-11-24</Date>
+                <Time>09:30:00Z</Time>
+            </FirstPractice>
+            <SecondPractice>
+                <Date>2023-11-24</Date>
+                <Time>13:00:00Z</Time>
+            </SecondPractice>
+            <ThirdPractice>
+                <Date>2023-11-25</Date>
+                <Time>10:30:00Z</Time>
+            </ThirdPractice>
+            <Qualifying>
+                <Date>2023-11-25</Date>
+                <Time>14:00:00Z</Time>
+            </Qualifying>
+        </Race>
+    </RaceTable>
+</MRData>
diff --git a/js/pais.js b/js/pais.js
@@ -62,12 +62,11 @@ class Pais {
                         stringDatos += "<li>Temperatura máxima: " + datos.list[0].main.temp_max + " grados Celsius</li>";
                         stringDatos += "<li>Temperatura mínima: " + datos.list[0].main.temp_min + " grados Celsius</li>";
                         stringDatos += "<li>Humedad: " + datos.list[0].main.humidity + " %</li>";
-                        stringDatos += "<li> <img src=https://openweathermap.org/img/wn/" + datos.list[0].weather[0].icon + "@2x.png/> </li>";
+                        stringDatos += "<li> <img src=https://openweathermap.org/img/wn/" + datos.list[0].weather[0].icon + "@2x.png> </li>";
 
                     $("pre").html(stringDatos);
                 },
             error:function(){
-                $("h3").html("¡Tenemos problemas! No puedo obtener JSON de <a href='http://openweathermap.org'>OpenWeatherMap</a>"); 
                 $("h4").remove();
                 $("pre").remove();
                 }
@@ -91,8 +90,9 @@ class Pais {
         //https://api.openweathermap.org/data/2.5/forecast?lat=-6.17221&lon=35.73947&appid=dff06432f9d5b3e7c70f9a5f75d2615d&units=metric&lang=es
         this.correcto = "¡Todo correcto! JSON recibido de <a href='http://openweathermap.org'>OpenWeatherMap</a>";
 
-        //Muestra el archivo JSON recibido     
-        this.crearElemento("pre","Datos","p"); // Crea un elemento con DOM para el string con JSON
+        //Muestra el archivo JSON recibido   
+        this.crearElemento("h4", "Datos", "footer")  
+        this.crearElemento("pre","","footer"); // Crea un elemento con DOM para el string con JSON
         this.cargarDatos();
     }
 

diff --git a/meteorologia.html b/meteorologia.html
@@ -50,5 +50,7 @@ <h2>Meteorología</h2>
     pais.verJSON();
 </script>
 
+<footer></footer>
+
 </body>
 </html>