taller 2 completo

JuanDDY · Oct 27, 2023 · 6fdb093 · 6fdb093
1 parent cbd7673
commit 6fdb093
Show file tree

Hide file tree

Showing 12 changed files with 135 additions and 71 deletions.
diff --git a/ejemplos/Serie.ts → Serie.ts b/ejemplos/Serie.ts → Serie.ts
diff --git a/ejemplos/data.ts → data.ts b/ejemplos/data.ts → data.ts
diff --git a/ejemplos/data.js b/ejemplos/data.js
diff --git a/ejemplos/index.js b/ejemplos/index.js
diff --git a/ejemplos/index.ts b/ejemplos/index.ts
diff --git a/index.html b/index.html
@@ -3,7 +3,8 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet"  href="lib/style.css"/>
+  <link rel="stylesheet"  href="styles/style.css"/>
+  <link rel="icon" href="imagenes/logo.png">
   <link
       href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
       rel="stylesheet"
@@ -27,9 +28,9 @@
   </header>
 
 
-  <div class="container">
+  <div class="container" id="Cuerpo">
     <div class="row">
-      <div class="col-lg-7 col-12">
+      <div class="col-lg-8 col-8 col-sm-12">
         <table class="table table-striped table-dark" id="tablaSeries">
           <thead>
             <tr>
@@ -44,15 +45,14 @@
         </table>
         <p id="average">Average seasons: 0</p>
       </div>
-      <div class="col-lg-6 col-12" id="contenido">
+      <div class="col-lg-4 col-4 col-sm-12" id="cartaContenido">
       </div>
     </div>
   </div>
 
-<script>var exports = {}</script>
-<script type="module" src = "ejemplos/index.js"></script>
-<script type="module" src = "ejemplos/data.js"></script>
-<script type="module" src = "ejemplos/Serie.js"></script>
+<script type="module" src = "scripts/index.js"></script>
+<script type="module" src = "scripts/data.js"></script>
+<script type="module" src = "scripts/Serie.js"></script>
 </body>
 </html>
 

