FInal

MoiGL · May 15, 2024 · 0fef189 · 0fef189
1 parent 0042bb4
commit 0fef189
Show file tree

Hide file tree

Showing 22 changed files with 314 additions and 215 deletions.
diff --git a/2022-23-Proyecto-Convocatoria-Extraordinaria-v1.0.pdf b/2022-23-Proyecto-Convocatoria-Extraordinaria-v1.0.pdf
diff --git a/Bitacora.docx b/Bitacora.docx
diff --git a/E-R.png b/E-R.png
diff --git a/estilo/layout.css b/estilo/layout.css
@@ -1,4 +1,5 @@
 /* Estilos generales */
+/* Specificidad: 0,0,0 */
 * {
   box-sizing: border-box;
   margin: 0;
@@ -7,27 +8,31 @@
 
 
 /* Flexbox */
+/* Specificidad: 0,0,1 */
 main {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
 
 }
 
+/* Specificidad: 0,0,1 */
 nav {
   justify-content: space-between;
   align-items: center;
 }
 
+/* Specificidad: 0,0,1 */
 h1 {
   text-align: center;
 }
 
+/* Specificidad: 0,0,2 */
 header h1 {
   margin: 0;
 }
 
-
+/* Specificidad: 0,0,1 */
 section {
   flex-basis: 100%;
   max-width: 800px;
@@ -38,61 +43,71 @@ section {
 
 
 /* Estilos CSS para hacer la imagen adaptable */
+/* Specificidad: 0,0,2 */
 figure>img {
   max-width: 100%;
   height: auto;
 }
 
-
+/* Specificidad: 0,0,2 */
 section > img {
   max-width: 33%;
   height: auto;
 }
 
+/* Specificidad: 0,0,2 */
 section >form {
   text-align: center;
 }
 
 /* Estilos para los títulos de sección */
+/* Specificidad: 0,0,2 */
 section> h2 {
   margin-bottom: 10px;
 }
 
+/* Specificidad: 0,0,1 */
 article {
   text-align: center;
 }
 
+/* Specificidad: 0,0,1 */
 ul,
 ol {
   padding-left: 40px;
 }
 
+/* Specificidad: 0,0,1 */
 table {
   width: 100%;
   border-collapse: collapse;
 }
 
+/* Specificidad: 0,0,1 */
 th,
 td {
   padding: 10px;
   text-align: center;
 }
 
+/* Specificidad: 0,0,1 */
 button {
   display: inline-block;
 }
 
+/* Specificidad: 0,0,3 */
 body > main > article{
   height: 400px;
   width: 100%;
 }
 
 /* Estilos para los formularios */
+/* Specificidad: 0,0,1 */
 form {
   margin-bottom: 20px;
 }
 
-
+/* Specificidad: 0,0,3 */
 section article img{
   max-width: 100%;
   max-height: 100%;

diff --git a/gastronomia.html b/gastronomia.html
@@ -4,26 +4,26 @@
 <head>
     <meta charset="UTF-8">
     <meta name="description" content="Practica Extraordinaria SEW">
-    <title>Gastronomía típica de Barcelona</title>
     <meta name="keywords" content="HTML,CSS">
     <meta name="author" content="Moises Garcia Lopez">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<link rel="stylesheet" type="text/css" href="estilo/estilo.css">
-	<link rel="stylesheet" type="text/css" href="estilo/layout.css">
+    <title>Gastronomía típica de Barcelona</title>
+    <link rel="stylesheet" type="text/css" href="estilo/estilo.css">
+    <link rel="stylesheet" type="text/css" href="estilo/layout.css">
 </head>
 
 <body>
-	<header>
-		<nav>
-			<a href="index.html">Página principal</a>
-			<a href="gastronomia.html">Gastronomía</a>
-			<a href="rutas.html">Rutas</a>
-			<a href="meteorologia.html">Meteorología</a>
-			<a href="juego.html">Juego</a>
-			<a href="php/reservas.php">Reservas</a>
-		</nav>
+    <header>
+        <nav>
+            <a href="index.html">Página principal</a>
+            <a href="gastronomia.html">Gastronomía</a>
+            <a href="rutas.html">Rutas</a>
+            <a href="meteorologia.html">Meteorología</a>
+            <a href="juego.html">Juego</a>
+            <a href="php/reservas.php">Reservas</a>
+        </nav>
         <h1>Gastronomía</h1>
-	</header>
+    </header>
 
     <main>
         <section>
@@ -54,11 +54,16 @@ <h2>Postres típicos</h2>
             <h2>Ingredientes típicos</h2>
             <dl>
                 <dt>Aceite de oliva</dt>
-                <dd>Es el elemento más importante de la dieta mediterránea, y está presente en casi todas sus comidas. Su suave sabor la hacen un ingrediente ideal para ensaladas, gazpachos, vinagretas y muchas otras combinaciones.</dd>
+                <dd>Es el elemento más importante de la dieta mediterránea, y está presente en casi todas sus comidas.
+                    Su suave sabor la hacen un ingrediente ideal para ensaladas, gazpachos, vinagretas y muchas otras
+                    combinaciones.</dd>
                 <dt>Pescados y carnes</dt>
-                <dd>El pescado azul en pequeñas cantidades y las carnes magras, es la clave para comer proteína animal de forma saludable dentro de esta dieta.</dd>
+                <dd>El pescado azul en pequeñas cantidades y las carnes magras, es la clave para comer proteína animal
+                    de forma saludable dentro de esta dieta.</dd>
                 <dt>Cereales</dt>
-                <dd>Lo encontramos presente de varias formas dentro de la dieta mediterránea, puede ser en los diferentes tipos de arroces que se cocinan, o el pan que acompaña a varias de estas deliciosas recetas</dd>
+                <dd>Lo encontramos presente de varias formas dentro de la dieta mediterránea, puede ser en los
+                    diferentes tipos de arroces que se cocinan, o el pan que acompaña a varias de estas deliciosas
+                    recetas</dd>
             </dl>
         </section>
 
@@ -89,32 +94,38 @@ <h2>Tabla de platos típicos y sus ingredientes</h2>
                         <td>Berenjena, pimiento y cebolla</td>
                         <td>Plato principal</td>
                     </tr>
+                    <tr>
+                        <td>Crema Catalana</td>
+                        <td>Yemas de huevo, azúcar y Maicena</td>
+                        <td>Postre</td>
+                    </tr>
                 </tbody>
             </table>
         </section>
-        
+
         <section>
             <h2>Recursos multimedia</h2>
-            
+
             <h3>Imagen adaptable</h3>
             <figure>
                 <img src="multimedia/img/comida1.jpg" alt="Descripción de la imagen">
                 <figcaption>Barcelona - Paisaje</figcaption>
             </figure>
-            
+
             <h3>Video</h3>
             <video controls>
-                <source src="multimedia/videos/pollo.mp4" type="video/mp4">
+                <source src="multimedia/videos/video.mp4" type="video/mp4">
+                <source src="multimedia/videos/video.webm" type="video/webm">
                 Tu navegador no soporta el elemento video.
             </video>
-            
+
             <h3>Audio</h3>
             <audio controls>
-                <source src="multimedia/chicote.mp3" type="audio/mp3">
+                <source src="multimedia/audios/audio.mp3" type="audio/mp3">
+                <source src="multimedia/audios/audio.wav" type="audio/wav">
                 Tu navegador no soporta el elemento audio.
             </audio>
         </section>
-
 
     </main>
 </body>

diff --git a/index.html b/index.html
@@ -53,6 +53,7 @@ <h3>Mapa de Cataluña:</h3>
 		</section>
 		<section>
 			<h2>Noticias</h2>
+			<button id="buscarNoticias">Buscar noticias</button>
 			<ul></ul>
 		</section>
 	</main>

diff --git a/js/index.js b/js/index.js
@@ -6,8 +6,6 @@ class Carousel {
     this.totalImages = images.length;
     this.imageElement = document.querySelector('figure img');
     this.imageElement.src = images[0];
-    /* this.prevButton.addEventListener('click', this.showPrev.bind(this));
-    this.nextButton.addEventListener('click', this.showNext.bind(this)); */
   }
 
   showPrev() {
@@ -137,51 +135,59 @@ document.body.appendChild(elementoFecha);
 
 class Noticias {
   constructor() {
-    this.apiKey = "880174242cbf4a64b66fa340d92f744a";
-    this.apiUrl = "https://newsapi.org/v2/everything?q=barcelona&apiKey=" + this.apiKey;
-    this.listaNoticias = document.querySelector('body > main > section:nth-child(4) > ul');
+      this.apiKey = "880174242cbf4a64b66fa340d92f744a";
+      this.apiUrl = "https://newsapi.org/v2/everything?q=barcelona&apiKey=" + this.apiKey;
+      this.listaNoticias = document.querySelector('body > main > section:nth-child(4) > ul');
+      this.buscarNoticiasBtn = document.getElementById('buscarNoticias');
   }
 
   init() {
-    this.getNoticias();
+      this.buscarNoticiasBtn.addEventListener('click', () => {
+          this.getNoticias();
+      });
   }
 
   async getNoticias() {
-    try {
-      const response = await fetch(this.apiUrl);
-      if (!response.ok) {
-        throw new Error('Error al obtener las noticias: ' + response.status);
+      try {
+          const response = await fetch(this.apiUrl);
+          if (!response.ok) {
+              throw new Error('Error al obtener las noticias: ' + response.status);
+          }
+          const data = await response.json();
+
+          // Elimina este bucle for
+
+          // Agrega este código aquí
+          this.listaNoticias.innerHTML = ''; // Limpiar la lista antes de agregar nuevas noticias
+          for (let i = 0; i < 5; i++) {
+              const titulo = data.articles[i].title;
+              const descripcion = data.articles[i].summary;
+              const url = data.articles[i].link;
+
+              const li = document.createElement('li');
+              const a = document.createElement('a');
+              const h3 = document.createElement('h3');
+
+              a.href = url;
+              h3.textContent = titulo;
+
+              a.appendChild(h3);
+              li.appendChild(a);
+              this.listaNoticias.appendChild(li);
+          }
+      } catch (error) {
+          console.error('Se produjo un error al obtener las noticias:', error);
+          const errorLi = document.createElement('li');
+          errorLi.textContent = 'Se produjo un error al obtener las noticias: ' + error.message;
+          this.listaNoticias.appendChild(errorLi);
       }
-      const data = await response.json();
-
-      for (let i = 0; i < 5; i++) {
-        const titulo = data.articles[i].title;
-        const descripcion = data.articles[i].summary;
-        const url = data.articles[i].link;
-
-        const li = document.createElement('li');
-        const a = document.createElement('a');
-        const h3 = document.createElement('h3');
-
-        a.href = url;
-        h3.textContent = titulo;
-
-        a.appendChild(h3);
-        li.appendChild(a);
-        this.listaNoticias.appendChild(li);
-      }
-    } catch (error) {
-      console.error('Se produjo un error al obtener las noticias:', error);
-      const errorLi = document.createElement('li');
-      errorLi.textContent = 'Se produjo un error al obtener las noticias: ' + error.message;
-      this.listaNoticias.appendChild(errorLi);
-    }
   }
-};
+}
 
 document.addEventListener('DOMContentLoaded', () => {
   const noticias = new Noticias();
   noticias.init();
 });
 
 
+