diff --git a/index.ts b/index.ts
@@ -0,0 +1,62 @@
+import { series } from './data.js';
+import { Serie } from './Serie.js';
+
+export const tabla: HTMLElement | null = document.getElementById('cuerpo-Series');
+const espacioCarta: HTMLElement | null = document.getElementById('cartaContenido');
+var sumatoria: number = 0;
+
+
+function cargarTabla():void{
+    if (tabla) {
+    series.forEach((serie) => {
+        const row = document.createElement('tr');
+        row.innerHTML = `
+            <td scope="row">${serie.id}</td>
+            <td scope="row" id="nombreSerie">${serie.nombre}</td>
+            <td scope="row">${serie.canal}</td>
+            <td scope="row">${serie.temporadas}</td>`
+
+        tabla.appendChild(row);
+
+        row.addEventListener('click', () => {cargarCarta(serie)});
+    });
+
+    } else {
+        console.error("No se encontró el elemento con el id \"cuerpo-Series\"");
+    }
+}
+
+
+function cargarCarta(serie: Serie):void{
+    if(espacioCarta){
+        espacioCarta.innerHTML = `<div class="card text-white bg-dark border-primary mb-5" style="width: 18rem;">
+        <img class="card-img-top" src="${serie.imagen}" alt="Card image cap">
+        <div class="card-body">
+            <h3>${serie.nombre}</h3>
+            <p class="card-text">${serie.descripcion}</p>
+            <a href="${serie.link}">Clic aca para visitar la serie</a>
+        </div>
+      </div>`
+    }
+}
+
+
+function promedioTemporadas():void{
+    if (tabla) {
+        series.forEach((serie) => {
+            sumatoria += serie.temporadas;
+        });
+    }
+    const parrafo = document.getElementById('average');
+    var promedio = sumatoria / series.length;
+    if (parrafo != null){
+        parrafo.innerHTML = `Average seasons: ${promedio}`
+    } else {
+        console.error("No se encontró el elemento con el id \"average\"");
+    }
+
+}
+
+
+cargarTabla();
+promedioTemporadas()
diff --git a/ejemplos/Serie.js → scripts/Serie.js b/ejemplos/Serie.js → scripts/Serie.js
@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Serie = void 0;
-class Serie {
-    constructor(id, nombre, canal, temporadas, descripcion, link, imagen) {
+var Serie = /** @class */ (function () {
+    function Serie(id, nombre, canal, temporadas, descripcion, link, imagen) {
         this.id = id;
         this.nombre = nombre;
         this.canal = canal;
@@ -11,5 +8,6 @@ class Serie {
         this.link = link;
         this.imagen = imagen;
     }
-}
-exports.Serie = Serie;
+    return Serie;
+}());
+export { Serie };
diff --git a/scripts/data.js b/scripts/data.js
diff --git a/scripts/index.js b/scripts/index.js
@@ -0,0 +1,39 @@
+import { series } from './data.js';
+export var tabla = document.getElementById('cuerpo-Series');
+var espacioCarta = document.getElementById('cartaContenido');
+var sumatoria = 0;
+function cargarTabla() {
+    if (tabla) {
+        series.forEach(function (serie) {
+            var row = document.createElement('tr');
+            row.innerHTML = "\n            <td scope=\"row\">".concat(serie.id, "</td>\n            <td scope=\"row\" id=\"nombreSerie\">").concat(serie.nombre, "</td>\n            <td scope=\"row\">").concat(serie.canal, "</td>\n            <td scope=\"row\">").concat(serie.temporadas, "</td>");
+            tabla.appendChild(row);
+            row.addEventListener('click', function () { cargarCarta(serie); });
+        });
+    }
+    else {
+        console.error("No se encontró el elemento con el id \"cuerpo-Series\"");
+    }
+}
+function cargarCarta(serie) {
+    if (espacioCarta) {
+        espacioCarta.innerHTML = "<div class=\"card text-white bg-dark border-primary mb-5\" style=\"width: 18rem;\">\n        <img class=\"card-img-top\" src=\"".concat(serie.imagen, "\" alt=\"Card image cap\">\n        <div class=\"card-body\">\n            <h3>").concat(serie.nombre, "</h3>\n            <p class=\"card-text\">").concat(serie.descripcion, "</p>\n            <a href=\"").concat(serie.link, "\">Clic aca para visitar la serie</a>\n        </div>\n      </div>");
+    }
+}
+function promedioTemporadas() {
+    if (tabla) {
+        series.forEach(function (serie) {
+            sumatoria += serie.temporadas;
+        });
+    }
+    var parrafo = document.getElementById('average');
+    var promedio = sumatoria / series.length;
+    if (parrafo != null) {
+        parrafo.innerHTML = "Average seasons: ".concat(promedio);
+    }
+    else {
+        console.error("No se encontró el elemento con el id \"average\"");
+    }
+}
+cargarTabla();
+promedioTemporadas();
diff --git a/lib/style.css → styles/style.css b/lib/style.css → styles/style.css
@@ -54,6 +54,9 @@ body {
   width: 80px;
 }
 
+#nombreSerie{
+  color:cyan;
+}
 
 .menu {
   width: 900px;
@@ -70,6 +73,10 @@ nav {
   font-size: 20pt;
 }
 
+#cartaContenido {
+  margin: 30px auto;
+}
+
 .table {
   margin: 30px auto;
 }

diff --git a/tsconfig.json b/tsconfig.json
@@ -11,7 +11,7 @@
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 
     /* Language and Environment */
-    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "target": "es5",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
@@ -25,8 +25,8 @@
     // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
 
     /* Modules */
-    "module": "commonjs",                                /* Specify what module code is generated. */
-    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
+    "module": "es6",                                /* Specify what module code is generated. */
+    "rootDir": "./",                                  /* Specify the root folder within your source files. */
     // "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
@@ -55,7 +55,7 @@
     // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
     // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
-    // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
+    "outDir": "./scripts",                                   /* Specify an output folder for all emitted files. */
     // "removeComments": true,                           /* Disable emitting comments. */
     // "noEmit": true,                                   /* Disable emitting files from a compilation. */
     // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
@@ -90,7 +90,7 @@
     // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
     // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
     // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
-    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
+    "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
     // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
     // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
     // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */